秒杀倒计时功能实现

 1 window.onload = function(){
 2     search();
 3     secondKill();
 4 };
 5 /*头部搜索*/
 6 var search = function(){
 7     /*搜索框对象*/
 8     var search = document.getElementsByClassName(‘jd_header_box‘)[0];
 9     /*banner对象*/
10     var banner = document.getElementsByClassName(‘jd_banner‘)[0];
11     /*高度*/
12     var height = banner.offsetHeight;
13
14     window.onscroll = function(){
15         var top = document.body.scrollTop;
16         /*当滚动高度大于banner的高度时候颜色不变*/
17         if(top > height){
18             search.style.background  = "rgba(201,21,35,0.85)";
19         }else{
20             var op = top/height * 0.85;
21             search.style.background  = "rgba(201,21,35,"+op+")";
22         }
23     };
24 };
25 /*秒杀倒计时*/
26 var secondKill = function(){
27     /*复盒子*/
28     var parentTime = document.getElementsByClassName(‘sk_time‘)[0];
29     /*span时间*/
30     var timeList = parentTime.getElementsByClassName(‘num‘);
31
32     console.log(timeList.length);
33
34     var times = 7   * 60 * 60;
35     var timer;
36     timer = setInterval(function(){
37         times  -- ;
38
39         var h = Math.floor(times/(60*60));
40         var m = Math.floor(times/60%60);
41         var s = times%60;
42
43         console.log(h+‘-‘+m+"-"+s);
44
45         timeList[0].innerHTML = h>10?Math.floor(h/10):0;
46         timeList[1].innerHTML = h%10;
47
48         timeList[2].innerHTML = m>10?Math.floor(m/10):0;
49         timeList[3].innerHTML = m%10;
50
51         timeList[4].innerHTML = s>10?Math.floor(s/10):0;
52         timeList[5].innerHTML = s%10;
53         if(times <= 0){
54            clearInterval(timer);
55         }
56     },1000);
57
58 }

原文地址:https://www.cnblogs.com/yangguoe/p/8495359.html

时间: 2024-08-30 07:11:42

秒杀倒计时功能实现的相关文章

自己封装的一个简单的倒计时功能

因为平常工作中很常用到该功能,所以就利用这次国庆假期,重新梳理与对原有代码进行改善,再集成一个常用的功能,最终封装出这个“简单倒计时”功能. 该倒计时方法具有以下该功能: 1. 根据指定日期与当前的电脑时间进行匹配 2. 通过指定一个数组参数,来设置在每一天内不同的时间段进行倒计时. * 该方法还未通过实际工作的检测,稳定性未知(如果实际工作通过,会删除这段话) 1 function countDown(date,target,filter){ 2 3 var setTime = new Dat

Android倒计时功能的实现(CountDownTimer)

以前编程的时候,遇到倒计时的功能时,经常自己去写,但其实Android已经帮封装好了一个倒计时类CountDownTimer,其实是将后台线程的创建和Handler队列封装成为了一个方便的类调用. 说明: CountDownTimer timer = new CountDownTimer(30000, 1000)中,第一个参数表示总时间,第二个参数表示间隔时间. 意思就是每隔一秒会回调一次方法onTick,然后30秒之后会回调onFinish方法. package com.androidcoun

Android基础之——CountDownTimer类,轻松实现倒计时功能

在发现这个类之前,一直是用的handler,子线程发消息,UI线程进行倒计时的显示工作.前几天在做一个倒计时显示的时候发现了这个类,用起来很方便 翻看了下源码,内部已经帮我们实现了handler的子线程操作 CountDownTimer这个类用起来很简单,两个参数,几句代码搞定,如下: CountDownTimer(long millisInFuture, long countDownInterval) 构造函数有两个参数,第一个millisInFuture是指要倒计时的总时间,单位是long

redis使用watch完成秒杀抢购功能(转)

redis使用watch完成秒杀抢购功能: 使用redis中两个key完成秒杀抢购功能,mywatchkey用于存储抢购数量和mywatchlist用户存储抢购列表. 它的优点如下: 1. 首先选用内存数据库来抢购速度极快. 2. 速度快并发自然没不是问题. 3. 使用悲观锁,会迅速增加系统资源. 4. 比队列强的多,队列会使你的内存数据库资源瞬间爆棚. 5. 使用乐观锁,达到综合需求. 我觉得以下代码肯定是你想要的. [php] view plain copy print? <?php hea

Android开发:验证码倒计时功能实现

前言 现在好多个APP里面都有验证码倒计时按钮,实现方式大概有下面几种: 1.使用线程和Handler的方式,定时刷新倒计时数字,这种方式容易导致内存泄露,所以一般都使用弱引用,控制数字的刷新. 2.自定义倒计时按钮 3.使用Android提供的CountDownTimer结合TextView实现倒计时功能 这篇主要就是说下用第三种方式实现,简单好用 效果图 实现 以下是核心代码: /** * Created by hfs on 2017/5/9. */ public class TimeCou

jquery组件团购倒计时功能(转)

? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 <!doctype html> <html> <head>     <meta charset="utf-8">     <title&g

App启动页倒计时功能

转载请注明出处:http://www.cnblogs.com/cnwutianhao/p/6753418.html 示例代码采用 RxJava + RxLifecycle + Data-Binding 模式编写 示例图: 话不多说,实现方式如下: 1.导入依赖库 ① RxJava: Reactive Extensions for the JVM compile 'io.reactivex:rxjava:1.2.9' compile 'io.reactivex:rxandroid:1.2.1' ②

redis使用watch完成秒杀抢购功能:

使用redis中两个key完成秒杀抢购功能,mywatchkey用于存储抢购数量和mywatchlist用户存储抢购列表. 它的优点如下: 1. 首先选用内存数据库来抢购速度极快. 2. 速度快并发自然没不是问题. 3. 使用悲观锁,会迅速增加系统资源. 4. 比队列强的多,队列会使你的内存数据库资源瞬间爆棚. 5. 使用乐观锁,达到综合需求. 我觉得以下代码肯定是你想要的. <?php header("content-type:text/html;charset=utf-8")

为年度评选活动添加倒计时功能

背景:前几天,老总说为年度优秀员工评选活动(活动放在公司的OA上面,使用asp.net+MySql开发)添加一个倒计时功能,想想没什么难度,不过是计算一下年月日时分秒而已,用javascript能够简单搞定啦! 步骤: 1.传入活动结束时间: 2.获取当前时间:   3.计算时间戳的差值: 4.通过判断差值并计算出剩余的时间 分享: var tid; -- 当前时间 时间间隔周期调用函数的标记 var NowTime; -- 当前时间 var t; -- 时间戳差值 var EndTime =