모방 창 시스템 달력 효과를 달성하기 위한 Node.js
- php中世界最好的语言원래의
- 2017-12-30 18:00:091792검색
이번에 가져온 것은 윈도우 시스템 달력 효과를 js로 구현한 것입니다. 플러그인이 필요하지 않고 코드 양이 조금 더 많지만 그래도 그대로입니다. 오늘은 훌륭한 참고 자료가 될 것입니다.
이 달력은 주로 현재 시간, 시, 분, 초, 연, 월, 일, 주를 가져오고 연도 및 월 선택을 동적으로 생성한 다음 연도 및 월에 해당하는 월의 날짜를 표시하는 기능을 주로 구현합니다. 선택한 연도와 달에.
이전 달과 다음 달 버튼을 클릭하면 드롭다운 목록에 해당 연도와 달이 표시됩니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#calendar {
position: absolute;
padding: 5px;
border: 1px solid #000000;
background: #8f3349;
display: none;
}
#todayTime {
padding: 5px 0;
font-size: 40px;
color: white;
}
#todayDate {
padding: 5px 0;
font-size: 24px;
color: #ffcf88;
}
#tools {
padding: 5px 0;
height: 30px;
color: white;
}
#tools .l {
float: left;
}
#tools .r {
float: right;
}
table {
width: 100%;
color: white;
}
table th {
color: #a2cbf3;
}
table td {
text-align: center;
cursor: default;
}
table td.today {
background: #cc2951;
color: white;
}
</style>
<script>
window.onload = function() {
var text1 = document.getElementById('text1');
text1.onfocus = function() {
calendar();
}
// calendar();
function calendar() {
var calendarElement = document.getElementById('calendar');
var todayTimeElement = document.getElementById('todayTime');
var todayDateElement = document.getElementById('todayDate');
var selectYearElement = document.getElementById('selectYear');
var selectMonthElement = document.getElementById('selectMonth');
var showTableElement = document.getElementById('showTable');
var prevMonthElement = document.getElementById('prevMonth');
var nextMonthElement = document.getElementById('nextMonth');
calendarElement.style.display = 'block';
/*
* 获取今天的时间
* */
var today = new Date();
//设置日历显示的年月
var showYear = today.getFullYear();
var showMonth = today.getMonth();
//持续更新当前时间
updateTime();
//显示当前的年月日星期
todayDateElement.innerHTML = getDate(today);
//动态生成选择年的select
for (var i=1970; i<2020; i++) {
var option = document.createElement('option');
option.value = i;
option.innerHTML = i;
if ( i == showYear ) {
option.selected = true;
}
selectYearElement.appendChild(option);
}
//动态生成选择月的select
for (var i=1; i<13; i++) {
var option = document.createElement('option');
option.value = i - 1;
option.innerHTML = i;
if ( i == showMonth + 1 ) {
option.selected = true;
}
selectMonthElement.appendChild(option);
}
//初始化显示table
showTable();
//选择年
selectYearElement.onchange = function() {
showYear = this.value;
showTable();
showOption();
}
//选择月
selectMonthElement.onchange = function() {
showMonth = Number(this.value);
showTable();
showOption();
}
//上一个月
prevMonthElement.onclick = function() {
showMonth--;
showTable();
showOption();
}
//下一个月
nextMonthElement.onclick = function() {
showMonth++;
showTable();
showOption();
}
/*
* 实时更新当前时间
* */
function updateTime() {
var timer = null;
//每个500毫秒获取当前的时间，并把当前的时间格式化显示到指定位置
var today = new Date();
todayTimeElement.innerHTML = getTime(today);
timer = setInterval(function() {
var today = new Date();
todayTimeElement.innerHTML = getTime(today);
}, 500);
}
function showTable() {
showTableElement.tBodies[0].innerHTML = '';
//根据当前需要显示的年和月来创建日历
//创建一个要显示的年月的下一个的日期对象
var date1 = new Date(showYear, showMonth+1, 1, 0, 0, 0);
//对下一个月的1号0时0分0秒的时间 - 1得到要显示的年月的最后一天的时间
var date2 = new Date(date1.getTime() - 1);
//得到要显示的年月的总天数
var showMonthDays = date2.getDate();
//获取要显示的年月的1日的星期,从0开始的星期
date2.setDate(1);
//showMonthWeek表示这个月的1日的星期，也可以作为表格中前面空白的单元格的个数
var showMonthWeek = date2.getDay();
var cells = 7;
var rows = Math.ceil( (showMonthDays + showMonthWeek) / cells );
//通过上面计算出来的行和列生成表格
//没生成一行就生成7列
//行的循环
for ( var i=0; i<rows; i++ ) {
var tr = document.createElement('tr');
//列的循环
for ( var j=0; j<cells; j++ ) {
var td = document.createElement('td');
var v = i*cells + j - ( showMonthWeek - 1 );
//根据这个月的日期控制显示的数字
//td.innerHTML = v;
if ( v > 0 && v <= showMonthDays ) {
//高亮显示今天的日期
if ( today.getFullYear() == showYear && today.getMonth() == showMonth && today.getDate() == v ) {
td.className = 'today';
}
td.innerHTML = v;
} else {
td.innerHTML = '';
}
td.ondblclick = function() {
calendarElement.style.display = 'none';
text1.value = showYear + '年' + (showMonth+1) + '月' + this.innerHTML + '日';
}
tr.appendChild(td);
}
showTableElement.tBodies[0].appendChild(tr);
}
}
function showOption() {
var date = new Date(showYear, showMonth);
var sy = date.getFullYear();
var sm = date.getMonth();
console.log(showYear, showMonth)
var options = selectYearElement.getElementsByTagName('option');
for (var i=0; i<options.length; i++) {
if ( options[i].value == sy ) {
options[i].selected = true;
}
}
var options = selectMonthElement.getElementsByTagName('option');
for (var i=0; i<options.length; i++) {
if ( options[i].value == sm ) {
options[i].selected = true;
}
}
}
}
/*
* 获取指定时间的时分秒
* */
function getTime(d) {
return [
addZero(d.getHours()),
addZero(d.getMinutes()),
addZero(d.getSeconds())
].join(':');
}
/*
* 获取指定时间的年月日和星期
* */
function getDate(d) {
return d.getFullYear() + '年'+ addZero(d.getMonth() + 1) +'月'+ addZero(d.getDate()) +'日 星期' + getWeek(d.getDay());
}
/*
* 给数字加前导0
* */
function addZero(v) {
if ( v < 10 ) {
return '0' + v;
} else {
return '' + v;
}
}
/*
* 把数字星期转换成汉字星期
* */
function getWeek(n) {
return '日一二三四五六'.split('')[n];
}
}
</script>
</head>
<body>
<input type="text" id="text1">
<p id="calendar">
<p id="todayTime"></p>
<p id="todayDate"></p>
<p id="tools">
<p class="l">
<select id="selectYear"></select> 年
<select id="selectMonth"></select> 月
</p>
<p class="r">
<span id="prevMonth">∧</span>
<span id="nextMonth">∨</span>
</p>
</p>
<table id="showTable">
<thead>
<tr>
<th>日</th>
<th>一</th>
<th>二</th>
<th>三</th>
<th>四</th>
<th>五</th>
<th>六</th>
</tr>
</thead>
<tbody></tbody>
</table>
</p>
</body>
</html>위의 소개를 읽으신 후 방법을 마스터하셨다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!
관련 읽기:
memcached를 사용하여 PHP 캐시 최적화를 구현하는 단계,
위 내용은 모방 창 시스템 달력 효과를 달성하기 위한 Node.js의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.