JS小案例--关于时间--限时购

JS小案例–关于时间–限时购

界面显示和功能实现

功能实现

设置了一个特定的日期和当前时间相差实现折合成天小时分钟秒
使用性：像某宝的商品限时购所以很实用

用到的知识点

为日期对象设置了一个特定的日期

设定形式
var endTime=now Date("2019/06/06 06:06:06")

endTime.getTime() // 实时时间讲了如需有疑问去那看看
Math.floor（） //倒计时讲了如需有疑问去那看看
定时器 // 实时时间讲了如需有疑问去那看看

思路

设置了一个特定的日期和当前时间相差实现折合成天小时分钟秒
使用性：像某宝的商品限时购

代码

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>倒计时实现</title><style type="text/css">*{margin:0;padding:0;}#dv{height:50px;width:400px;border:2px solid salmon;margin:100px auto;text-align: center;line-height:50px;}</style></head><body><div id="dv"></div><script type="text/javascript">var dv=document.getElementById("dv");function change(a){if(a<10)return a="0"+a;return a;}setInterval(function(){var endTime=new Date("2019/06/06 06:06:06");end=endTime.getTime();var nowTime=new Date();var lastTime=endTime.getTime()-nowTime.getTime();  //获得毫秒差数var day=Math.floor(lastTime/(1000*60*60*24));var hour=Math.floor(lastTime/(1000*60*60)%24);var min=Math.floor(lastTime/(1000*60)%60);min=change(min);var second=Math.floor(lastTime/1000%60);second=change(second);var mes="还剩下"+day+"天"+hour+"小时"+min+"分"+second+"秒";dv.innerHTML=mes;},1000);</script></body>
</html>

JS小案例--关于时间--限时购相关推荐

JS小案例总结（JS基础案例）
JS小案例总结 JS小案例总结案例一:JS实现tab选项卡功能案例二:JS实现盒子拖拽功能案例三:JS实现导航条吸顶效果案例四:JS实现图片懒加载结构案例五:JS实现简易弹幕功能案例六:J ...
js小案例：实现选项卡功能
js小案例:实现选项卡功能 html部分代码 <button>1</button><button>2</button><button>3&l ...
JS小案例-文本切换效果
下面是一个文本切换效果的小案例,希望可以可以帮助到有需要的小伙伴 <!DOCTYPE html> <html lang="en"><head>& ...
[突发奇想的JS小案例] 2 重力模拟
文章目录前言一.效果展示二.代码与思路 1.代码 2.思路后续展望前言作者是一个JavaScript新手,偶尔想到一些有趣的小案例分享一.效果展示可以利用鼠标拖动舞台中的方块,松开鼠标 ...
[突发奇想的JS小案例] 1 捉苍蝇
文章目录前言一.效果展示二.代码与思路 1.代码 2.思路后续展望前言作者是一个JavaScript新手,偶尔想到一些有趣的小案例分享一.效果展示这个小方块很像苍蝇,每当靠近就快速飞走 ...
js小案例-九宫格抽奖
目录一.案例介绍二.效果展示三.代码展示四.源码下载地址一.案例介绍案例主要通过设置定时器setInterval和改变className值实现转动,设置延时器setTimeout清除定时器 ...
node.js小案例_留言板
一.前言通过这个案例复习: 1.node.js中模板引擎的使用 2.node.js中的页面跳转和重定向二.主要内容 1.案列演示: 2.案列源码:https://github.com/456123 ...
简单JS小案例:五星好评
CSS内容可自行设计,本案例仅供参考,请自行拷贝代码,拷贝要留言哦! 注意: js文件路径及文件名需要自行更改!! Html部分: <!DOCTYPE html> <html lan ...
案例：倒计时 js小案例
案例:倒计时倒计时展示案例动图展示: 代码展示: <p>案例:倒计时</p> <div><span class="hour">1 ...

JS小案例--关于时间--限时购

JS小案例–关于时间–限时购

界面显示和功能实现

用到的知识点

思路

代码

JS小案例--关于时间--限时购相关推荐

最新文章

热门文章