仿京东秒杀倒计时 JS[代码+详细讲解+效果图] |
您所在的位置：网站首页 › ark秒杀代码 › 仿京东秒杀倒计时 JS[代码+详细讲解+效果图] |
仿京东秒杀倒计时 JS[代码+详细讲解+效果图]
|
文章目录
前言一、html代码讲解二、css代码讲解三、js代码讲解四、全部代码五、效果图总结
前言
这个倒计时秒杀效果可以直接拿来用，不需要具备自己能够打出来。当然了，要是能打出来那是最好的，理解代码的意思就可以了。。。重点在于bom的知识点那块，也就是setInterval的使用。下面详细讲解一下吧。 一、html代码讲解在做这个时，我们先把京东的图拿过来分析一下。下图是京东的秒杀效果图。主要是一个大的div放背景图。里面有3个小的div。最后一个div里面放3个span标签进行修饰。下面我们来一起做吧！ 按照上面的思路我们写一下代码，这个简单就不多说了。 京东秒杀 24:00点场 距结束 1;:; 2;:; 3;; 二、css代码讲解分析 因为里面的3个小div需要设置所在大盒子的位置。所以我们先设置大div 1.设置相对属性 2.设置宽高 3.设置背景图。(图片自己想做的话去京东下载吧) 大盒子代码 .big_box { position: relative; width: 190px; height: 250px; background: url(../../img/jd.png) no-repeat; }设置三个小div相同的属性，写在一起。 1.相同的颜色 2.相同的粗体 3.都要调位置 相同属性代码 .big_box .box1,.box2,.box3 { color: #FFFFFF; font-weight: 700; position: absolute; }设置三个小div的不同属性，div位置，字体大小。 不同属性代码 /* div位置，字体大小 */ .big_box .box1 { font-size: 30px; top: 30px; left: 32px; } /* div位置，字体大小 */ .big_box .box2 { font-size: 18px; top: 164px; left: 24px; } /* div位置，字体大小 */ .big_box .box3{ font-size: 20px; top: 203px; left: 32px; } 设置第三个div里面三个span标签的属性 修饰span代码 /* span */ .hour,.minute,.second { display:inline-block; width: 26px; height: 26px; background-color: #000000; } 三、js代码讲解获取span时分秒代码 这里只有第三个div里的3个span标签需要变化，所以获取过来。 var hour=document.querySelector('.hour'); var minute=document.querySelector('.minute'); var second=document.querySelector('.second');结束时间代码 var inputTime=+new Date('2022-5-3 24:00:00');获取时分秒时间并把值放到span里代码 这个在我前几篇javascript中Date()内置对象说过，这里就不解释了。 function countDown(){ var nowTime=+new Date(); var times=(inputTime-nowTime)/1000; var h=parseInt(times/60/60%24); h=h |
【本文地址】
今日新闻 |
推荐新闻 |