如今JavaScript在前端开发中的地位越来越高，掌握JavaScript的深度往往能决定你职业道路深远，这次通过制作 带着倒计时功能的激励日历的小实例，进一步细致的掌握JavaScript的语法与用法。

 结构剖析：

             

  1. <!DOCTYPE html>
  2. <html>
  3. <meta charset="utf-8" author="DylanZZZ">
  4. <head>
  5.     <title>倒计时日历</title>
  6.     <link rel="stylesheet" type="text/css" href="css/timer.css">
  7. </head>
  8. <body>
  9.     <div class="calendar">
  10.         <p id="fulldate"></p>
  11.         <span id="nowdate"></span>
  12.         <strong id="hllo"></strong>
  13.         <span><font color="#C5FFFD">----- 今日剩余时光 -----</font></span>
  14.         <div id="time"></div>
  15.     </div>
  16.     <script src="js/timer.js"></script>
  17. </body>
  18. </html>

 CSS部分：

  1. .calendar {
  2.  
  3.     width: 300px; height: 360px; margin: 100px auto;
  4.     background-color: #3CC9FC; text-align: center;
  5.     color: #C1DBF5;
  6.     border-radius:  40px ;
  7.     animation: calendar 4s linear infinite; /*这里的动画属性参见CSS3（水纹波动）的文章*/
  8.  
  9. }
  10. /*扩散渐变动画*/
  11. @keyframes calendar {
  12. % { box-shadow:     rgba(, , , ),     rgba(, , , );
  13.  }
  14. % { box-shadow:    20px rgba(, , , .),    10px rgba(, , , );
  15.  }
  16. % { box-shadow:    40px rgba(, , , ),    20px rgba(, , , ); }
  17.  }
  18. .calendar p {
  19.     color: #ffffff;   font:  18px/80px "微软雅黑";
  20. }
  21. #nowdate {
  22.     display: block;  height: 100px;
  23.     width: 100px;  background-color: #DFB779;
  24.     text-align: center;  margin:  auto;
  25.     font:  60px/100px "微软雅黑";  color: #ffffff;
  26. }
  27. .calendar strong {
  28.     margin: 20px auto;  padding: 5px;
  29.     display: block; width: 250px;
  30.     height: 40px; color: #ffffff;
  31.     font:  20px/26px "微软雅黑";
  32.     border-top: dashed 1px #ffffff;   /*在顶部添加虚线*/
  33. }
  34. #time {
  35.     color: #ffffff;
  36.     font:  20px/40px "微软雅黑";
  37. }

