万年历的代码

最新推荐文章于 2024-07-26 10:11:20 发布
最新推荐文章于 2024-07-26 10:11:20 发布
阅读量396 收藏 1
点赞数 1
文章标签： 数学建模 html servlet
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yun039018/article/details/130922755
版权

 

html部分：

  <div id="ll">

        <div id="box">

            <div id="aa">

                <div id="bb">星期二</div>

                <div id="cc">9</div>

            </div>

            <div id="dd">

                <div id="ee">2023-05-09</div>

            </div>

            <div id="ff">

                <div id="gg">

                    <div class="a1">三月二十</div>

                    <div class="a2">癸卯年 兔</div>

                    <div class="a3">丁巳月 丁卯日</div>

                </div>

                <div id="hh">

                    <div class="a4">宜:订盟 纳采 祭祀 动土 破土 交易 立券</div>

                    <div class="a5"> 忌：嫁娶 安葬 </div>

                </div>

            </div>

            <div>

                <input type="text" id="bwl">

                <button id="bwl-1">保存</button>

                <button id="bwl-2">清除</button>

            </div>

        </div>

        <select id="yun" οnchange="getRun();jyq();sum()"></select>

        <select id="yun1" οnchange="jyq()"></select>

        <button id="nav6" οnclick="uu()">上一月</button>

        <button id="nav7" οnclick="zz()">下一月</button>

        <button id="fan" οnclick="oo()">返回今天</button>

        <div class="e1">

            <table class="e2">

                <tr>

                    <td class="e3">一</td>

                    <td class="e3">二</td>

                    <td class="e3">三</td>

                    <td class="e3">四</td>

                    <td class="e3">五</td>

                    <td class="e3">六</td>

                    <td class="e3">日</td>

                </tr>

            </table>

            <div id="date">

            </div>

        </div>

    </div>

    </div>

css部分：

* {

    border: 0;

    border-collapse: collapse;

    border-spacing: 0;

    list-style: none;

    margin: 0;

    padding: 0;

}

#ll{

    width: 610px;

    height: 560px;

    background-image: url(16154396841752805.gif);

    background-repeat: no-repeat;

    background-size:610px 559px;

    border: 1px solid rgb(240, 215, 215);

}

#box {

    width: 574px;

    height: 88px;

    color: #fff;

    /* background: linear-gradient(180deg,#0064d9,#11428c); */

    border-radius: 6px 6px 0 0;

    padding: 0px 18px;

    display: flex;

    min-height: 88px;

    align-items: center;

}

#aa {

    width: 64px;

    height: 64px;

    color: #111;

    display: flex;

    flex-direction: column;

    margin-right: 20px;

    border-radius: 8px;

    background:  rgb(248, 240, 240);

    align-items: center;

    justify-content: center;

    position: relative;

}

#bb {

    width: 48px;

    height: 20.8px;

    color: rgb(8, 72, 128);

    font-size: 12px;

    align-items: center;

    padding: 3px 0px 0px 11px;

    /* border: 1px solid yellow; */

}

#cc {

    width: 17.8px;

    height: 25px;

    font-size: 25px;

    /* border: 1px solid rgb(9, 194, 207); */

}

#dd {

    width: 170px;

    height: 32px;

    display: flex;

    flex-direction: column;

    line-height: 20px;

    justify-content: center;

    min-width: 170px;

    /* border: 1px solid rgb(64, 247, 9); */

}

#ee {

    line-height: 32px;

    font-size: 24px;

    font-weight: 600;

}

#ff {

    width: 261px;

    height: 60px;

    border-left: 1px solid rgba(255, 255, 255, .3);

    padding-left: 16px;

    display: flex;

    flex-direction: column;

    justify-content: center;

}

#gg {

    width: 244px;

    height: 20px;

    display: flex;

    line-height: 20px;

    /* border: 1px solid rgb(252, 3, 190); */

}

.a1 {

    width: 86px;

    height: 20px;

    font-size: 14px;

    padding: 0px 4px 0px 0px;

    /* border: 1px solid rgb(2, 226, 32); */

}

