Calendar-2373724625
2017-12-08 本文已影响15人
ShervenLee
1.模块简介
倒计时闹钟（方便调试所以是倒计时，考察知识点都是一样的）
世界时间（获取当前时间，加上时差，得到结果）
日历（公历计算出来的，农历由数据推出来的）
2.倒计时闹钟
2.1界面
image.png
image.png
<div id="clockdiv">
<label style="font-weight: bold;">铃声选择：</label>
<select id="v" style="height:30px;border-radius: 4px;">
<option value="1">铃声 一 </option>
<option value="2">铃声 二</option>
<option value="3">铃声 三</option>
</select>
<br />
<label style="font-weight:bold;">倒计定点闹钟：</label></br>
<input id="s" value="0" class="inputc">
<label style="font-weight: bold;">时</label>
<input id="f" value="1" class="inputc">
<label style="font-weight: bold;">分</label>
<input id="m" value="6" class="inputc">
<label style="font-weight: bold;">秒</label>
</br>
</br>
<button onClick="start()" class="button">开 始</button>
<button onClick="stop()" class="button" style="margin-right: -15%;">停止</button>
<audio src="music/2.mp3" id="music" controls="controls" loop="loop" style="display: none;"></audio>
<label id="note" class="notec">倒计时正在进行！</label>
</div>
2.2关键流程：
2.2.1用户在输入框输入时间
2.2.2点击开始按钮
执行start函数，并判断是否已到设定的时间，到达时间则执行停止函数并响铃。期间会每个1000毫秒（1秒）更新一下界面
function start(){
ks=1;//开始标志置为1，表示闹钟已经开始执行
document.getElementById("note").style.visibility="visible";//设置提示消息框为可见
//下面三句获取用户输入的时分秒数据
s=document.getElementById("s").value;
f=document.getElementById("f").value;
m=document.getElementById("m").value;
if(k==1){
k=0;
djuge();//每隔一秒更新一下界面，并判断是否结束
}else{
alert("请先停止上次的倒计时闹铃，再开始新的！");
}
}
2.2.3点击停止按钮
执行stop函数，停止音乐（如果在播放的话），停止定时器，界面不再更新，开始标志置为0。之前的显示提示信息的界面置为不可见。
function stop(){
//k=0 进行倒计时；k=1音乐播放中
ks=0;//停止倒计时
var audio = document.getElementById('music');
audio.pause();
document.getElementById("note").innerHTML="倒计时正在进行！";
document.getElementById("note").style.visibility="hidden";
a=2;
k=1;//先ks赋值1在k开始循环
}
2.2.4点击选择铃声选择框
把需要播放的音乐的资源地址更改一下就好了，播放音乐的时候是获取该选择框当前选中的值
document.getElementById('music').src="music/"+document.getElementById("v").value+".mp3";
3.世界时间
3.1界面
image.png
image.png
<div class="rtime" id="rtime">
<span>
国际：<select onchange="changeWorldClock()" id="worldTime">
<option value="-12" selected="selected">国际换日线</option>
<option value="-11">萨摩亚</option>
<option value="-10">夏威夷</option>
<option value="-9">阿拉斯加</option>
<option value="-8">太平洋</option>
<option value="-7">美国山区</option>
<option value="-6">墨西哥</option>
<option value="-5">南美洲太平洋</option>
<option value="-4">大西洋</option>
<option value="-3.3">纽芬兰</option>
<option value="-3">东南美洲</option>
<option value="-2">大西洋中部</option>
<option value="-1">亚速尔</option>
<option value="0">英国夏令</option>
<option value="0">格林威治标准</option>
<option value="1">罗马</option>
<option value="2">以色列</option>
<option value="3">俄罗斯</option>
<option value="3.3">伊朗</option>
<option value="4">阿拉伯</option>
<option value="5">西亚</option>
<option value="6">中亚</option>
<option value="7">曼谷</option>
<option value="8" selected="selected">中国</option>
<option value="9">东京</option>
<option value="9.3">澳洲中部</option>
<option value="10">西太平洋</option>
<option value="11">太平洋中部</option>
<option value="12">斐济</option>
</select> <b id="worldTimeNow"></b></span></div>
3.2主要流程
选择并城市并更新界面
用户选择城市（只要改变城市就执行changeWorldClock函数）->获取当前时区时间->根据时差计算出 当前城市时间->时间显示文本框设置为可见->设置定时器，每个一秒更新当前显示的时间
4.日历
4.1界面（又可分为三个子界面）
基本信息展示区
当前年月显示区
操作区
<!-- 显示日期详情 -->
<div id="detail">
<div id="date_content"></div>
<div id="animal_year"></div>
<!-- 显示时钟 -->
<p id="clock"></p>
</div>
<form name="calender_content" style="margin-top: -15px;" id="formdiv">
<table class="week">
<tbody>
<tr>
<td class="ch">
<!-- 日历头部 -->
<table>
<tbody>
<tr class="day">
<td>日</td>
<td>一</td>
<td>二</td>
<td>三</td>
<td>四</td>
<td>五</td>
<td>六</td>
</tr>
</tbody>
</table>
</td>
</tr>
<!-- 头部END -->
<!-- js动态的向表格写入日期 -->
<script>
var Num; //Num计算出日期位置
for(i = 0; i < 6; i++) {
document.write('<table id="cal-content"><tr>');
for(j = 0; j < 7; j++) {
Num = i * 7 + j;
document.write('<td id="SD' + Num + '" onclick="addDay(' + Num + ')" ');
//周六 周日 假期样式设定
if(j == 0 || j == 6) {
document.write(' class="aorange"');
} else {
document.write(' class="one"');
}
document.write('title=""> </td>')
}
document.write('</tr></table></td></tr><tr><td><table style="width:399;"><tr style="text-align:center"> ');
//农历
for(j = 0; j < 7; j++) {
Num = i * 7 + j;
document.write('<td id="LD' + Num + '" onclick="addDay(' + Num + ')" class="bs" title=""> </td>')
}
document.write('</tr></table></td></tr>');
}
</script>
<!-- 生成日期 END -->
</tr>
</table>
</td>
</tr>
</tbody>
</table>
<table>
<tbody>
<tr>
<td class="sm">
<table class="table_head">
<tbody>
<tr>
<td>
<!-- 选择年份菜单 -->
<div class="year_select">
<span onClick="BtN('year_left')"><img src="img/left.png"></span>
<select onChange="chaCld()" name="SY">
<script>
for(i = 1900; i <= 2100; i++)
document.write('<option>' + i + "年")
</script>
</select>
<span onClick="BtN('year_right')"><img src="img/right.png"></span>
</div>
<!-- 回到当天菜单 -->
<div class="home_select">
<span onClick="BtN('')"><img src="img/2.png" style="width:26px;height:26px"></span>
</div>
<!-- 选择月份菜单 -->
<div style="display:inline-block;">
<span onClick="BtN('month_left')"><img src="img/left.png"></span>
<select onChange="chaCld()" name="SM">
<script>
for(i = 1; i < 13; i++) document.write('<option>' + i + "月")
</script>
</select>
<span onClick="BtN('month_right')"><img src="img/right.png"></span>
</div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</form>
4.2.1基本信息展示区
基本信息展示区
界面描述
公历日期 年份属相
农历日期 当前几号
农历相关信息（不需要可删除）
当前时间
日 一 二 三 四 五 六
这个界面基本没有什么，就是显示信息
数据是通过addDay函数进行更新的，参数为当前日期（日）
//生成日历数据
function addDay(v) {
var s, fes;
var solar_obj = eval('SD' + v);
var d = solar_obj.innerHTML - 1;
if(solar_obj.innerHTML != '') {
solar_obj.style.cursor = 'pointer';
fes = '<table><tr><td>' + '<span><b>' + cld[d].solarTerms + ' ' + cld[d].solar_festival + ' ' + cld[d].lunar_festival + '</b></span></td>' +
'</tr></table>';
day_detal =
'<table class="detallu"><tr><td>' + '<table><tr><td><span>' + cld[d].sy + '-' + cld[d].s_m + '-' + cld[d].s_d + ' 星期' + cld[d].week + '<br>' +
'<p style="font-family:courier;font-size: 54px;margin-right: -215%;margin-bottom: 52%;">' + cld[d].s_d + '</p>' +
'<span style=" float: right;margin-top: -86%;font-size: 13px;">' + fes + '农历' + (cld[d].isLeap ? '闰 ' : ' ') + cld[d].l_m + ' 月 ' + cld[d].l_d + ' 日</span><br>' +
'<span style="float: right;margin-top: -71%;font-size: 13px;">' + cld[d].c_y + '年 ' + cld[d].c_m + '月 ' + cld[d].cal_d + '日</span>'
'</td></tr></table>';
date_content.innerHTML = day_detal;
}
}
4.2.2当前年月显示区
当前年月显示区
4.2.2.1关键函数
setCld(SY, SM) 跳转显示相应月份 （关键函数）指定年月就会刷新显示年月数据
/**
* 跳转显示相应月份
* @param {Object} SY 年
* @param {Object} SM 月
*/
function setCld(SY, SM) {
var i, sD, s, size;
cld = new calendar(SY, SM);
animal_year.innerHTML = '<span class="smlb">' + Animals[(SY - 4) % 12] + '</span>';
for(i = 0; i < 42; i++) {
solar_obj = eval('SD' + i);
lunar_obj = eval('LD' + i);
solar_obj.style.background = '';
lunar_obj.style.background = '';
sD = i - cld.firstWeek;
if(sD > -1 && sD < cld.length) {
solar_obj.innerHTML = sD + 1;
if(cld[sD].istoday) {
solar_obj.style.background = '#DEFDFD';
lunar_obj.style.background = '#91DAE3';
addDay(i);
}
solar_obj.style.color = cld[sD].color;
if(cld[sD].l_d == 1)
lunar_obj.innerHTML = '<b>' + (cld[sD].isLeap ? '闰' : '') + cld[sD].l_m + '月' + (lunar_leap_d(cld[sD].lYear, cld[sD].l_m) == 29 ? '小' : '大') + '</b>';
else
lunar_obj.innerHTML = cal_d(cld[sD].l_d);
s = cld[sD].lunar_festival;
if(s.length > 0) {
if(s.length > 5) s = s.substr(0, 3) + '…';
} else {
s = cld[sD].solar_festival;
if(s.length > 0) {
size = (s.charCodeAt(0) > 0 && s.charCodeAt(0) < 128) ? 8 : 4;
if(s.length > size + 1) s = s.substr(0, size - 1) + '…';
s = s.fontcolor('#79B0F6'); //节日
} else {
s = cld[sD].solarTerms; //24节气
if(s.length > 0) s = s.fontcolor('#2EBEB7');
}
}
if(s.length > 0) lunar_obj.innerHTML = s;
//阴历数据有线，超出部分则不显示
if(lunar_obj.innerHTML.indexOf("undefined") >= 0) {
lunar_obj.innerHTML = "——";
}
} else {
solar_obj.innerHTML = ' ';
lunar_obj.innerHTML = ' ';
}
}
}
4.2.2.2阴历数据
阴历数据
表示意义：
数据需要转换成二进制
例如
1980年的数据是： 0x095b0
二进制：0000 1001 0101 1011 0000
表示1980年没有闰月，从1月到12月的天数依次为：30、29、29、30、29、30、29、30、30、29、30、30。
4.2.2.3节气数据
var solar_term = new Array("小寒", "大寒", "立春", "雨水", "惊蛰", "春分", "清明", "谷雨", "立夏", "小满", "芒种", "夏至", "小暑", "大暑", "立秋", "处暑", "白露", "秋分", "寒露", "霜降", "立冬", "小雪", "大雪", "冬至");
节气二十四个，所以直接用数据存储
4.2.2.4节日数据
//农历节日 *表示放假日
var lunar_fes = new Array(
"0101*春节",
"0115 元宵",
"0505 端午",
"0707 七夕",
"0715 中元",
"0815 中秋",
"0909 重阳",
"1208 腊八节",
"1223 小年",
"0100*除夕");
公历节日是固定的，直接根据数值获取
4.2.3操作区
操作区
界面描述
年选择 主页（可以回到今天） 月选择
点击年份、月份左右箭头都会执行BtN(vaule)函数
只是vaule参数不同
参数如下：
年左--BtN('year_left')
年右--BtN('year_right')
月左--BtN('month_left')
月右--BtN('month_right')
主页不带参数就表示今天
：主页--BtN('')
BtN如
/**
* 年份，月份选择菜单栏
* @param {Object} Value <year_left|year_right|month_left|month_right>
*/
function BtN(Value) {
if(Value == 'year_left' && calender_content.SY.selectedIndex > 0) {
calender_content.SY.selectedIndex--;
} else if(Value == 'year_right' && calender_content.SY.selectedIndex < 200) {
calender_content.SY.selectedIndex++;
} else if(Value == 'month_left') {
if(calender_content.SM.selectedIndex > 0) {
calender_content.SM.selectedIndex--;
} else {
calender_content.SM.selectedIndex = 11;
if(calender_content.SY.selectedIndex > 0) calender_content.SY.selectedIndex--;
}
} else if(Value == 'month_right') {
if(calender_content.SM.selectedIndex < 11) {
calender_content.SM.selectedIndex++;
} else {
calender_content.SM.selectedIndex = 0;
if(calender_content.SY.selectedIndex < 200) calender_content.SY.selectedIndex++;
}
} else {
calender_content.SY.selectedIndex = tY - 1900;
calender_content.SM.selectedIndex = tM;
}
chaCld();
}
年月还可以直接下拉选择，只要发生改变就会执行chaCld()函数
image.png
/**
* 改变成需要显示年月
*/
function chaCld() {
var y, m;
y = calender_content.SY.selectedIndex + 1900;
m = calender_content.SM.selectedIndex;
setCld(y, m);
}
这里一共三个关键函数
chaCld 改变成需要显示年月
BtN 年份，月份选择菜单栏
setCld(SY, SM) 跳转显示相应月份 （关键函数）指定年月就会刷新显示年月数据
