节日倒计时demo普通版

临近春节，写一个倒计时的demo，供大家参考，有点跑马灯效果哦
普通版
样式 #s1,
#s2,
#s3,
#s4,
#s5,
#s6,
#s7 {
font-size: 40px;
font-weight: bold;
display: block;
text-align: left;
margin-left: 200px;
}

内容与脚本

无标题文档

<span id="s1"></span>
<span id="s2"></span>
<span id="s3"></span>
<span id="s4"></span>
<span id="s5"></span>
<span id="s6"></span>
<span id="s7"></span>
<span id="s8"></span><script>function fn(cs1, cs2, cs3) {var chars = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'A', 'B', 'C', 'D', 'E', 'F'];function generateMixed(n) {var res = "";for (var i = 0; i < n; i++) {var id = Math.ceil(Math.random() * 16);res += chars[id];}return res;}var num = generateMixed(6);var oSpan2 = document.getElementById(cs1);var nDate2 = new Date(cs2);//修改需要倒计时的时间showTime();// setInterval(showTime, 1000);function showTime() {var oDate = new Date();//获取当地显示器的时间var time = Math.floor((nDate2 - oDate) / 1000);var d2 = Math.floor(time / 86400);var h2 = Math.floor(time % 86400 / 3600);var m2 = Math.floor(time % 86400 % 3600 / 60);var s2 = time % 60;oSpan2.innerHTML = "距离" + cs3 + "还有：" +d2 + '天' + h2 + '时' + m2 + '分' + s2 + '秒';}oSpan2.style.color = "#" + num;};this.fn('s1', '2021-02-09 00:00:00', '2021年春节');this.fn('s2', '2021-04-03 00:00:00', '2021年清明节');this.fn('s3', '2021-05-01 00:00:00', '2021年劳动节');this.fn('s4', '2021-06-12 00:00:00', '2021年端午节');this.fn('s5', '2021-09-19 00:00:00', '2021年中秋节');this.fn('s6', '2021-10-01 00:00:00', '2021年国庆节');this.fn('s7', '2022-02-01 00:00:00', '2022年春节');(function () {window.setTimeout(() => {window.location.reload()}, 1000)})()</script>

节日倒计时demo普通版相关推荐

html 倒计时特效,JS节日倒计时特效(精确到毫秒)
JS节日倒计时特效(精确到毫秒)-时间特效-网页特效-站长新动力-msxindl.com function show_djs(){ var djs = document.getElementById( ...
java 定时器倒计时_定时器倒计时demo
/** * 定时器倒计时demo */ import java.io.InputStream; import java.util.Scanner; import java.util.Timer; im ...
python绘制圣诞树、烟花、爱心及节日倒计时
说明: 该博客主要完成以下几个方面的功能: 1.元旦节日倒计时代码的实现 2.使用python源码"绘制圣诞树" 3.使用python绘制"跨年烟花" 4.使用 ...
php银联支付接口 demo,php版银联支付接口开发简单实例详解
这篇文章主要介绍了php版银联支付接口开发的方法,结合实例形式分析了php银联支付接口开发的具体流程与相关操作技巧,需要的朋友可以参考下支付接口现在有第三方的支付接口也有银行的支付接口.这里就来介绍 ...
云之讯官方测试Demo音频版源码阅读（编辑）
* 由于最近项目中貌似需要做这一块,于是就去读了一下云之讯官方测试Demo的音频版的源码[Android音频版](http://www.ucpaas.com/product_service/downl ...
C++简单的倒计时demo
//单纯控制台操作,算法谈不上 //主业备战24跨考计算机努力培养写程序的感觉 //转码自学当然欢迎大佬们优化补充,本小白愿意学习 #include<iostream> using ...
云之讯官方测试Demo音频版源码阅读
由于最近项目中貌似需要做这一块,于是就去读了一下云之讯官方测试Demo的音频版的源码Android音频版. 其实这个Demo并不是什么高大上的代码,也没有很多生涩难懂的代码在里面,相反,读起来还是很轻 ...
vue节日倒计时列表
如果本文帮助到你,本人不胜荣幸,如果浪费了你的时间,本人深感抱歉. 项目线上demo:https://my.weblf.cn/lf_demo/others/rili_list 项目结构: rili.v ...
JavaCPP快速入门(官方demo增强版)
欢迎访问我的GitHub 这里分类和汇总了欣宸的全部原创(含配套源码):https://github.com/zq2599/blog_demos 关于JavaCPP JavaCPP 使得Java 应用 ...

节日倒计时demo普通版

节日倒计时demo普通版相关推荐

最新文章

热门文章