.a2 {

    width: 70px;

    height: 20px;

    font-size: 14px;

    /* border: 1px solid rgb(0, 231, 212); */

}

.a3 {

    width: 101px;

    height: 20px;

    font-size: 14px;

    /* border: 1px solid rgb(231, 255, 17); */

}

#hh {

    width: 244px;

    height: 40px;

}

.a4 {

    width: 243px;

    height: 20px;

    font-size: 14px;

    /* border: 1px solid red; */

}

.a5 {

    width: 101px;

    height: 20px;

    font-size: 14px;

    /* border: 1px solid blue; */

}

#date {

    border:  1px solid rgba(236, 236, 236, 0.733);

    width: 400px;

}

#yun {

    border: 1px solid gray;

    width: 80px;

    height: 25px;

    text-align: center;

    border-radius: 10px;

}

#yun1 {

    border: 1px solid gray;

    width: 60px;

    height: 25px;

    text-align: center;

    border-radius: 10px;

}

#nav6{

    border: 1px solid gray;

    width: 60px;

    height: 25px;

    text-align: center;

    border-radius: 10px;

}

#nav7{

    border: 1px solid gray;

    width: 60px;

    height: 25px;

    text-align: center;

    border-radius: 10px;

}

#fan {

    width: 80px;

    height: 22px;

    border-radius: 10px;

    border: 1px solid rgba(221, 221, 230, 0.909);    

    color: rgba(6, 6, 237, 0.909);

    background-color: white;

}

.e1 {

    width: 608px;

    height:445px;

    border: 1px solid rgba(255, 249, 249, 0.863);

}

.e2 {

    width: 608px;

    height: 36px;

    display: flex;

    border: 1px solid rgb(243, 243, 237);

}

.e3 {

    padding: 4px;

    width: 80px;

    height: 35px;

    text-align: center;

    border: 1px solid rgba(209, 209, 209, 0.438);

}

.tdx {

    border: 1px solid transparent;

    height: 77px;

    width: 88px;

    font-size: 20px;

    font-weight: 600;

    text-align: center;

}

.tdx:hover {

    border: 2px solid #b9b4b4;

}

#date{

   width: 606px;

   height: 406px;

   /* border: 1px solid rgb(248, 242, 242); */

}

#bwl{

    width: 80px;

    height: 80px;

    border: 1px solid red;

    margin: 16px 0px 0px 2px;

}

#bwl-1{

    width: 26px;

    height: 25px;

    font-size: 10px;

    position: relative;

    right: -56px;

    top: 10px;

    border: 1px solid blue;

}

#bwl-2{

    width: 26px;

    height: 25px;

    font-size: 10px;

    position: relative;

    right: 10px;

    top: 10px;

    border: 1px solid pink;

}