JavaScript部分：

 

  • 显示当前时间：

  1. window.onload= function(){
  2.     var fulldate = document.getElementById('fulldate');
  3.     var nowdate =document.getElementById('nowdate');
  4.     var hllo = document.getElementById('hllo');
  5.     var time =document.getElementById('time');
  6.     var fullTime = new Date();
  7.     var year = fullTime.getFullYear();
  8.     var month = fullTime.getMonth();
  9.     var date = fullTime.getDate();
  10.     var dayarry = ["星期日","星期一","星期二","星期三","星期四","星期五","星期六"];
  11.     var hour = fullTime.getHours();
  12.     fulldate.innerHTML = year +"年"+(month+) +"月" +date +"日"+ dayarry[fullTime.getDay()];
  13.     nowdate.innerHTML = date;

主要属性：

       window属性：onload

onload属性是一个事件处理程序, 用于Window、XMLHttpRequest、<img>元素等的加载事件，在资源加载时会触发。

　　window属性：document.getElementById()

　　　　　　getElementById() 方法可返回对拥有指定 ID 的第一个对象的引用。

　　new Date()

　　　　　　返回当前的时间。

　　getFullYear / getMonth / getDate() 方法

　　　　　　getFullYear() 方法可返回一个表示年份/月份/日期的数字。

　　getDay() 方法

　　　　　　可返回一周（0~6）的某一天的数字。结合上面定义的dayarry数组，输出今天为周 几。

　　　innerHTML 属性

　　　　　　改变 HTML 元素的内容

  • 随机励志语句部分

  1. var hlloarry=[
  2.           "人在旅途，难免会遇到荆棘和坎坷，风雨过后，有美丽的彩虹。",
  3.              "要想改变命运，首先改变自己",
  4.              "勤奋是你生命的密码，能译出你一部壮丽的史诗",
  5.              "左右一个人成功的，不是能力，而是选择",
  6.              "没有退路的时候，正是潜力发挥最大的时候",
  7.              "没有天生的信心，只有不断培养的信心",
  8.  
  9.     ];
  10.      hllo.innerHTML=hlloarry[parseInt(hour/)];

主要属性：

　　parseInt() 函数

　　　　parseInt() 函数可解析一个字符串，并返回一个整数。

  • 倒计时部分

  1. var endTime = new Date(year,month,date,,,);
  2.      setInterval(fun,);
  3.      function fun(){
  4.          var nowTime = new Date();
  5.          var s = parseInt((endTime-nowTime)/);/*总共的秒数*/
  6.          var ss = parseInt(s%);
  7.          var m = parseInt((s/)%);
  8.          var h = parseInt((s//)%);
  9.          s<? ss=""+s:s;
  10.          m<? m=""+m:m;
  11.          h<? h=""+h:h;
  12.          time.innerHTML=h+"小时"+m+"分"+ss+"秒";
  13.      }

主要属性：

setInterval(code,millisec） 方法

code：调用函数或计算表达式；millisec：调用 code 之间的时间间隔，以毫秒计， 1000为1秒

倒计时计算方法：

通过endtime 减去 nowtime 得出今天还剩多少秒，再转换为时分秒的格式输出出来。

JavaScript实战实例剖析——（激励倒计时日历）的更多相关文章

  1. HTML5实战与剖析之媒体元素(6、视频实例)

    HTML5中的视频标签和及其模仿视频播放器的效果在一些手机端应用比較多.由于手机端基本上废除了flash的独断.让HTML5当家做主人,所以对视频支持的比較好. 所以今天专门为大家奉上HTML5视频标 ...

  2. JavaScript实战（带收放动画效果的导航菜单）

    虽然有很多插件可用,但为了共同提高,我做了一系列JavaScript实战系列的实例,分享给大家,前辈们若有好的建议,请务必指出,免得误人子弟啊! ( 原创文章,转摘请注明:苏福:http://www. ...

  3. HTML5实战与剖析之触摸事件(touchstart、touchmove和touchend)(转)

    HTML5中新添加了很多事件,但是由于他们的兼容问题不是很理想,应用实战性不是太强,所以在这里基本省略,咱们只分享应用广泛兼容不错的事件,日后随着兼容情况提升以后再陆续添加分享.今天为大家介绍的事件主 ...

  4. HTML5实战与剖析之原生拖拽(四可拖动dragable属性和其他成员)

    可拖动dragable属性 之前我们已经为大家介绍过几篇有关HTML5中原生拖拽的相关知识了.今天为大家介绍HTML5拖拽中的其他一些小东东,闲话不多说赶快一起看看吧. 在默认情况下,链接.文本和图像 ...

  5. Selenium2学习-035-WebUI自动化实战实例-033-页面快照截图应用之三 -- 区域截图（专业版）

    之前有写过两篇博文讲述了 WebUI 自动化测试脚本中常用的截图方法,敬请参阅如下所示链接: 浏览器显示区域截图 浏览器指定区域截图 那么当需要截取的区域不在浏览器显示窗口范围之内时,之前的方法显然无 ...

  6. Selenium2学习-027-WebUI自动化实战实例-025-JavaScript 在 Selenium 自动化中的应用实例之三（页面滚屏，模拟鼠标拖动滚动条）

    日常的 Web UI 自动化测试过程中,get 或 navigate 到指定的页面后,若想截图的元素或者指定区域范围不在浏览器的显示区域内,则通过截屏则无法获取相应的信息,反而浪费了无畏的图片服务器资 ...

  7. Selenium2学习-014-WebUI自动化实战实例-012-Selenium 操作下拉列表实例-div+{js|jquery}

    之前已经讲过了 Selenium 操作 Select 实现的下拉列表:Selenium2学习-010-WebUI自动化实战实例-008-Selenium 操作下拉列表实例-Select,但是在实际的日 ...

  8. Selenium2学习-007-WebUI自动化实战实例-005-解决 Firefox 版本不兼容：org.openqa.selenium.WebDriverException: Failed to connect to binary FirefoxBinary

    此文主要讲述 Java 运行 Selenium 脚本时,因 Friefox 浏览器版本与 selenium-server-standalone-x.xx.x.jar 不兼容引起的 org.openqa ...

  9. (转)HTML5实战与剖析之触摸事件(touchstart、touchmove和touchend)

    HTML5中新添加了很多事件,但是由于他们的兼容问题不是很理想,应用实战性不是太强,所以在这里基本省略,咱们只分享应用广泛兼容不错的事件,日后随着兼容情况提升以后再陆续添加分享.今天为大家介绍的事件主 ...

随机推荐

  1. 如何让多个不同类型的后端网站用一个nginx进行反向代理实际场景分析

    前段时间公司根据要求需要将聚石塔上服务器从杭州整体迁移到张家口,刚好趁这次机会将这些乱七八糟的服务器做一次梳理和整合,断断续续一个月迁移完成 大概优化掉了1/3的机器,完成之后遇到了一些问题,比如曾今 ...

  2. 深度学习框架Tensorflow应用（Google工程师）

    首先在这里给大家分享Google工程师亲授 Tensorflow2.0-入门到进阶教程 有需要的小伙伴可点击进入扣群下载,群内不定期的会分享资料教程,点击直达链接:https://jq.qq.com/ ...

  3. WebSocket原理及技术简介

    摘要: WebSocket用于在Web浏览器和服务器之间进行任意的双向数据传输的一种技术.WebSocket协议基于TCP协议实现,包含初始的握手过程,以及后续的多次数据帧双向传输过程.其目的是在We ...

  4. 前后端对称加密（AES）

    后端实现(JAVA) package com.vcgeek.hephaestus.demo; import org.apache.commons.codec.binary.Base64; import ...

  5. Centos 7修改hostname浅析

    之前写过一篇博客"深入理解Linux修改hostname",里面总结了RHEL 5.7下面如何修改hostname,当然这篇博客的内容其实也适用于CentOS 6,但是自CentO ...

  6. 在VMware下的Linux中的RAID5校验位算法下的磁盘管理

    前景:1988年由加利福尼亚大学伯克利分校发表的文章首次提到并定义了RAID,当今CPU性能每年可提升30%-50%但硬盘仅提升7%,渐渐的已经成为计算机整体性能的瓶颈,并且为了避免硬盘的突然损坏导致 ...

  7. 一道国外前端面试题引发的Coding...

    刚刚看到CSDN微信公众号一篇文章,关于国外程序员面试前端遇到的一道测试题,有点意思,遂写了下代码,并记录一下~ 题目是这样的: ['Tokyo', 'London', 'Rome', 'Donlon ...

  8. Java零基础入门之基础语法

    一.Java标识符 什么是标识符? 标识符是用来标识类名.对象名.变量名.方法名.数组名.自定义数据类型的有效字符序列. 合法的标识符 ①:由字母.数字.下划线"_".美元符号&q ...

  9. 来探讨一下最近面试问的ThreadLocal问题

    中高级阶段开发者出去面试,应该躲不开ThreadLocal相关问题,本文就常见问题做出一些解答,欢迎留言探讨. ThreadLocal为java并发提供了一个新的思路, 它用来存储Thread的局部变 ...

  10. PHP Notice: Undefined index:解决方法

    PHP Notice:  Undefined index:解决方法 PHP Notice: Undefined index: 解决方法 <pre> if (empty(swoole_get ...