您的当前位置:首页 >天津市 >给网站添加一个活动倒计时效果 线报活动结束提示效果 正文
时间:2024-12-24 21:53:36 来源:网络整理编辑:天津市
大家好,我是小编鹏仔哥,本Q站主要是以资源活动分享为主体的网站,所以经常会分享一些活动,是活动都有结束时间,刚好前段时间逛其他网站,看到对应活动有对应结束倒计时效果,活动结束后会提示活动已经结束,给用
大家好,我是小编鹏仔哥,本Q站主要是以资源活动分享为主体的网站,所以经常会分享一些活动,是活动都有结束时间,刚好前段时间逛其他网站,看到对应活动有对应结束倒计时效果,活动结束后会提示活动已经结束,给用户体验是比较好的,所以也写了这个效果,分享给大家。
$$$$$app试玩平台排行$ 因为考虑到大家一些网站没有使用jq,或者jq版本低之类,所以使用原生来实现效果,这样任何网站都是可以使用。作者:鹏仔先生
效果如下图所示:
如果活动没结束,那么显示距离结束时间,为绿色,如果到期了,那么显示 活动已经结束,为红色提示。
下方是对应html和js代码
将html代码span标签中的时间修改为到期时间,格式app试玩平台排行一定要正确,例如 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>
对于样式,没做什么美化,后期有app试玩平台排行空会更新美化版。
逆向思维,为什么总赚不到钱,因为你的观念反了土豆这样做好吃又下饭,一道酱香小土豆,吃起来不去皮,太过瘾了2024-12-24 21:52
姐妹情深一同投资“赚钱”?还好2024-12-24 20:46
读万卷书不如行万里路, 大学生捡废品游31省600多城市, 还存了15万想不到“毛衣+半身裙”的穿法火了!中年女人穿了优雅减龄,超美2024-12-24 20:36
湖北公安县以“结成队”“组成团”“项目化”方式推进工作 48个专业妈妈团织就精准关爱网2024-12-24 20:34
女子网上售卖自己制作的手工艺品,2年赚4多,却被市监罚26万!《宿敌》结局:原来,这才是胡夏峰不知吴豫是卧底的真相!2024-12-24 20:02
梦幻西游:一年半的努力白费,被没收了32亿,只是因为用了宏鼠标女子把老人撞成植物人,法院要求赔偿86万,女子一句话让法院无奈2024-12-24 20:00
同为富豪刘銮雄的儿女待遇却不同:刘秀盈辛苦创业,刘秀桦成名媛腿粗就不能穿下衣失踪吗呜呜呜2024-12-24 19:55
200万起的电动轿车!凯迪拉克Celetiq开始量产!去年就已售罄!“君子之交淡如水”的下一句是什么?其实更有道理,却少有人知道2024-12-24 19:44
读万卷书不如行万里路, 大学生捡废品游31省600多城市, 还存了15万想不到“毛衣+半身裙”的穿法火了!中年女人穿了优雅减龄,超美2024-12-24 19:42
起底电诈丨@大学生 学历高≠不被骗!假期想找兼职、看演唱会的同学看过来恒星的死亡舞蹈:双星系统中一颗恒星,如何吞噬掉另一颗?2024-12-24 19:09
肖金成:经济增长极是培育起来的,核心要义在于体制创新“名字就不能是红色的!”老师用红笔写学生名字,家长吐槽引热议2024-12-24 21:48
适合新人新手专享的赚钱小游戏,微信提现秒到账(无广告) 2024-12-24 21:45
真要走了?33岁奥斯卡哭成泪人,疑似告别 海港7年狂赚12亿拿5冠娄艺潇刘柏辛加盟 《吾湖音乐局》跨越艺术边界!2024-12-24 21:20
非凡闲扯淡 篇五十五:春节假期即将结束,简单说说2024年的工作项目计划3年前,乡村“微笑女孩”拒“百万签约”,3年后,她后悔了吗?2024-12-24 21:19
一女子太能赚钱,丈夫自卑杀死她,2012年女大学生嫁初中生酿惨案女友家庭条件不好,我很爱她但父母反对,我该不该和她分手?2024-12-24 20:24
一个融了16轮的IPO,投资人集体赚钱了孩子经历过的痛苦体验和经历,是他们一生中接收到的美好礼物2024-12-24 19:41
刽子手为赚快钱触犯禁忌,破坏行规,最终为自己的行为买了单揭秘姜文“世界第一美”女儿的幕后故事:美貌与才华并存的公主2024-12-24 19:36
湖北公安县以“结成队”“组成团”“项目化”方式推进工作 48个专业妈妈团织就精准关爱网2024-12-24 19:23
华创证券张瑜:全球货币政策转向在即,如何赚钱?《我是刑警》三个大案件的主演,哪个演技最好,两个反派一个正派2024-12-24 19:19
他还在相信足不出户日赚千元!说是好奇就是贪心 2024-12-24 19:18