Java script部分：

  let newday = new Date();   //设定一个全局变量

    let nian = newday.getFullYear(); //返回年份

    let yue = newday.getMonth();     //返回月份

    let day = newday.getDate();

    let months = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31]; //定义数组中月份的天数

    let Day = document.querySelector("#Day");

    let yun = document.querySelector("#yun");

    let yun1 = document.querySelector("#yun1");

    //循环出年、月

    for (var i = 1970; i < 2050; i++) {

        var newyun = document.createElement("option")

        newyun.text = i + "年";

        newyun.value = i;

        yun.add(newyun);

    }

    yun.value = newday.getFullYear();

    for (var i = 1; i <= 12; i++) {

        var newyun1 = document.createElement("option")

        newyun1.text = i + "月";

        newyun1.value = i;

        yun1.add(newyun1);

    }

    yun1.value = newday.getMonth() + 1;

    //判断平年还是闰年   //这个表达式不是判断year是否“是闰年”，而是判断year是否“不是闰年”。

    function getRun() {

        const year = document.getElementById('yun').value;

        if ((year % 4 != 0) || (year % 100 == 0 && year % 400 != 0)) {

            months[1] = 29;

        } else {

            months[1] = 28;

        }

    }

    getRun();

    let shang = document.getElementById('nav6');

    let xia = document.getElementById('nav7');

    let hui = document.getElementById('fan');

    function uu() {

        yun1.value -= 1;

        if (yun1.value == '') {

            yun1.value = 12;

            yun.value -= 1;

        }

        jyq();

    }

    function zz() {

        yun1.value = yun1.value * 1 + 1;

        if (yun1.value == '') {

            yun1.value = 1;

            yun.value = yun.value * 1 + 1;

        }

        jyq();

    }

    function oo() {

        yun.value = nian;

        yun1.value = yue + 1;

        jyq();

    }

    //表格

    function jyq() {

        const year = yun.value;

        const month = yun1.value;

        const monthNum = months[month - 1];//monthNum:月数

        const week = new Date(year, month - 1, 1).getDay();

        const box1 = document.querySelector("#date");

        box1.innerHTML = "";

        var num = 1;

        for (let i = 0; i < 6; i++) {

            let tr = document.createElement("tr");

            for (let j = 0; j < 7; j++) {

                let td = document.createElement('td');

                if (!(j < week - 1 && i == 0)) {

                    if (num <= monthNum) {

                        td.innerHTML = num++;

                        td.classList.add("day", "tdx");

                    }

                }

                tr.appendChild(td);

            }

            box1.appendChild(tr);

        }

        //点击月份中的几号跳转

        let yi = document.querySelectorAll("td.day");

        for (let i = 0; i < yi.length; i++) {

            yi[i].onclick = function () {

                day = this.innerText * 1;

                sum();

                bwl()

            }

        }

    }

    jyq();

    bwl()

    for (let i = 0; i < yun.length; i++) {

        yun[i].onchange = function () {

            nain = this.innerText * 1;

        }

        // for (let j = 0; j < yun1.length; j++) {

        //     yun1[j].onchange = function () {

        //         yue = this.innerText * 1;

        //     }

        // }  

    }

    function sum() {

        let tempdate = calendar.solar2lunar(yun.value, yun1.value, day);

        console.log(tempdate);

        document.querySelector("#bb").innerText = tempdate.ncWeek;

        document.querySelector("#cc").innerText = day;

        document.querySelector("#ee").innerText = `${yun.value}-${yun1.value}-${day}`;

        document.querySelector(".a1").innerText = tempdate.IMonthCn + tempdate.IDayCn;

        document.querySelector(".a2").innerText = tempdate.gzYear + tempdate.Animal;

        document.querySelector(".a3").innerText = tempdate.gzMonth + tempdate.gzDay;

    }

   

    function getCookie() {

        const strCookie = document.cookie;

        const obj = {};

        if (strCookie != "") {

            const cookitem = strCookie.split("; ")

            console.log(cookitem);

            for (let i = 0; i < cookitem.length; i++) {

                const arr = cookitem[i].split("=");

                obj[arr[0]] = arr[1];

            }

        }

        return obj;

    }

    getCookie();

    document.getElementById("bwl-1").onclick = function baocuncookie() {

        const bwl = document.getElementById("bwl");

        const years = document.getElementById("ee");

        if (bwl.value == "") {

            const obj = getCookie();

            if (!(obj[years.innerHTML])) {

                console.log(obj[years.innerHTML]);

                return

            }

        }

        document.cookie = `${years.innerText}=${bwl.value};max-age=${60*10}`;

    }

    document.getElementById("bwl-2").οnclick=function quchucookie(){

        const bwl = document.getElementById("bwl");

        document.cookie=bwl.value="";

       

    }

    function bwl() {

        const bwl = document.getElementById("bwl");

         bwl.value = "";

        const years = document.getElementById("ee");

        const obj = getCookie();

        if (obj[years.innerHTML]) {

            bwl.value = obj[years.innerHTML];

        }

    }

