Javascript特效：简单日历

19年，我仿佛在迷失了很久之后回到归途。
马上就要2020了，写一篇简单的日历。
时间总是过得飞快，真希望自己赶紧赚钱，新的一年，更爱自己的爱的人，做更好的自己。

知识点

引入我的工具包
运用JavaScript内置对象 Date

运行效果

代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>*{margin: 0;padding: 0;}#box{width: 250px;height: 300px;background-color: orangered;margin: 100px auto;padding: 30px;}#box_top{font-size: 22px;color: #fff;margin-bottom: 40px;display: flex;justify-content: space-around;}#box_bottom{width: 90%;height: 70%;margin: 0 auto;background-color: orange;font-size: 50px;color:#fff;display: flex;justify-content: center;align-items: center;}</style>
</head>
<body><div id="box"><div id="box_top"><span id="year"></span><span>年</span><span id="month"></span><span>月</span><span id="day"></span><span>日</span><span id="week"></span></div><div id="box_bottom"><span id="hour"></span><span>:</span><span id="minute"></span><span>:</span><span id="second"></span></div></div><script src="../../MyTools/MyTools.js"></script><script>window.addEventListener('load',function (ev) {setInterval(function () {myTool.$('year').innerText = myTool.getTime().year;myTool.$('month').innerText = myTool.getTime().month < 10 ? '0' + myTool.getTime().month : myTool.getTime().month;myTool.$('day').innerText = myTool.getTime().day < 10 ? '0' + myTool.getTime().day : myTool.getTime().day;myTool.$('week').innerText = myTool.getTime().week ;myTool.$('hour').innerText = myTool.getTime().hour < 10 ? '0' + myTool.getTime().hour : myTool.getTime().hour;myTool.$('minute').innerText = myTool.getTime().minute < 10 ? '0' + myTool.getTime().minute : myTool.getTime().minute;myTool.$('second').innerText = myTool.getTime().second < 10 ? '0' + myTool.getTime().second : myTool.getTime().second;},1000);},false);</script>
</body>
</html>

Javascript特效：简单日历相关推荐

js html css淘宝足迹日历效果,JavaScript实现简单日历效果
本文实例为大家分享了JavaScript实现简单日历效果的具体代码,供大家参考,具体内容如下实现效果: 根据所选择的年月,列出当月对应是周几,效果图如下: 实现思路: 1.使用select标签保存年 ...
日历html代码脚本之家,基于javascript编写简单日历
一.表格行数问题既然要显示日期表格的话,首先得知道这个表格有多少行多少列,列数是已经确定的,从星期天(日历上第1列是星期天)到星期六一共7列.要解决行数问题之前,还得先知道这个月的第1天是星期几,因 ...
JavaScript实现简单日历
页面代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w ...
HTML+CSS+JavaScript实现简单的日历效果
初学前端花了一下午写了一个简单的日历效果: 可以选择按月或者按年切换,当前日期会有绿色的背景显示, 所有的日期都会正确的对应星期几. 所有代码: <!DOCTYPE html&g ...
JavaScript blog式日历控件javascript
javascript blog式日历控件近来要做一个记事本系统,想找一个合适的日历控件,但网上的都是那种日历选择控件. 于是到qq的记事本系统找了一个,但里面的算法有点落后,所以用了它的样式自己写了 ...
11种控制内容展示的JavaScript特效和技巧
交付信息结构是一个交互式用户界面所需要完成的首要任务.更直观的布局结构设计,能使用户更好的理解内容. 不管你想要介绍的是什么样的内容,你都可以以更加互动和更加适应的方式去呈现现它.本文里面,我们为你收 ...
个人HTML期末大作业~ 个人网页(HTML+CSS)6页面带下拉特效~简单带表格带设计说明 ~学生网页设计作业源码
HTML期末大作业~ 个人网页6页面带下拉特效~简单带表格带设计说明 ~学生网页设计作业源码作品介绍下面介绍一下我的个人小网站吧,我的网站背景稍微单调一点白色,主要个人比较喜欢白色了,布局上面使用 ...
Javascript特效之删除内容效果
Javascript特效之删除内容效果今天分享一个网页经常会用到的删除内容效果即想列表一样的每列数据实现单列删除效果. 效果图: 点击右上角的X后该内容会慢慢删除. 实现思路:实际上很简单,就是在该 ...
个人HTML期末大作业~ 个人网页(HTML+CSS)6页面带下拉特效~简单带表格带设计说明 ~学生网页设计作业源码...
HTML期末大作业~ 个人网页6页面带下拉特效~简单带表格带设计说明 ~学生网页设计作业源码作品介绍下面介绍一下我的个人小网站吧,我的网站背景稍微单调一点白色,主要个人比较喜欢白色了,布局上面使用 ...
Javascript特效之监听键盘按键
Javascript特效之监听键盘按键我们都知道很多软件都有快捷键可以使用,今天我们来看看怎么实现网页的快捷键功能. 效果图: 当我们按下ctrl和enter时,网页会弹出对话框. 实现思路: 其实 ...

Javascript特效：简单日历

知识点

运行效果

代码

Javascript特效：简单日历相关推荐

最新文章

热门文章