您的当前位置:首页 >万州区 >给网站添加一个活动倒计时效果 线报活动结束提示效果 正文
时间:2024-12-25 00:03:28 来源:网络整理编辑:万州区
大家好,我是小编鹏仔哥,本Q站主要是以资源活动分享为主体的网站,所以经常会分享一些活动,是活动都有结束时间,刚好前段时间逛其他网站,看到对应活动有对应结束倒计时效果,活动结束后会提示活动已经结束,给用
大家好,我是小编鹏仔哥,本Q站主要是以资源活动分享为主体的网站,所以经常会分享一些活动,是活动都有结束时间,刚好前段时间逛其他网站,看到对应活动有对应结束倒计时效果,活动结束后会提示活动已经结束,给用户体验是比较好的,所以也写了这个效果,分享给大家。
手机赚钱因为考虑到大家一些网站没有使用jq,或者jq版本低之类,所以使用原生来实现效果,这样任何网站都是可以使用。
作者:鹏仔先生
效果如下图所示:
如果活动没结束,那么显示距离结束时间,为绿色,如果到期了,那么显示 活动已经结束,为红色提示。
下方是对应html和js代码
将html代码span标签中的时间修改为到期时间,格式一定手机赚钱要正确,例如 2018-08-08 24:00:00 ,并放置需要显示的地方。
将js代码,放置公共js中,或者其他只要引入的js文件中即可。
Markup
<spanid="ActivityDate">2020-05-08 24:00:00span>
JavaScript
<script>// 获取idvar ActivityDate = document.getElementById("ActivityDate"); functiontimepiece(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 = (newDate(key.replace(/-/ig,/)).getTime() - newDate().getTime())/1000; if(sec < 0){ ActivityDate.innerHTML = " + ">" + "本活动已经结束" + ""; 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 = " + ">" + "本活动还有" + str + "结束" + ""; // 每隔1秒更新一次 setTimeout(function(){ timepiece(key) },1000) } timepiece(ActivityDate.innerHTML); script>
对于样式,没做什么美化,后期有手机赚钱空会更新美化版。
杀死《植物大战僵尸》的人,与复活它的人简约风可爱小包,浮雕心形手拎包教程,一天钩一个没问题2024-12-24 23:44
前半生像郭靖,后半生像安禄山,董卓是如何堕落的?发一组和梦想的车车的合照努力向目标靠2024-12-24 23:22
读万卷书不如行万里路, 大学生捡废品游31省600多城市, 还存了15万你总要一个人,经历些难捱的日子2024-12-24 23:16
7月3日,王思聪这次被彻底利用干净了!沙漠下面全是石油,为啥我国迟迟不想开采?看完后就会明白了2024-12-24 22:12
被质疑的一诺千金,网易武侠游戏《燕云十六声》能否如约公测?古代女人做这些职业,大部分是老女人,至今都存在,一项是犯法的2024-12-24 22:07
被质疑的一诺千金,网易武侠游戏《燕云十六声》能否如约公测?古代女人做这些职业,大部分是老女人,至今都存在,一项是犯法的2024-12-24 22:04
这几款单机大作又有新的进展来了,《巫师4》已进入全面制作阶段正常么!29岁小伙和48岁女子网恋一个月奔现,秀恩爱称爱情无关年龄2024-12-24 21:59
为校企搭建合作平台 重庆举行先进制造业与职业院校线下交流活动基因太强大!邵兵儿子20岁韩国出道太帅了,完美继承妈妈超高颜值2024-12-24 21:58
“双11”的“0元领”,领了吗? 2024-12-24 21:44
自媒体新手小白如何,赚到第一个100元,非常建议从微头条入手这三大星座真正想要的,并不是浪漫和惊喜2024-12-24 21:24
《蝉张抓唠》仅燃人枚澈署2024-12-24 23:53
【白夜谈】《三国志11》击碎了我的回忆滤镜成年人如何优雅告别一段关系:坦然面对得失,淡然处之2024-12-24 23:33
大学生在校兼职全攻略 2024-12-24 23:28
王宝强的《八角笼中》到底赚了多少钱?毕竟小俱乐部都眼红了2024-12-24 23:22
不能再任由网络主播继续这样赚钱下去了! 2024-12-24 22:40
提供逾4000个就业岗位 四川“逐梦计划”举行专场线下招聘活动这4位明星在娱乐圈中没有人敢黑,你同意吗?2024-12-24 22:18
非凡闲扯淡 篇五十五:春节假期即将结束,简单说说2024年的工作项目计划【 AI快报 -- 社会速览】“盒饭姐”坚持不涨价;豪士面包霉菌超标2024-12-24 22:12
小米SU7火了流量惊人,有人建议雷军接广告赚钱!福布斯:雷军财富1281亿,中国富豪榜上位列第7名上海静安检察院发布白皮书:网络犯罪涉案人员低龄、低学历特征明显2024-12-24 22:03
哪4个星座,不算太聪明,但却情商高,赚钱和创业顺风顺水小乖人生没有那么多观众 尽情做自己吧!2024-12-24 21:48
3日累计“吸金”超27亿元,中证A500指数ETF(563880)最新规模超47亿元《五福临门》将定档,祝绪丹两部古装剧待播,于正开始着急了吗?2024-12-24 21:44