Calendar-2373724625

作者: ShervenLee | 来源:发表于2017-12-08 16:47 被阅读15次

1.模块简介

倒计时闹钟（方便调试所以是倒计时，考察知识点都是一样的）
世界时间（获取当前时间，加上时差，得到结果）
日历（公历计算出来的，农历由数据推出来的）

2.倒计时闹钟

2.1界面

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

<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>&nbsp;<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)     跳转显示相应月份 （关键函数）指定年月就会刷新显示年月数据

Calendar-2373724625

1.模块简介

2.倒计时闹钟

2.1界面

2.2关键流程：

2.2.1用户在输入框输入时间

2.2.2点击开始按钮

2.2.3点击停止按钮

2.2.4点击选择铃声选择框

3.世界时间

3.1界面

3.2主要流程

4.日历

4.1界面（又可分为三个子界面）

4.2.1基本信息展示区

4.2.2当前年月显示区

4.2.2.1关键函数

4.2.2.2阴历数据

4.2.2.3节气数据

4.2.2.4节日数据

4.2.3操作区

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读