qq空间html倒计时,用JavaScript做一个秒杀倒计时效果

现在电子商务红红火火的，什么秒杀，限时什么的，JavaScript的倒计时用得很广泛。下面就来做一个倒计时效果，先来看效果。

效果演示

随便写的代码，还有待改进。下面是源代码：

JavaScript Code

//总时间，以分为单位

var time = 100;

//小时

var h = parseInt(time / 60) > 0 ? parseInt(time / 60) : 0;

//分

var m = time % 60;

//秒

var s = 60;

//输出到当前Script的Dom位置

document.write('限时秒杀，还剩余' + h + '小时' + m + '分' + s + '秒');

//开始执行倒计时

var timeInterval = setInterval(function () {

//如果时、分、秒都为0时将停止当前的倒计时

if (h == 0 && m == 0 && s == 0) { clearInterval(timeInterval); return; }

//当秒走到0时，再次为60秒

if (s == 0) { s = 60; }

if (s == 60) {

//每次当秒走到60秒时，分钟减一

m -= 1;

//当分等于0时并且小时还多余1个小时的时候进里面看看

if (m == 0 && h > 0) {

//小时减一

h -= 1;

//分钟自动默认为60分

m = 60;

//秒自动默认为60秒

s = 60;

}

//秒继续跳动，减一

s -= 1;

//小时赋值

document.getElementById('f_hh').innerHTML = h;

//分钟赋值

document.getElementById('f_mm').innerHTML = m;

//秒赋值

document.getElementById('f_ss').innerHTML = s;

}, 1000);

qq空间html倒计时,用JavaScript做一个秒杀倒计时效果相关推荐

Javascript实现商品秒杀倒计时（时间与服务器时间同步）
在一些购物商城经常看到有很多商品做秒杀活动,也就是倒计时,本篇文章给大家介绍Javascript实现商品秒杀倒计时(时间与服务器时间同步),需要的朋友可以了解下现在有很多网站都在做秒杀商品,而这其中 ...
video.min.js php,使用flv.js与video.js做一个视频直播效果
这次给大家带来使用flv.js与video.js做一个视频直播效果,使用flv.js与video.js做出视频直播效果的注意事项有哪些,下面就是实战案例,一起来看一下. 环境配置首先运行livego ...
HTML+JavaScript实现网页秒杀倒计时效果
HTML+JavaScript实现网页秒杀倒计时效果 <!DOCTYPE html> <html><head><meta charset="utf- ...
【web前端特效源码】使用HTML5+CSS3+JavaScript制作一个电风扇动画效果~适合初学者~超简单~ |前端开发|IT软件
b站视频演示效果: [web前端特效源码]使用HTML5+CSS3+JavaScript制作一个电风扇动画效果~适合初学者~超简单~ |前端开发|IT软件效果图: 完整代码: <!DOCTYP ...
android 画笔压痕效果,【自制样机教程】如何用Ps做一个压痕效果的Logo样机
原标题:[自制样机教程]如何用Ps做一个压痕效果的Logo样机上次教你们做的自制小糖袋的贴图样机不知道你们玩耍的咋样今天再给你们介绍一个logo的样机这次的教程主要用到了图层样式来看看怎么 ...
vue项目下拉框内容过长做一个滚动条的效果
vue项目下拉框内容过长做一个滚动条的效果如下图: 关键代码如下:
html js秒杀倒计时,JavaScript仿京东秒杀倒计时代码实例
本篇文章小编给大家分享一下JavaScript仿京东秒杀倒计时代码实例,小编觉得挺不错的,现在分享给大家供大家参考,有需要的小伙伴们可以来看看. 仿京东秒杀倒计时 html代码秒杀倒计时 : : c ...
android listview左右滑动动画效果,Android基于ListView实现类似QQ空间的滚动翻页与滚动加载效果...
本文实例讲述了Android基于ListView实现类似QQ空间的滚动翻页与滚动加载效果.分享给大家供大家参考,具体如下: 1. 滚动加载 listView.setOnScrollListener(n ...
用 JavaScript 写一个新年倒计时
目录前言: 主题: 运行结果: 对应素材: 代码实现思路: 运行代码: 春节的由来: 总结: 前言: 在春节即将到来,钟声即将响起,焰火即将燃起的日子里,本篇文章带着祝福先送去给你.愿你在新的一年里 ...

qq空间html倒计时,用JavaScript做一个秒杀倒计时效果

qq空间html倒计时,用JavaScript做一个秒杀倒计时效果相关推荐

最新文章

热门文章