`
jiaoronggui
  • 浏览: 1327882 次
  • 性别: Icon_minigender_1
  • 来自: 合肥
博客专栏
B7c2eb31-a8ea-3973-a517-d00141f39b89
项目管理软件-redmin...
浏览量:116414
4a63e153-250f-30f6-a051-97cfc67cb3d3
IT职业规划
浏览量:199304
社区版块
存档分类
最新评论

H5页面倒计时代码(解决safari不兼容date的问题)

 
阅读更多

话不多说,请看下面代码

PC:

1.html页面:

<div class="aTime">
   <em id="t_d"></em>
   <em id="t_h"></em>
   <em id="t_m"></em>
   <em id="t_s"></em>
</div>

 

 

2.js:

 

<script type="text/javascript">
 function GetRTime(){
  var end = "<?php echo $info['end_date']; ?>"+" 23:59:59";
  var EndTime= new Date(end);
  var NowTime = new Date();
  var t =EndTime.getTime() - NowTime.getTime();
  var d=0;
  var h=0;
  var m=0;
  var s=0;
  if(t>=0){
   d=Math.floor(t/1000/60/60/24);
   h=Math.floor(t/1000/60/60%24);
   m=Math.floor(t/1000/60%60);
   s=Math.floor(t/1000%60);
  }
  document.getElementById("t_d").innerHTML = d;
  document.getElementById("t_h").innerHTML = h;
  document.getElementById("t_m").innerHTML = m;
  document.getElementById("t_s").innerHTML = s;
 }
 setInterval(GetRTime,1000);
</script>

 

以上代码在safari中出错,原因是:

在IOS5以上版本(不包含IOS5)中的Safari浏览器能正确解释出Javascript中的 new Date('2013-10-21') 的日期对象。

但是在IOS5版本里面的Safari解释new Date('2013-10-21') 就不正确,在IOS5的Safari中返回的永远是"Invalid Date"。

后来我在网上查找了资料,原来是低版本的Safari解释new Date('2013-10-21')这个对象不一样,在IOS5中的Safari不支持这种写法,

而它支持的写法为new Date('2013','10','21'),这样写就能解决"Invalid Date"的问题,能返回一个Javascript Date回来了。

想要IOS5中的Safari能正确解析new Date()那么必须这么写

new Date('2013/10/21');   或者  var d = new Date(date);d = d.getFullYear() > 0 ? d : new Date(Date.parse(date.replace(/-/g, "/")));

分享到:
评论

相关推荐

    解决ios的app内H5页面倒计时在锁屏后停止或延迟的解决方案

    6. **Hybrid App解决方案**:对于更复杂的需求,可以结合原生代码实现,比如通过原生插件监听系统的定时事件,再将信息传递给H5页面,这样即使在后台,也能保持倒计时的准确运行。 以上就是解决iOS App内H5页面倒...

    解决ios下h5锁屏时倒计时停止问题

    为了解决H5倒计时在锁屏后继续运行的问题,我们可以考虑以下策略: 1. **服务端配合**:将倒计时逻辑移到服务器端,客户端只负责展示时间。每次用户打开H5页面时,通过Ajax请求获取当前剩余时间。这种方式虽然简单...

    h5网站倒计时页面

    在构建一个H5网站倒计时页面的过程中,我们需要掌握一系列技术与设计原则,这些知识点将帮助我们实现一个专业且吸引用户的倒计时功能。在这个场景中,我们的目标是创建一个用于网站维护期间通知用户并展示剩余时间的...

    jQuery+H5结婚倒计时邀请函电子请帖模板.rar

    《jQuery+H5 结婚倒计时邀请函电子请帖模板》 在现代网页设计中,JavaScript、HTML和CSS这三者是构建交互式用户体验的关键技术。本资源“jQuery+H5 结婚倒计时邀请函电子请帖模板”正是一个结合了这些技术的实例,...

    HTML5网页倒计时代码特效.zip

    JavaScript是一种广泛用于网页交互的客户端脚本语言,它可以实时更新页面内容,非常适合用于动态显示倒计时。 在"JS特效-日期时间"这个标签中,我们可以推测这个压缩包包含了一个使用JavaScript实现的HTML5倒计时...

    倒计时2023元旦倒计时HTML代码

    【倒计时】2023元旦倒计时HTML代码 【倒计时】2023元旦倒计时HTML代码 【倒计时】2023元旦倒计时HTML代码 【倒计时】2023元旦倒计时HTML代码 【倒计时】2023元旦倒计时HTML代码 【倒计时】2023元旦倒计时HTML代码 ...

    极奇公司h5网页倒计时

    极奇公司成长计划,公众号h5网页。可以设定公司或者工作室成立日期,带微信分享功能,演示地址:关注公众号:极奇 ,在成长计划打开查看

    辩论倒计时_企业城微信小程序js代码前台前端H5页面源码.rar

    《辩论倒计时:企业城微信小程序JS代码与前端H5页面源码解析》 在当前互联网技术高速发展的时代,微信小程序作为一种轻量级的应用形式,已经深入到人们的日常生活中。"辩论倒计时"这款企业城微信小程序,以其独特的...

    h5页面模版源码,很不多的例子

    【标题】:“h5页面模版源码,很不错的例子” 这个标题暗示了我们讨论的主题是关于HTML5页面模板的源代码。HTML5是现代网页开发的基石,它提供了丰富的功能和元素,使得开发者能够创建出更加交互式、动态且响应式的...

    手机h5页面长按复制完整代码

    这个"手机H5页面长按复制完整代码"项目就是针对这个问题提供的解决方案。 首先,我们要理解H5页面在移动设备上的工作原理。HTML5为开发者提供了更强大的Web API,例如Canvas、Audio/Video、Geolocation等,同时也...

    h5倒计时模板.zip.zip

    【标题】"h5倒计时模板.zip.zip" 指的是一款用于创建HTML5(H5)页面的倒计时模板,它被压缩在两个.zip文件中。这样的模板通常包含HTML、CSS和JavaScript文件,方便开发者快速构建具有倒计时功能的网页。 【描述】...

    网站建设中HTML5源码 显示精美倒计时

    倒计时功能的核心是计算时间差并实时更新显示,这通常需要用到JavaScript的Date对象和setInterval函数。开发者可以设定结束日期和当前时间,计算差值,然后将秒数转换为天、小时、分钟和秒,并动态显示在页面上。 ...

    高考倒计时HTML源码+全屏向下滑动效果+多终端+自适应.zip

    全国高考倒计时,音乐自动播放。 背景图片:img目录下替换bg.jpg 背景音乐:audio目录下替换song.mp3 原本按照正常情况下每年的6月7、8日就是全国高考的时间的,无奈今年的一场疫情导致高考都延迟一个月 前几年...

    辩论倒计时_微信小程序模板js代码前台前端H5页面源码.rar

    本资源提供的是一个“辩论倒计时”微信小程序的前端源码,主要涉及到JavaScript(JS)编程语言和H5页面的开发技术。下面我们将深入探讨这个项目中的关键知识点。 1. **微信小程序框架**: 微信小程序基于微信自己...

    H5兼容页面

    H5兼容页面H5兼容页面H5兼容页面H5兼容页面H5兼容页面H5兼容页面

    整套移动端h5页面源码

    在IT行业中,移动端H5页面源码是构建移动互联网应用的一种常见方式,尤其在电商项目中广泛应用。H5,即HTML5,是超文本标记语言的第五次重大修订,为网页开发提供了更多功能和交互性。本套源码提供了一整套移动端的...

    电商-拼团 倒计时_微信小程序模板js代码前台前端H5页面源码.rar

    该压缩包文件“电商-拼团 倒计时_微信小程序模板js代码前台前端H5页面源码.rar”显然包含了一个用于电商拼团活动的微信小程序前端模板,以及相关的JavaScript(js)代码和H5页面源码。下面将详细阐述这个主题中涉及...

    html5简单圆形进度条倒计时插件

    2. JavaScript Date对象:用于处理时间,计算倒计时的剩余秒数。 3. CSS3 Transitions和Animations:可以平滑地改变进度条的外观,例如渐变填充、动画旋转等,增加视觉吸引力。 在压缩包中的文件"texiao2932_...

    电商-拼团 倒计时_企业城微信小程序js代码前台前端H5页面源码.rar

    这个"电商-拼团 倒计时_企业城微信小程序js代码前台前端H5页面源码.rar"压缩包文件包含的正是用于实现这一功能的源代码。 首先,我们需要理解微信小程序(WeChat Mini Program)的概念。微信小程序是腾讯公司推出的...

    vue写h5页面的方法总结

    在当今Web开发领域,Vue.js已成为构建单页应用(SPA)的强大工具,而H5页面则因其跨平台特性而广泛应用于移动端。Vue编写H5页面的方法不仅能够带来开发效率的提升,还能通过现代前端技术实现优秀的用户体验。下面...

Global site tag (gtag.js) - Google Analytics