案例二——网页倒计时（秒杀）

css部分

h1 {font-size: 30px;color: orangered;text-align: center;margin: 100px 0;}

html部分

<h1 id="h1">距离秒杀时间还剩03天20小时30分钟20秒</h1>

js部分

 //获取元素var h1 = document.getElementById('h1')//思路：使用将来的时间 - 现在的时间  = 时间差//第一步，先设置将来时间（固定值）var endDate = new Date('2022-11-11 00:00:00')//当定时器没有开始执行之前先调用一次函数，让他进行赋值操作，当1秒后会接着之前的赋值操作后执行djs()/*第二步：获取现在的时间（动态值）+ 使用定时器，因为可以动态获取数据*///问题：由于定时器是1秒后才执行，那么函数里面进行的赋值操作会有延迟，导致页面的效果看起来体验不好function djs() {var nowDate = new Date()/*第三步：使用将来的毫秒数 - 现在的时间的毫秒数，并把毫秒转成秒数 + 1秒 == 1000毫秒+ 转换使用毫秒除以1000即可+ seconds总的秒数*/var seconds = parseInt((endDate.getTime() - nowDate.getTime()) / 1000)//第四步：把秒分别转成天、小时、分钟、秒var d = transformation(parseInt(seconds / 3600 / 24))var h = transformation(parseInt(seconds / 3600 % 24))var m = transformation(parseInt(seconds / 60 % 60))var s = transformation(parseInt(seconds % 60))//第六步：进行赋值操作h1.innerHTML = '距离秒杀时间还剩' + d + '天' + h + '小时' + m + '分钟' + s + '秒'}setInterval(djs, 1000)第五步：补位操作封装function transformation(num) {return num < 10 ? num = '0' + num : num}

案例二——网页倒计时（秒杀）相关推荐

【H5】网页入门练习案例二
<!DOCTYPE html> <html><head><meta charset = "utf-8"><title>网 ...
2021年大数据Flink（三十五）：Table与SQL 案例二
目录案例二需求代码实现-SQL 代码实现-Table 案例二需求使用SQL和Table两种方式对DataStream中的单词进行统计代码实现-SQL package cn.it.sql;i ...
2021年大数据Flink（二十）：案例二基于数量的滚动和滑动窗口
目录案例二基于数量的滚动和滑动窗口需求代码实现案例二基于数量的滚动和滑动窗口需求需求1:统计在最近5条消息中,各自路口通过的汽车数量,相同的key每出现5次进行统计--基于数量的滚动窗 ...
2021年大数据Spark（三十七）：SparkStreaming实战案例二 UpdateStateByKey
目录 SparkStreaming实战案例二 UpdateStateByKey 需求 1.updateStateByKey 2.mapWithState 代码实现 SparkStreaming实战案例 ...
2021年大数据Spark（二十七）：SparkSQL案例一花式查询和案例二WordCount
目录案例一:花式查询案例二:WordCount 基于DSL编程基于SQL编程具体演示代码如下: 案例一:花式查询 package cn.itcast.sqlimport org.apache. ...
html5倒计时秒杀怎么做,vue 设计一个倒计时秒杀的组件
HTML CSS HTML5 CSS3 vue 设计一个倒计时秒杀的组件简介: 倒计时秒杀组件在电商网站中层出不穷不过思路万变不离其踪,我自己根据其他资料设计了一个vue版的核心思路:1.时间 ...
【数字信号处理】线性时不变系统 LTI “ 输入 “ 与 “ 输出 “ 之间的关系 ( 线性卷积计算案例二 | 计算卷积 )
文章目录一.线性卷积计算案例二一.线性卷积计算案例二给定如下两个序列 : x(n)={3,4,5}[−2,0]x(n) = \{ 3 , 4, 5 \}_{[-2,0]}x(n)={3,4, ...
【数字信号处理】线性时不变系统 LTI ( 判断某个系统是否是 “ 非时变 “ 系统 | 案例二 )
文章目录一.判断系统是否 " 非时变 " 1.案例二 ① 时不变系统概念 ② 先变换后移位 ③ 先移位后变换 ④ 结论一.判断系统是否 " 非时变 " 1. ...
Redis简单案例(二) 网站最近的访问用户
原文:Redis简单案例(二) 网站最近的访问用户我们有时会在网站中看到最后的访问用户.最近的活跃用户等等诸如此类的一些信息.本文就以最后的访问用户为例, 用Redis来实现这个小功能.在这之前,我 ...
C++多态案例二-制作饮品
多态案例二-制作饮品多态案例二-制作饮品示例多态案例二-制作饮品案例描述: 制作饮品的大致流程为:煮水 - 冲泡 - 倒入杯中 - 加入辅料利用多态技术实现本案例,提供抽象制作饮品基类,提供 ...

案例二——网页倒计时（秒杀）

css部分

html部分

js部分

案例二——网页倒计时（秒杀）相关推荐

最新文章

热门文章