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 相关文章推荐
javascript之卸载鼠标事件的代码
May 14 Javascript
javascript 系统文件夹文件操作及参数介绍
Jan 08 Javascript
js 动态修改css文件用到了cssRule
Aug 20 Javascript
jQuery实现切换字体大小的方法
Mar 10 Javascript
Jquery 垂直多级手风琴菜单附源码下载
Nov 17 Javascript
探究Javascript模板引擎mustache.js使用方法
Jan 26 Javascript
第一次接触神奇的前端框架vue.js
Dec 01 Javascript
scroll事件实现监控滚动条并分页显示(zepto.js)
Dec 18 Javascript
将jquery.qqFace.js表情转换成微信的字符码
Dec 01 jQuery
vue实现nav导航栏的方法
Dec 13 Javascript
JavaScript复制内容到剪贴板的两种常用方法
Feb 27 Javascript
angularJS的radio实现单项二选一的使用方法
Feb 28 Javascript
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
php桌面中心(二) 数据库写入
2007/03/11 PHP
php 计划任务 检测用户连接状态
2012/03/29 PHP
Codeigniter中禁止A Database Error Occurred错误提示的方法
2014/06/12 PHP
php猜单词游戏
2015/09/29 PHP
实例讲解PHP页面静态化
2018/02/05 PHP
在视频前插入广告
2006/11/20 Javascript
js动态移动滚动条至底部示例代码
2014/04/24 Javascript
网站接入QQ登录的两种方法
2014/07/22 Javascript
Javascript 中创建自定义对象的方法汇总
2014/12/04 Javascript
详解JavaScript中void语句的使用
2015/06/04 Javascript
jquery Easyui快速开发总结
2015/08/20 Javascript
JS实现超精简的链接列表在固定区域内滚动效果代码
2015/11/04 Javascript
JS提交form表单实例分析
2015/12/10 Javascript
Javascript 调用 ActionScript 的简单方法
2016/09/22 Javascript
详解Vue单元测试case写法
2018/05/24 Javascript
JS如何调用WebAssembly编译出来的.wasm文件
2020/11/05 Javascript
python实现定制交互式命令行的方法
2014/07/03 Python
Python写的创建文件夹自定义函数mkdir()
2014/08/25 Python
python实现用户登陆邮件通知的方法
2015/07/09 Python
Python cookbook(数据结构与算法)通过公共键对字典列表排序算法示例
2018/03/15 Python
python求解数组中两个字符串的最小距离
2018/09/27 Python
基于python进行抽样分布描述及实践详解
2019/09/02 Python
python是怎么被发明的
2020/06/15 Python
移动Web—CSS为Retina屏幕替换更高质量的图片
2012/12/24 HTML / CSS
HTML5中的postMessage API基本使用教程
2016/05/20 HTML / CSS
诗狄娜化妆品官方网站:Stila Cosmetics
2016/12/21 全球购物
Topshop法国官网:英国快速时尚品牌
2018/04/08 全球购物
英国屋顶用品和材料超市:Roofing Supplies UK
2019/08/24 全球购物
德国帽子专家:Hutshopping
2019/11/03 全球购物
医学生个人求职信范文
2013/09/24 职场文书
爱岗敬业演讲稿
2014/05/05 职场文书
单位委托书怎么写
2014/08/02 职场文书
2015年推普周活动方案
2015/05/06 职场文书
《葡萄沟》教学反思
2016/02/23 职场文书
OpenCV实现反阈值二值化
2021/11/17 Java/Android
Elasticsearch Recovery 详细介绍
2022/04/19 Java/Android