javascript新历农历联动示例

  javascript新历农历联动示例

lunar.js这个js文件查看这篇文章:JavaScript阳历转阴历源代码,将里面的js代码保存为lunar.js文件,或者点击这里下载

 

  javascript新历农历联动示例源代码

javascript新历农历联动示例

<script>
    function toCNNumber(v) {
        var r = '', cn = 'O一二三四五六七八九十';
        v = v.toString();
        for (var i = 0; i < v.length; i++) r += cn.charAt(v.charAt(i));
        return r;
    }
    var now = new Date(), y = now.getFullYear(), ba = 20/*取和当前时间相差前后20年*/;
    var yOpts = '',cnyOpts='', mOpts = '', dOpts = '';
    for (var i = y - 20, j = y + 20; i <= j; i++) {
        cnyOpts += '<option value="' + i + '">' + toCNNumber(i) + '</option>';
        yOpts += '<option value="' + i + '">' + i + '</option>';
    }
    for (var i = 1, j = 12; i <= j; i++) mOpts += '<option value="' + i + '">' + i + '</option>';
    for (var i = 1, j = 31; i <= j; i++) dOpts += '<option value="' + i + '">' + i + '</option>';
</script>
<table border="1">
    <tr><td id="tdNow" colspan="2"></tr>
    <tr>
        <td>
            起始<br><br>
            <select id="stY"><script>document.write(yOpts)</script></select>年
            <select id="stM"><script>document.write(mOpts)</script></select>月
            <select id="stD"><script>document.write(dOpts)</script></select>日<br><br>
            <select id="lstY" disabled><script>document.write(cnyOpts)</script></select>年
            <select id="lstM" disabled><script>document.write(mOpts)</script></select>月
            <select id="lstD" disabled><script>document.write(dOpts)</script></select>日
        </td>
        <td>
            截止<br><br>
            <select id="etY"><script>document.write(yOpts)</script></select>年
            <select id="etM"><script>document.write(mOpts)</script></select>月
            <select id="etD"><script>document.write(dOpts)</script></select>日<br><br>
            <select id="letY" disabled><script>document.write(cnyOpts)</script></select>年
            <select id="letM" disabled><script>document.write(mOpts)</script></select>月
            <select id="letD" disabled><script>document.write(dOpts)</script></select>日
        </td>
    </tr>
    <tr><td colspan="2">时间差:<span id="sRst"></span></td></tr>
</table>
<script src="/demo/lunar.js"></script>
<script>
    var stY = document.getElementById('stY'), stM = document.getElementById('stM'), stD = document.getElementById('stD'),
        lstY = document.getElementById('lstY'), lstM = document.getElementById('lstM'), lstD = document.getElementById('lstD'),
        etY = document.getElementById('etY'), etM = document.getElementById('etM'), etD = document.getElementById('etD'),
        letY = document.getElementById('letY'), letM = document.getElementById('letM'), letD = document.getElementById('letD');
    var lMons = '正二三四五六七八九十冬腊', lDays1 = '初十廿卅', lDays2 = '一二三四五六七八九十', v,ds;
    //更新农历月份显示
    for (var i = 0; i < 12; i++) {
        v = parseInt(lstM.options[i].value) - 1;
        lstM.options[i].text = letM.options[i].text = lMons.charAt(v) + '月';
    }
    //更新农历月份显示
    for (var i = 0; i < 31; i++) {
        v = parseInt(lstD.options[i].value);
        if (v <= 10) ds = lDays1.charAt(0);
        else ds = lDays1.charAt(parseInt(v.toString().charAt(0)));
        lstD.options[i].text = letD.options[i].text = ds + lDays2.charAt((v - 1) % 10);
    }
    //下拉框更改事件,更新对应的农历新历日期
    stY.onchange = stM.onchange = stD.onchange = lstY.onchange = lstM.onchange = lstD.onchange = 
    etY.onchange = etM.onchange = etD.onchange = letY.onchange = letM.onchange = letD.onchange = function () {
        var sign = this.id.indexOf('l') == 0;//是否农历日期框变化
        var idPrefix = /[a-z]+/.exec(this.id)[0];//获取起始或者截止前缀
        var dateStr = window[idPrefix + 'Y'].value + '/' + window[idPrefix + 'M'].value + '/' + window[idPrefix + 'D'].value;
        var date = new Date(dateStr);//生成日期对象,注意这里,如果日期选择错误,js会自动更正为最新日期,如2015/2/31,会变为2015/3/3
        //////////////
        if ((date.getFullYear() + '/' + (date.getMonth() + 1) + '/' + date.getDate()) != dateStr) {//和源字符不一样说明日期选错,重置select为新生成日期或者自己修改这里alert提示错误return返回也行
            window[idPrefix + 'Y'].value = date.getFullYear();
            window[idPrefix + 'M'].value = date.getMonth() + 1;
            window[idPrefix + 'D'].value = date.getDate();
        }
        /////////////
        var rstDate = LunarCal(window[idPrefix + 'Y'].value + '/' + window[idPrefix + 'M'].value + '/' + window[idPrefix + 'D'].value).lunar;//执行新历转年农历
        if (rstDate) {//转换成功,更新对应的农历或者新历下拉框
            if (sign) idPrefix = idPrefix.replace('l', '');
            else idPrefix = 'l' + idPrefix;
            window[idPrefix + 'Y'].value = rstDate.getFullYear();
            window[idPrefix + 'M'].value = rstDate.getMonth() + 1;
            window[idPrefix + 'D'].value = rstDate.getDate();
        }
        //计算时间差
        var stDate = new Date(stY.value + '/' + stM.value + '/' + stD.value);
        var etDate = new Date(etY.value + '/' + etM.value + '/' + etD.value);
        var s = Math.abs(etDate.getTime() - stDate.getTime()) / 1000;//总秒数
        var d = Math.floor(s / (24 * 3600));//多少天
        document.getElementById('sRst').innerHTML = d + '天' ;
    }
    //设置新历为当前日期
    stY.value = etY.value = y;
    stM.value = etM.value = now.getMonth() + 1;
    stD.value = etD.value = now.getDate();
    //触发onchange事件设置对应农历日期
    stD.onchange();
    etD.onchange();
    function setNow(isInit) { if (!isInit) now.setSeconds(now.getSeconds() + 1);  document.getElementById('tdNow').innerHTML= now.toLocaleString() + '星期' + '日一二三四五六'.charAt(now.getDay()); }
    setNow(true);
    setInterval(function () { setNow() }, 1000);
</script>

 

加支付宝好友偷能量挖...


原创文章,转载请注明出处:javascript新历农历联动示例

评论(0)Web开发网
阅读(310)喜欢(1)JavaScript/Ajax开发技巧