小易幽
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
万年历 html 代码,用javascript 实现的万年历代码。
weixin_32734545的博客
06-09 1553
日历test*{ margin:0px; padding:0px;}#dateBody{width:300px; padding:10px; background:#CCC;}.weekday{ width:40px; height:40px; background:#999; line-height:30px; margin:1px; text-align:center; margin-top:...
简洁PHP万年历 代码
08-07
简洁PHP万年历代码，思路清晰简洁易懂，适合入门
html版的万年历
02-26
非常好用的万年历！有世界各地的节日，方便查询检索。
【CSS练习】万年历 html+css+js
SurepMan的博客
03-19 1268
效果图 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <style> body {
使用 HTML和 CSS 编写 一个 日历界面
最新发布
m0_74972192的博客
07-26 3670
在这篇文章中，我将向大家展示如何使用HTML和CSS创建一个简单的日历界面。这个日历界面可以显示两个连续的月份，并高亮显示今天的日期。
万年历html源码，风格优美，功能强大
07-08
万年历html源码，风格优美，功能强大万年历html源码，风格优美，功能强大
万年历.html
03-05
js版本的万年历,IE运行最好 带农历,带节日,并且一个HTML文件里,运行出来有那个世界地图,JS+html画的地图,没用到HTML5标签, 因为IE8不能运行HTML5,也能跑出地图 喜欢研究JS的人可以看看这个 当然,不是我写的代码
万年历.htm
07-17
精品h5demo, 万年历类型,采用html css jq技术实现的h5demo
万年历源码
java开发指南博客 【转载】
06-04 267
// 万年历.cpp : Defines the entry point for the console application. // 显示1900年以后任何年份的日历，日历以月份顺序排列，每月以星期顺序排列。 //采用一般日历计算方法，先给出一般年份的每月天数，如果是闰年，第二个月天数为29，再计算出制定年份的1月1日是星期几，然后根据这些数据 //计算出全年日历，边计算边显示。 //函数le...
小程序源码 万年历 (代码+截图)
06-19
小程序源码 万年历 (代码+截图)小程序源码 万年历 (代码+截图)小程序源码 万年历 (代码+截图)小程序源码 万年历 (代码+截图)小程序源码 万年历 (代码+截图)小程序源码 万年历 (代码+截图)小程序源码 万年历 (代码+...
万年历_单片机万年历_万年历hex代码_51单片机万年历_
10-03
通过阅读和理解提供的万年历hex代码，可以深入理解单片机的I/O操作、中断处理和时间管理等概念。 51单片机的万年历项目不仅是一个实际的应用，也是学习单片机编程和嵌入式系统设计的好例子。它涵盖了硬件接口、软件...
HTML漂亮单页万年历
02-17
HTML 万年历 网页特效 JAVASCript特效 漂亮万年历
万年历源代码
03-11
该代码是一个用c#编写的万年历程序，该万年历具有事务到期提醒功能，还可显示阳历对应的阴历
Html+jquery实现万年历（超强大的功能）
07-01
Html+jquery实现万年历（超强大的功能） 可手动添加法定节假日，做日历展示最帅了，自定义日历样式
WEB手机端万年历日历代码
11-09
【标题】"WEB手机端万年历日历代码"涉及的核心技术主要是在移动设备上的Web应用开发，特别是针对HTML5的特性，实现一个跨平台、功能完善的万年历日历组件。HTML5作为现代Web开发的标准，提供了许多新功能和API，使得...
RTC—电子万年历实验 基于stm32的电子万年历设计源代码
08-12
在源代码中，你会看到关于RTC初始化、时间读取和设置、中断处理以及与显示设备交互的相关函数。例如，`RTC_Init()`函数用于初始化RTC，`RTC_GetTime()`用于获取当前时间，`RTC_UpdateDisplay()`用于更新显示设备的...
万年历页面的源码
weixin_34268843的博客
08-20 848
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><HTML><HEAD><TITLE>万年历</TITLE><META content="世界时间; 农历; 阳历; 月历; 节日; 国际气功网;国际易经网; 节气; 干支; ×××; w...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值