원생 js 윈도 우즈 10 시스템 달력 효과 모방 실례
9465 단어 원생윈도 우즈 10 시스템 모방일력
이 달력 은 현재 시간 을 가 져 올 때 분 초,년 월 일 주,동적 으로 선택 년 의 select,월 의 select 를 생 성 한 다음 선택 한 년 월 에 따라 해당 년 월 에 해당 하 는 날 짜 를 표시 합 니 다.
지난달,다음 달 단 추 를 누 르 면 드 롭 다운 목록 에 해당 하 는 년 월 을 표시 합 니 다.
<!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">
<div id="calendar">
<div id="todayTime"></div>
<div id="todayDate"></div>
<div id="tools">
<div class="l">
<select id="selectYear"></select>
<select id="selectMonth"></select>
</div>
<div class="r">
<span id="prevMonth">∧</span>
<span id="nextMonth">∨</span>
</div>
</div>
<table id="showTable">
<thead>
<tr>
<th> </th>
<th> </th>
<th> </th>
<th> </th>
<th> </th>
<th> </th>
<th> </th>
</tr>
</thead>
<tbody></tbody>
</table>
</div>
</body>
</html>
이상 의 원생 js 가 윈도 우즈 10 시스템 달력 을 모방 하 는 효 과 를 실현 한 실례 는 바로 소 편 이 여러분 에 게 공유 한 모든 내용 입 니 다.여러분 께 참고 할 수 있 고 많은 응원 을 바 랍 니 다.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
원본 javaScript에서 그림 시간 지연 로드를 실현하는 방법본고는 원생javaScript가 그림의 시간 지연을 실현하여 불러오는 방법을 실례로 기술하였다.그림 시간 지연 불러오는 것은 사실 jquery 플러그인이 있고 불러오는 방법이 매우 간단하고 합리적이지만 jquery ...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
