分针网—每日分享：利用js实现倒计时

最新推荐文章于 2019-01-03 16:03:36 发布

分针网

最新推荐文章于 2019-01-03 16:03:36 发布

阅读量277

点赞数

分类专栏： JS 文章标签： html javascript

JS 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

 
  倒计时 这个名词并不陌生，比如：天猫，京东等一些网上商城都会推出一些限时特价商品，今天我们就一起编写一个属于自己的倒计时； 
 

 
  Ps: 首先做一件事情的时候，不应该盲目的去做，应该首当其冲的去想，脑子里面出现大概的思路。 
 

 
  一、首先我们应该在HTML放一个容器（这里面没有什么可解释的就是为了呈现倒计时）； 
 

< !DOCTYPE html >

<head >

<title >倒计时制作 < /title >

.otime span {

display : inline -block ;

padding : 10px 20px ;

background -color : green ;

opacity : 0.5 ;

margin -left : 10px ;

color : red ;

}

< /style >

< /head >

<body >

<p >距离元旦还剩余 : <span id = "time" class = "otime" > < /span > < /p >

< /div >

< /body >

< /html >

 
  二、编写JS代码 
 

//这个函数是为了适应格式比如：01分01秒;

function p (n ) {

return n < 10 ? '0' + n : n ;

}

//倒计时函数

function newTime ( ) {

//定义当前时间

var startTime = new Date ( ) ;

//定义结束时间

var endTime = new Date ( "2017/1/1 00:00:00" ) ;

//算出中间差并且已毫秒数返回; 除以1000将毫秒数转化成秒数方便运算；

var countDown = (endTime . getTime ( ) - startTime . getTime ( ) ) / 1000 ;

//获取天数 1天 = 24小时 1小时= 60分 1分 = 60秒

var oDay = parseInt (countDown / ( 24 * 60 * 60 ) ) ;

//获取小时数

//特别留意 %24 这是因为需要剔除掉整的天数;

var oHours = parseInt (countDown / ( 60 * 60 ) % 24 ) ;

//获取分钟数

//同理剔除掉分钟数

var oMinutes = parseInt (countDown / 60 % 60 ) ;

//获取秒数

//因为就是秒数所以取得余数即可

var oSeconds = parseInt (countDown % 60 ) ;

//下面就是插入到页面事先准备容器即可;

var html = "<span>" + p (oDay ) + "天</span>" + "<span>" + p (oHours ) + "时</span>" + "<span>" + p (oMinutes ) + "分</span>" + "<span>" + p (oSeconds ) + "秒</span>" ;

document . getElementById ( 'time' ) .innerHTML = html ;

//别忘记当时间为0的，要让其知道结束了;

if (countDown < 0 ) {

document . getElementById ( 'time' ) .innerHTML = '元旦到了' ;

}

< /script >

 
  　这样就实现了一个计时器的效果，如果想要好看一点，只需要加点样式即可； 
 

 
  三、制作当前时间的秒表（也就是第二个容器需要做的） 
 

function oldTime ( ) {

var oDate = new Date ( ) ;

//获取年

var oFullyear = oDate . getFullYear ( ) ;

//获取月份

var oMonth = oDate . getMonth ( ) + 1 ;

//获取日期

var oDta = oDate . getDate ( ) ;

//获取星期

var oDay = oDate . getDay ( ) ;

var week = [ '星期日' , '星期一' , '星期二' , '星期三' , '星期四' , '星期五' , '星期六' ] ;

//获取小时

var oHours = oDate . getHours ( ) ;

//获取分钟

var oMinutes = oDate . getMinutes ( ) ;

//获取秒数

var oSeconds = oDate . getSeconds ( ) ;

//插入到容器中

var b = "<span>" + oFullyear + "年</span>" +

"<span>" + oMonth + "月</span>" +

"<span>" + oDta + "日</span>" +

"<span>" + week [oDay ] + "</span>" +

"<span>" + p (oHours ) + "时</span>" +

"<span>" + p (oMinutes ) + "分</span>" +

"<span>" + p (oSeconds ) + "秒</span>" ;

document . getElementById ( 'time1' ) .innerHTML = b ;

}

< /script >

 
  ---》如果学会了，不妨自己试一下，看看能不能做出更高级的计时哦; 
 

 
  原文链接：http://www.cnblogs.com/my-effort/p/5737850.html 
 

 
  本文转载自分针网 
 

 
  想学习更多IT知识可加群：272292492 
 

分针网

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分针网—每日分享：利用js实现倒计时

倒计时这个名词并不陌生，比如：天猫，京东等一些网上商城都会推出一些限时特价商品，今天我们就一起编写一个属于自己的倒计时；Ps: 首先做一件事情的时候，不应该盲目的去做，应该首当其冲的去想，脑子里面出现大概的思路。一、首先我们应该在HTML放一个容器（这里面没有什么可解释的就是为了呈现倒计时）；!DOCTYPE html>
复制链接

扫一扫