JavaScript利用Date实现简单的倒计时实例


Posted in Javascript onJanuary 12, 2017

介绍

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>

效果图如下:

JavaScript利用Date实现简单的倒计时实例

JavaScript利用Date实现简单的倒计时实例

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
jQuery显示和隐藏 常用的状态判断方法
Jan 29 Javascript
原生JavaScript实现滚动条效果
Mar 24 Javascript
jQuery替换节点用法示例(使用replaceWith方法)
Sep 08 Javascript
Bootstrap选项卡动态切换效果
Nov 28 Javascript
JavaScript 数组的进化与性能分析
Sep 18 Javascript
使用Bootrap和Vue实现仿百度搜索功能
Oct 26 Javascript
JavaScript登录验证基础教程
Nov 01 Javascript
React Native使用百度Echarts显示图表的示例代码
Nov 07 Javascript
vue2.x+webpack快速搭建前端项目框架详解
Nov 30 Javascript
30分钟快速入门掌握ES6/ES2015的核心内容(下)
Apr 18 Javascript
Angular5集成eventbus的示例代码
Jul 19 Javascript
vue eslint简要配置教程详解
Jul 26 Javascript
React组件的三种写法总结
Jan 12 #Javascript
JQuery异步提交表单与文件上传功能示例
Jan 12 #Javascript
jQuery命名空间与闭包用法示例
Jan 12 #Javascript
jquery实现百叶窗效果
Jan 12 #Javascript
基于JavaScript实现带缩略图的轮播效果
Jan 12 #Javascript
js通过指定下标或指定元素进行删除数组的实例
Jan 12 #Javascript
js仿搜狐视频记录片列表展示效果
May 30 #Javascript
You might like
转生史莱姆:萌王第一次撸串开心到飞起,哥布塔撸串却神似界王神
2018/11/30 日漫
php expects parameter 1 to be resource, array given 错误
2011/03/23 PHP
Laravel 前端资源配置教程
2019/10/18 PHP
javascript 继承实现方法
2009/08/26 Javascript
json 实例详细说明教程
2009/10/31 Javascript
Jquery 扩展方法
2010/05/06 Javascript
jQuery源码中的chunker 正则过滤符分析
2012/07/31 Javascript
javascript全局变量封装模块实现代码
2012/11/28 Javascript
自己写的Javascript计算时间差函数
2013/10/28 Javascript
javascript计算当月剩余天数(天数计算器)示例代码
2014/01/09 Javascript
js、jquery图片动画、动态切换示例代码
2014/06/03 Javascript
轻松实现js图片预览功能
2016/01/18 Javascript
jQuery form插件的使用之处理server返回的JSON, XML,HTML数据
2016/01/26 Javascript
JavaScript修改作用域外变量的方法
2016/03/25 Javascript
谈谈JavaScript中的几种借用方法
2016/08/09 Javascript
jQuery实现文档树效果
2017/02/20 Javascript
原生JS实现图片网格式渐显、渐隐效果
2017/06/05 Javascript
JS与jQuery判断文本框还剩多少字符可以输入的方法
2018/09/01 jQuery
微信小程序--获取用户地理位置名称(无须用户授权)的方法
2019/04/29 Javascript
基于vue+echarts 数据可视化大屏展示的方法示例
2020/03/09 Javascript
javascript实现京东登录显示隐藏密码
2020/08/02 Javascript
压缩包密码破解示例分享(类似典破解)
2014/01/17 Python
Python标准库urllib2的一些使用细节总结
2015/03/16 Python
python使用多线程不断刷新网页的方法
2015/03/31 Python
Python抓取框架 Scrapy的架构
2016/08/12 Python
python3+PyQt5实现文档打印功能
2018/04/24 Python
利用python如何在前程无忧高效投递简历
2019/05/07 Python
Python 数据可视化pyecharts的使用详解
2019/06/26 Python
python super函数使用方法详解
2020/02/14 Python
新奥尔良珠宝:Mignon Faget
2020/11/23 全球购物
垃圾回收的优点和原理
2014/05/16 面试题
销售内勤岗位职责
2014/04/15 职场文书
2014年法院个人工作总结
2014/12/17 职场文书
学雷锋活动简报
2015/07/20 职场文书
解决thinkphp6(tp6)在状态码500下不报错,或者显示错误“Malformed UTF-8 characters”的问题
2021/04/01 PHP
如何使用CocosCreator对象池
2021/04/14 Javascript