原生js实现网站倒计时效果给网站添加一个活动倒计时效果线报活动结束提示效果

如果活动没结束，那么显示距离结束时间，为绿色，如果到期了，那么显示活动已经结束，为红色提示。

下方是对应html和js代码

将html代码span标签中的时间修改为到期时间，格式一定要正确，例如 2018-08-08 24:00:00 ，并放置需要显示的地方。

将js代码，放置公共js中，或者其他只要引入的js文件中即可。

原地址 http://iqzhan.com/post/122.html

<span id="ActivityDate">2020-05-08 24:00:00</span>

<script>// 获取idvar ActivityDate = document.getElementById("ActivityDate");function timepiece(key){var datatime = /^[\d]{4}-[\d]{1,2}-[\d]{1,2}( [\d]{1,2}:[\d]{1,2}(:[\d]{1,2})?)?$/ig,str='',s;// 正则验证日期格式是否正确if(!key.match(datatime)){console.log('日期参数错误，请按格式填写，如 1996-10-22 24:00:00');return}// 当前日期减去活动日期，判断是否超出var sec = (new Date(key.replace(/-/ig,'/')).getTime() - new Date().getTime())/1000;if(sec < 0){ActivityDate.innerHTML = "<span style=" + "color:red;" + ">" + "本活动已经结束" + "</span>";return}s = {'天':sec/24/3600,'时':sec/3600%24,'分':sec/60%60,'秒':sec%60}for(i in s){if(Math.floor(s[i]) > 0) str += Math.floor(s[i]) + i;}if(Math.floor(sec) == 0){str='0秒';}// 距离活动结束时间显示到页面ActivityDate.innerHTML = "<span style=" + "color:#4ad564;" + ">" + "本活动还有" + str + "结束" + "</span>";// 每隔1秒更新一次setTimeout(function(){timepiece(key)},1000)}timepiece(ActivityDate.innerHTML);
</script>

原生js实现网站倒计时效果给网站添加一个活动倒计时效果线报活动结束提示效果相关推荐

未找到重要体积，且场景太大，自动合成的体积无法产生良好的效果。请添加一个紧密包裹的lightmass重要体积来优化场景质量及光照构建时间。
UE4系列文章目录文章目录 UE4系列文章目录前言一.使用步骤二.加入体积雾前言今天想在UE4里面使用体积雾功能达到有光束的效果结果在使用体积雾时报错提示如下: 未找到重要体积,且场景太大 ...
html网页制作看板娘原理,给网站添加网页看板娘效果给网页添加一个可爱的小萝莉...
今天遇到了点小问题,上百度搜问题,无意中看到了这个效果,就找了下,给大家分享一下. 效果如下图鼠标进入网页,小萝莉会根据鼠标位置而发生变化,此效果是canvas来实现的需要给自己网站添加,复制下方 ...
原生js之fetch
fetch是一种HTTP数据请求的方式.fetch不是ajax的进一步封装,是原生js.Fetch函数就是原生js,没有使用XMLHttpRequest对象,是一个全局方法. fetch 规范与 jQ ...
用原生 JS 实现双向绑定及应用实例
写在前面: 所谓的双向绑定,无非是从界面的操作能实时反映到数据,数据的变更也能实时展现到界面.angular封装了双向绑定的方法,使双向绑定变得十分简单.但是在有些场景下(比如下面那个场景),不能使用 ...
原生js + 后端nodejs实现邮箱信封表白程序
一个简单的信封表白程序由前端原生js + 后端nodejs(接收邮件) 程序体验地址:http://love.hzzy.xyz/ (手机访问效果更加) 前端介绍如果点击了跳动的爱心,会开始放烟花来 ...
js 写html代码编辑器,原生JS写一个功能强大的编辑器
因为一个同学,要做一个能加入图片的留言板功能,类型与QQ空间留言板和百度贴吧发帖的那种形式,同时在网上找了找发生网上对这方面的交流很少,所以发表这篇文章抛砖引玉,希望能帮助广大的学习者,也同时希望大佬 ...
android 横向滚动导航,仿今日头条横向滚动导航栏--原生js
咳咳!先打一波小广告,在上一篇里忘记了,那啥--我的那个个人博客做好了-->(我的博客) 好嘞,言归正传,说说我们的效果. 其实就是实现横向滑动,进行选择. 原理: 鼠标按下,获取当前鼠标坐标, ...
网站的线下活动如何组织
将一些心得体会与大家分享如下: 一.活动前 1.确定人员分工现在是一个讲究团队合作的时代,个人英雄主义已经吃不开了.所以不管大小活动,都建议大家找志同道合的人一起来做.对于小聚会,只要有一定的组织能 ...
原生JS和jQuery操作DOM的区别小结
一.Js原生对象和jQuery实例对象的相互转化: (1).原生JS对象转JQ对象: $(DOM对象); (2). JQ对象转原生JS对象: $(DOM对象).get(index); //注意区分eq ...
原生js 给动态添加的元素添加（事件监听器）
原生js (事件监听)和(动态添加元素) 给动态添加的元素添加点击事件 <!DOCTYPE html> <html><head><meta charset=& ...

原生js实现网站倒计时效果给网站添加一个活动倒计时效果线报活动结束提示效果

原生js实现网站倒计时效果给网站添加一个活动倒计时效果线报活动结束提示效果相关推荐

最新文章

热门文章

原生js实现网站倒计时效果 给网站添加一个活动倒计时效果 线报活动结束提示效果

原生js实现网站倒计时效果 给网站添加一个活动倒计时效果 线报活动结束提示效果相关推荐

最新文章

热门文章

原生js实现网站倒计时效果给网站添加一个活动倒计时效果线报活动结束提示效果

原生js实现网站倒计时效果给网站添加一个活动倒计时效果线报活动结束提示效果相关推荐