这里有新鲜出炉的 Javascript 教程,程序狗速度看过来!
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
在日常开发的时候经常遇到关于倒计时的需求,下面这篇文章就给主要介绍了 JavaScript 利用 Date 实现倒计时效果的方法示例,文中主要实现了倒计时和倒计时结束抢购的按钮才可以被点击的效果,有需要的朋友可以参考借鉴。
介绍
Date 对象,是操作日期和时间的对象。Date 对象对日期和时间的操作只能通过方法。Date 在 js 中和 Array 类似,都是拥有自己的特殊方法的特殊对象。
创建 Date 对象的语法:
- var myDate = new Date() //Date 对象会自动把当前日期和时间保存为其初始值。
获取倒计时之前,我们不妨先来看怎样获取当前时间吧!!!
- function time(){
- var oDate = new Date();
- var year = oDate.getFullYear();
- var month = oDate.getMonth() + 1 ;
- var dDate = oDate.getDate();
- var day = oDate.getDay();
- var house = oDate.getHours();
- var minu = oDate.getMinutes();
- var sec = oDate.getSeconds();
- switch(day){
- case 1:
- day = '星期一';
- break;
- case 2:
- day = '星期二';
- break;
- case 3:
- day = '星期三';
- break;
- case 4:
- day = '星期四';
- break;
- case 5:
- day = '星期五';
- break;
- case 6:
- day = '星期六';
- break;
- case 0:
- day = '星期日';
- break;
- }
- function double( t ){
- if( t < 10 ){
- t = '0' + t;
- }
- return t;
- }
- document.body.innerhtml = year + '年' + month +'月'+ dDate + '日 ' + day + ' ' + double(house) +':'+ double(minu) +':' + double(sec);
- }
- time();
- setInterval(time,1000);
获取倒计时
1、实现倒计时功能
2、倒计时结束按钮可被点击,之前不可被点击
实例代码:
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml">
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
- <title>
- 无标题文档
- </title>
- </head>
- <body>
- <div id="lastTime">
- <span>
- 0天
- </span>
- <span>
- 00:
- </span>
- <span>
- 00:
- </span>
- <span>
- 00
- </span>
- </div>
- <br />
- <br />
- <style type="text/CSS">
- #btn{ text-decoration: none; display: block; width: 100px; height: 35px;
- background: #ccc; text-align: center; line-height: 35px; color: #666; }
- #btn.btn{ background: red; color: #fff; font-size: 20px; font-weight: bold;
- }
- </style>
- <a href="javascript:;" id="btn">
- 即将开抢!
- </a>
- <script type="text/javascript">
- var oLt = document.getElementById("lastTime");
- var oBtn = document.getElementById("btn");
- time();
- var timer = setInterval(time, 1000);
- function time() {
- var endTime = new Date('2017/01/13 00:00:00'); //结束日期不得在当前日期之前
- var nowTime = new Date();
- var splus = endTime.getTime() - nowTime.getTime();
- //天 时 分 秒
- if (splus <= 1) {
- clearInterval(timer);
- oBtn.className = 'btn';
- oBn.innerHTML = '开始秒杀!';
- oBtn.href = 'http://www.baidu.com';
- return;
- } else {
- oBtn.className = '';
- }
- var day = Math.floor(splus / 1000 / 60 / 60 / 24);
- var hours = Math.floor(splus / 1000 / 60 / 60 % 24);
- var min = Math.floor(splus / 1000 / 60 % 60);
- var sec = Math.floor(splus / 1000 % 60);
- oLt.innerHTML = day + '天 ' + double(hours) + ':' + double(min) + ':' + double(sec);
- function double(n) {
- if (n < 10) {
- n = '0' + n;
- }
- return n;
- }
- }
- </script>
- </body>
- </html>
效果图如下:
总结
以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流,谢谢大家对 phperz 的支持。
来源: http://www.phperz.com/article/17/0609/328601.html