基于javascript实现精确到毫秒的倒计时限时抢购


Posted in Javascript onApril 17, 2016

这篇文章为大家分享了javascript实现倒计时限时抢购,精确到毫秒的倒计时,供大家参考,具体内容如下

一、效果图

下面的图片就是聚划算上面的限时抢的效果

基于javascript实现精确到毫秒的倒计时限时抢购

二、实现限时抢的效果需要用到的知识 :Javascript Date()对象
Date()返回当前的日期和事件
getYear()返回年份 获得年最好用
getFullYear()方法来操作(完整格式如2016)
getMonth()返回月份值(从0开始,+1)
getDay()返回星期几(0-6)
getHours()返回小时数(0-23)
getMinutes()返回分钟数(0-59)
getSeconds()返回秒数
getTime()返回毫秒数
当然,上面的调用方法我们不一定全部用到,也要看你自己的需求,废话不多说,我们直接上代码:
1、HTML页面代码:
<p class="left-time"></p>
我们把倒计时的内容放在class为left-time的<p>标签内.
2、JS脚本:

$(function(){
  function leftTime(){
    var endTime = new Date("2016/5/20,12:00:00");//结束时间
    var curTime = new Date();//当前时间
    var leftTime = parseInt((endTime.getTime() - curTime.getTime())/1000);//获得时间差
    //小时、分、秒需要取模运算
    var d = parseInt(leftTime/(60*60*24));
    var h = parseInt(leftTime/(60*60)%24);
    var m = parseInt(leftTime/60%60);
    var s = parseInt(leftTime%60);
    var ms = parseInt(((endTime.getTime() - curTime.getTime())/100)%10);
    var txt = "剩余:"+d+"天"+h+"小时"+m+"分钟"+s+"."+ms+"秒";
    $(".left-time").text(txt);
    if(leftTime<=0){ $(".left-time").text("团购结束");}
  };
  leftTime();
  var set = setInterval(leftTime,100);
});

上面的js就实现了一个简单的限时抢的小例子,其中parseInt()方法是取整,getTime()把时间转化为毫秒,除了parseInt()方法之外,还可以用Math.floor()向下取整的方法代替.

最后记得不要忘记了给个if()判断时间结束的时候需要显示的内容哦,不然就会出现不必要的小bug哟!

Javascript 相关文章推荐
showModelessDialog()使用详解
Sep 07 Javascript
Dom 是什么的详细说明
Oct 25 Javascript
js实现九宫格图片半透明渐显特效的方法
Feb 16 Javascript
jquery实现简单的轮换出现效果实例
Jul 23 Javascript
js实现向右横向滑出的二级菜单效果
Aug 27 Javascript
jQuery使用$.ajax提交表单完整实例
Dec 11 Javascript
浅谈JS中的三种字符串连接方式及其性能比较
Sep 02 Javascript
vue.js简单配置axios的方法详解
Dec 13 Javascript
详解如何解决vue开发请求数据跨域的问题(基于浏览器的配置解决)
Nov 12 Javascript
详解JavaScript作用域、作用域链和闭包的用法
Sep 03 Javascript
基于vue hash模式微信分享#号的解决
Sep 07 Javascript
基于JavaScript实现简单抽奖功能代码实例
Oct 20 Javascript
第二次聊一聊JS require.js模块化工具的基础知识
Apr 17 #Javascript
第一次接触JS require.js模块化工具
Apr 17 #Javascript
jqGrid 学习笔记整理——进阶篇(一 )
Apr 17 #Javascript
JS组件Bootstrap dropdown组件扩展hover事件
Apr 17 #Javascript
理解javascript对象继承
Apr 17 #Javascript
node.js连接mongoDB数据库 快速搭建自己的web服务
Apr 17 #Javascript
js如何准确获取当前页面url网址信息
Sep 13 #Javascript
You might like
php判断GIF图片是否为动画的方法
2020/09/04 PHP
摘自织梦CMS中的图片处理类
2015/08/08 PHP
ThinkPHP3.2.3实现分页的方法详解
2016/06/03 PHP
Yii列表定义与使用分页方法小结(3种方法)
2016/07/15 PHP
php源码的使用方法讲解
2019/09/26 PHP
Javascript中产生固定结果的函数优化技巧
2013/01/16 Javascript
script不刷新页面的联动前后代码
2013/09/18 Javascript
jQuery 事件的命名空间简单了解
2013/11/22 Javascript
jquery datepicker参数介绍和示例
2014/04/15 Javascript
浏览器检测JS代码(兼容目前各大主流浏览器)
2016/02/21 Javascript
AngularJS 执行流程详细介绍
2016/08/18 Javascript
深入浅析Vue.js中 computed和methods不同机制
2018/03/22 Javascript
解决bootstrap中下拉菜单点击后不关闭的问题
2018/08/10 Javascript
详解使用VUE搭建后台管理系统(vue-cli更新至3.0)
2018/08/22 Javascript
详解JavaScript匿名函数和闭包
2020/07/10 Javascript
vue中选中多个选项并且改变选中的样式的实例代码
2020/09/16 Javascript
elementui实现预览图片组件二次封装
2020/12/29 Javascript
python3简单实现微信爬虫
2015/04/09 Python
状态机的概念和在Python下使用状态机的教程
2015/04/11 Python
python获取一组数据里最大值max函数用法实例
2015/05/26 Python
Python 迭代器与生成器实例详解
2017/05/18 Python
python中使用PIL制作并验证图片验证码
2018/03/15 Python
python实现朴素贝叶斯分类器
2018/03/28 Python
用Python实现将一张图片分成9宫格的示例
2019/07/05 Python
Django中ajax发送post请求 报403错误CSRF验证失败解决方案
2019/08/13 Python
python 正则表达式参数替换实例详解
2020/01/17 Python
Python实现简单猜数字游戏
2021/02/03 Python
HTML5 实现图片上传预处理功能
2020/02/06 HTML / CSS
DC Shoes官网:美国滑板鞋和服饰品牌
2017/09/03 全球购物
西雅图的买手店:Totokaelo
2019/10/19 全球购物
SmartBuyGlasses荷兰:购买太阳镜和眼镜
2020/03/16 全球购物
计算机专业自荐信
2014/05/24 职场文书
学生乘坐校车安全责任书
2015/05/11 职场文书
《乌鸦喝水》教学反思
2016/02/19 职场文书
PHP 技巧 * SVG 保存为图片(分享图生成)
2021/04/02 PHP
python实现腾讯滑块验证码识别
2021/04/27 Python