使用html+css+js实现日历与定时器,看看今天的日期和今天剩余的时间。
效果图:

哎,今天就又这么过去了,过的可真快 。
代码如下,复制即可使用:
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>Title</title>
- <style>
- .calendar {
- width: 300px;
- height: 360px;
- margin: 100px auto;
- background-color: #59ACFF;
- text-align: center;
- color: #C1DBF5;
- }
- .calendar p {
- color: #ffffff;
- font: 400 18px/80px "微软雅黑";
- }
- #nowdate {
- display: block;
- height: 100px;
- width: 100px;
- background-color: #FF9600;
- text-align: center;
- margin: 0 auto;
- font: 700 60px/100px "微软雅黑";
- color: #ffffff;
- }
- .calendar strong {
- margin: 20px auto;
- padding: 5px;
- display: block;
- width: 250px;
- height: 40px;
- color: #ffffff;
- font: 500 20px/26px "微软雅黑";
- border-top: dashed 1px #ffffff;
- }
- #time {
- color: #ffffff;
- font: 500 20px/40px "微软雅黑";
- }
- </style>
- <script>
- window.onload = function () {
-
- var fulldate = document.getElementById("fulldate");
-
- var nowdate = document.getElementById("nowdate");
-
- var time = document.getElementById("time");
-
- var hllo = document.getElementById("hllo");
-
- var fullTime = new Date();
- var year = fullTime.getFullYear();
- var month = fullTime.getMonth();
- var date = fullTime.getDate();
- var hours = fullTime.getHours();
- var dayArr = [ "星期日","星期一","星期二","星期三","星期四","星期五","星期六"];
-
- fulldate.innerHTML = year+" 年 "+(month+1)+" 月 "+date+" 日 "+dayArr[fullTime.getDay()];
-
- nowdate.innerHTML = date;
-
- var hlloarr = [
- "只有登上山顶,才能看到那边的风光",
- "山路曲折盘旋,但毕竟朝着顶峰延伸",
- "勤奋是你生命的密码,能译出你一部壮丽的史诗",
- "左右一个人成功的,不是能力,而是选择",
- "我们这个世界,从不会给一个伤心的落伍者颁发奖牌",
- "没有天生的信心,只有不断培养的信心",
- "每一发奋努力的背后,必有加倍的赏赐",
- "不要等待机会,而要创造机会",
- "含泪播种的人一定能含笑收获",
- "让信念坚持下去,梦想就会实现",
- "不要给自己的失败找借口",
- "要学会新东西,要不断进步,就必须放低自己的姿势"
- ];
-
- hllo.innerHTML = hlloarr[parseInt(hours/2)];
- var endTime = new Date(year,month,date,23,59,59);
- setInterval(fun,1000);
- function fun() {
- var newTime = new Date();
- var ms = parseInt((endTime - newTime) / 1000);
- var s = parseInt(ms % 60);
- var m = parseInt((ms / 60) % 60);
- var h = parseInt((ms / 3600) % 24);
-
- s<10? s="0"+s:s;
- m<10? m="0"+m:m;
- h<10? h="0"+h:h;
-
- time.innerHTML = h +" 时 "+m+" 分 "+s+" 秒 ";
-
- if(s == 0 ){
- hllo.innerHTML = hlloarr[parseInt(m%12)];
- }
- }
- }
- </script>
- </head>
- <body>
- <div class="calendar">
- <p id="fulldate"></p>
- <span id="nowdate"></span>
- <strong id="hllo"></strong>
- <span>----- 今天的余额 -----</span>
- <div id="time"></div>
- </div>
- </body>
- </html>
温馨提示:本文最后更新于2019年10月25日,已超过 2 年没有更新,如果文章内容或图片资源失效,请留言反馈,模板下载吧会及时处理,谢谢!