Layer弹窗显示动态时间
突然有了一个显示倒计时的需求,本来想着小问题,找段js插进去就好了。
<span id="span_dt_dt"></span> <script> function show_time(){ window.setTimeout("show_time()", 1000); BirthDay=new Date('2020 14:12:45');//改成你的计时日期 console.log(BirthDay) today=new Date(); timeold=(BirthDay.getTime()-today.getTime()); sectimeold=timeold/1000 secondsold=Math.floor(sectimeold); msPerDay=24*60*60*1000 e_daysold=timeold/msPerDay daysold=Math.floor(e_daysold); e_hrsold=(e_daysold-daysold)*24; hrsold=Math.floor(e_hrsold); e_minsold=(e_hrsold-hrsold)*60; minsold=Math.floor((e_hrsold-hrsold)*60); seconds=Math.floor((e_minsold-minsold)*60); span_dt_dt.innerHTML=daysold+"天"+hrsold+"小时"+minsold+"分"+seconds+"秒" ; } show_time(); </script>
这个是我从其他大佬哪里拿的,一开始没跑起来,后来检查了一下是new Date的时间格式不对,大概是这个样子,自己再改下
为什么选这个呢,是因为这个带时分秒
这个在平面页面上显示倒ok,当我把时间dom移动到layer.open中,好家伙,问题来了。
layer只读取第一次在页面抓取的内容,一开始没有用html类型的弹出模式。
然我我想着通过layer内置方法或者回调来解决实时刷新的问题
然后拿layer中success的回调打算做点手脚,
在改造过程中,还知道了layero这个东西,其实这个就是弹出层的DOM,
通过
$(layero).find("#span_dt_dt").text($txt)
这个来赋值,好家伙,虽然跑通了但还是不行,依然改变不了静态的本质。
success: function(layero, index){ // // var form = $(layero).find("#span_dt_dt").text(1232);//获取子页面元素 // window.setTimeout("show_time()", 1000); // BirthDay=new Date('2020 14:12:45');//改成你的计时日期 // console.log(BirthDay) // today=new Date(); // timeold=(BirthDay.getTime()-today.getTime()); // sectimeold=timeold/1000 // secondsold=Math.floor(sectimeold); // msPerDay=24*60*60*1000 // e_daysold=timeold/msPerDay // daysold=Math.floor(e_daysold); // e_hrsold=(e_daysold-daysold)*24; // hrsold=Math.floor(e_hrsold); // e_minsold=(e_hrsold-hrsold)*60; // minsold=Math.floor((e_hrsold-hrsold)*60); // seconds=Math.floor((e_minsold-minsold)*60); // // $(layero).find("#span_dt_dt").innerHTML=daysold+"天"+hrsold+"小时"+minsold+"分"+seconds+"秒" ; // $txt=daysold+"天"+hrsold+"小时"+minsold+"分"+seconds+"秒" ; // $(layero).find("#span_dt_dt").text($txt) ; // }
然后就采用了一开始的保底的办法,就是用layer的ifame这个,就是跳转到新页面。然后成功。。。。