js实现日历与定时器


Posted in Javascript onFebruary 22, 2017

简单的日历,会根据系统日期自动调整对应的日期,每60秒切换一次名言。只要有想法,做出来还是可以与众不同的。

效果图:

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 () {
   //当前年月日ID
   var fulldate = document.getElementById("fulldate");
   //当前日 ID
   var nowdate = document.getElementById("nowdate");
   //倒计时ID
   var time = document.getElementById("time");
   //问候语ID
   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);//小时
    //var d = parseInt((ms / 3600) / 24);//天
    s<10? s="0"+s:s;
    m<10? m="0"+m:m;
    h<10? h="0"+h:h;
    //d<10? d="0"+d:d;
    time.innerHTML = h +" 时 "+m+" 分 "+s+" 秒 ";
    //每60秒切换一次名言
    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>

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
收集的一些Array及String原型对象的扩展实现代码
Dec 05 Javascript
javascript 基础篇3 类,回调函数,内置对象,事件处理
Mar 14 Javascript
关于javascript中的typeof和instanceof介绍
Dec 04 Javascript
javascript数组操作总结和属性、方法介绍
Apr 05 Javascript
jQuery实现单击按钮遮罩弹出对话框(仿天猫的删除对话框)
Apr 10 Javascript
运行Node.js的IIS扩展iisnode安装配置笔记
Mar 02 Javascript
jquery 无限极下拉菜单的简单实例(精简浓缩版)
May 31 Javascript
jQuery文本框得到与失去焦点动态改变样式效果
Sep 08 Javascript
完美解决jQuery的hover事件在IE中不停闪动的问题
Feb 10 Javascript
解决前后端分离 vue+springboot 跨域 session+cookie失效问题
May 13 Javascript
Vue组件生命周期运行原理解析
Nov 25 Vue.js
Vue-router中hash模式与history模式的区别详解
Dec 15 Vue.js
JS验证字符串功能
Feb 22 #Javascript
Bootstrap3 模态框使用实例
Feb 22 #Javascript
Bootstrap3下拉菜单的实现
Feb 22 #Javascript
微信小程序开发之相册选择和拍照详解及实例代码
Feb 22 #Javascript
js仿微博动态栏功能
Feb 22 #Javascript
Vue.js:使用Vue-Router 2实现路由功能介绍
Feb 22 #Javascript
svg动画之动态描边效果
Feb 22 #Javascript
You might like
AJAX for PHP简单表数据查询实例
2007/01/02 PHP
PHP CKEditor 上传图片实现代码
2009/11/06 PHP
PHP数组及条件,循环语句学习
2012/11/11 PHP
深入解析PHP 5.3.x 的strtotime() 时区设定 警告信息修复
2013/08/05 PHP
laravel中数据显示方法(默认值和下拉option默认选中)
2019/10/11 PHP
JS实现打开本地文件或文件夹
2021/03/09 Javascript
jquery 插件学习(五)
2012/08/06 Javascript
用js实现控件的隐藏及style.visibility的使用
2013/06/14 Javascript
js获取指定日期前后的日期代码
2013/08/20 Javascript
javascript制作loading动画效果 loading效果
2014/01/14 Javascript
javascript使用window.open提示“已经计划系统关机”的原因
2014/08/15 Javascript
jQuery实现异步获取json数据的2种方式
2014/08/29 Javascript
Javascript保存网页为图片借助于html2canvas库实现
2014/09/05 Javascript
jquery+正则实现统一的表单验证
2015/09/20 Javascript
Google 地图类型详解及示例代码
2016/08/06 Javascript
基于Node.js模板引擎教程-jade速学与实战1
2017/09/17 Javascript
JavaScript设计模式之缓存代理模式原理与简单用法示例
2018/08/07 Javascript
JavaScript引用类型Date常见用法实例分析
2018/08/08 Javascript
JavaScript实现随机点名器实例详解
2019/05/07 Javascript
JavaScript的Proxy可以做哪些有意思的事儿
2019/06/15 Javascript
如何使用JavaScript实现无缝滚动自动播放轮播图效果
2020/08/20 Javascript
[46:25]DOTA2上海特级锦标赛主赛事日 - 4 败者组第五轮 MVP.Phx VS EG第二局
2016/03/05 DOTA
python将视频转换为全字符视频
2019/04/26 Python
Python 中 -m 的典型用法、原理解析与发展演变
2019/11/11 Python
Tensorflow tf.dynamic_partition矩阵拆分示例(Python3)
2020/02/07 Python
使用tensorflow实现矩阵分解方式
2020/02/07 Python
解决jupyter notebook显示不全出现框框或者乱码问题
2020/04/09 Python
django 实现后台从富文本提取纯文本
2020/07/02 Python
美国知名的女性服饰品牌:LOFT(洛芙特)
2016/08/05 全球购物
电话销售经理岗位职责
2013/12/07 职场文书
应届电子商务毕业自荐书范文
2014/02/11 职场文书
单位工作证明
2014/10/07 职场文书
加强作风建设演讲稿
2014/10/24 职场文书
2014离婚协议书范文(3篇)
2014/11/29 职场文书
冰雪公主观后感
2015/06/16 职场文书
2016个人廉洁自律承诺书
2016/03/25 职场文书