H5实现win10日历效果

随着win10的免费升级，我想很多小伙伴们都把win7升级成了win10吧。虽然win10还有很多缺陷，但是在美观上不得不提，提高很大。下面我们来简单做一下，win10右下角的日历模块。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>ul{padding: 0;list-style: none;font-size: 20px;}#date-box{background: #333;color: white;font-family: 微软雅黑;width: 500px;}#week-list:after,#date-list:after{display: table;content: '';clear: both;}#week-list li,#date-list li{width: 14.2857%;text-align: center;float: left;padding: 10px 0;}#prev,#next{cursor: pointer}#time{font-size: 40px;font-weight: normal;margin: 50px 0 20px 25px;}.but{margin-left: 400px;font-size: 40px;}#year{font-size: 20px;color: #3F74F4;margin: -10px 0 0 25px;}#now{font-size: 20px;color: white;margin: 10px 0 0 25px;}</style>
</head>
<body>
<div id="date-box"><div id="time"></div><div id="year"></div><div id="now"></div><div class="but"><span id="prev">&lt;</span><span id="next">&gt;</span></div><ul id="week-list"><li>一</li><li>二</li><li>三</li><li>四</li><li>五</li><li>六</li><li>日</li></ul><ul id="date-list"></ul>
</div><script>//将单位数前加0function todu(n) {if(n<10){return '0'+n;}else{return ''+n;}}//自动获取当前时间
//    var oDate=new Date();setInterval(function () {var oDate=new Date();document.getElementById('time').innerHTML=todu(oDate.getHours())+':'+todu(oDate.getMinutes())+':'+todu(oDate.getSeconds());document.getElementById('year').innerHTML=todu(oDate.getFullYear())+'年'+todu(oDate.getMonth()+1)+'月'+todu(oDate.getDate())+'日,星期'+oDate.getDay();},1000);//显示当前时间var date=new Date();showdate(date);//封装获取日期列表的函数function showdate(date) {//当前年月document.getElementById('now').innerHTML=todu(date.getFullYear())+'年'+todu(date.getMonth()+1)+'月';//当前是周几date.setDate(1);var week=date.getDay();week=week==0?7:week;//当前月的最大天数date.setMonth(date.getMonth()+1);date.setDate(0);var maxdate=date.getDate();
//        date.setDate(1);//获取日期列表内容//当前月第一天是周几，并在前面空上相应的livar html='';for(var i=1;i<week;i++){html+='<li></li>';}//输出每天的lifor(var j=1;j<=maxdate;j++){html+='<li>'+j+'</li>'}//讲内容写到ul中document.getElementById('date-list').innerHTML=html;}//前一个月document.getElementById('prev').onclick=function () {date.setDate(0);
//        var nowMonth=date.getMonth();showdate(date);}//后一个月document.getElementById('next').onclick=function () {//        date.setMonth(date.getMonth() + 1);date.setDate(32);showdate(date);}</script>
</body>
</html>

效果图如下：

ps:灵活运用系统时间是关键！

H5实现win10日历效果相关推荐

win10日历中节日文字颜色看不清的解法
打开win10日历如下,其中节日的文字颜色和背景太相近而看不清.也不知鼎鼎大名的windows为什么会做出如此体验不好的产品. 经查找,网上已有很多小伙伴们总结出来的方法,但部分有效的方法有的改不到期 ...
js html css淘宝足迹日历效果,js实现简单的日历显示效果函数示例
本文实例讲述了js实现简单的日历显示效果函数.分享给大家供大家参考,具体如下: 用一个函数简单的实现一个月份的日历,效果如下: 这个日历效果有高亮显示,我实现的思维比较简单. 我把上面的日历效果用表格 ...
asp前端日历_asp显示日历效果
asp显示日历效果 td { font-family: "宋体"; font-size:9pt} '先判断是否指定了一个年份和月份,没有则根据当前的年和月份显示 If Reques ...
android 日历翻页动画,Android开源库合集：轻松实现Android动态，炫目：日历效果...
前言: 了解过那种动态,炫目的日历效果吗?你知道是怎么操作的嘛?是否想过,用UI就可以实现,对,也许你说的对,不过UI只是都是动态效果的一部分.那么今天用Annroid开源库,来告诉你android ...
js html css淘宝足迹日历效果,JavaScript实现简单日历效果
本文实例为大家分享了JavaScript实现简单日历效果的具体代码,供大家参考,具体内容如下实现效果: 根据所选择的年月,列出当月对应是周几,效果图如下: 实现思路: 1.使用select标签保存年 ...
华为手机日历同步win10日历
华为手机日历同步win10日历在网上找了很久资料,终于搞定如何将邮箱与华为日历进行同步了. 很多小伙伴问为什么要同步日历,同步日历有什么好处呢? 首先第一个: **1. 同步日历可以将win10日历 ...
win10日历同步到华为手机outlook提示账号错误的原因
win10日历同步到华为手机outlook提示账号错误的原因账号一定要为xxxx@Outlook.com(xxx为你自己的账号)
要从哪些方面提升H5游戏的营销效果
要从哪些方面提升H5游戏的营销效果随着微信营销的发展,我们经常可以在朋友圈中看到好友转发H5游戏互动,而H5游戏营销是新兴的营销模式,而且趣味性高,具有创意性,所以就会有用户愿意自发地进行转发分享形 ...
前端响应式电子日历效果的实现效果
效果参考:响应式电子日历效果的实现 <!DOCTYPE html> <html lang="zh-CN"> <head><meta cha ...

H5实现win10日历效果

H5实现win10日历效果相关推荐

最新文章

热门文章