活动倒计时-兼容ios
最近要做一个活动,需要用倒计时,写好之后再IOS上无效,经过百度知道了,原来IOS不能识别格式“2017-11-09 ……”,所以要进行转换才有效
直接上代码了:
<!DOCTYPE html>
<html> <head>
<meta charset="UTF-8">
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
</head> <body>
<textarea name="" id="txt1" cols="30" rows="10"></textarea>
<textarea name="" id="txt2" cols="30" rows="10"></textarea> <button id="time_btn">测试倒计时</button>
<div id="timelayer" class="timelayer">
<div class="con">
<h4>离活动开始还有</h4>
<p>
<span id="t_d"></span> 天
<span id="t_h"></span> 小时
<span id="t_m"></span> 分钟
<span id="t_s"></span> 秒
</p>
<button id="close" class="close">关闭</button>
</div>
</div>
<script type="text/javascript">
var txt1 = document.getElementById('txt1');
var txt2 = document.getElementById('txt2'); // 设置活动时间的格式为 2017-11-27 00:00:00
var theTime = "2019-11-28 00:00:00";
var timeLayer = document.getElementById("timelayer");
var timeLayerClose = document.getElementById("close");
var timeBtn = document.getElementById('time_btn'); timeBtn.onclick = function () {
//注意:必须将字符-转换为/,否则IOS不能识别
var setDate = new Date(Date.parse(theTime.replace(/-/g, "/"))).getTime(); //Date.parse(new Date()); //字符串转换为时间戳
var nowDate = new Date().getTime(); console.log(setDate);
console.log(nowDate);
if (setDate <= nowDate) {
//活动开始
console.log('start')
} else {
//活动未开始,倒计时
setInterval(GetRTime, 0);
timeLayer.classList.add('show')
} } //弹框JS
timeLayerClose.onclick = function () {
timeLayer.classList.remove('show')
} // 倒计时JS
function GetRTime() {
var EndTime = new Date(Date.parse(theTime.replace(/-/g, "/"))).getTime();
var NowTime = new Date().getTime(); txt1.innerText = EndTime;
txt2.innerText = NowTime;
var t = EndTime - NowTime;
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;
} </script> <style>
.timelayer {
display: none;
position: fixed;
height: 100%;
width: 100%;
top: 0px;
left: 0px;
background-color: rgba(0, 0, 0, .6);
} .timelayer.show {
display: block !important;
} .timelayer .con {
background-color: #fff;
width: 260px;
position: absolute;
left: 50%;
top: 50%;
margin-top: -73px;
padding: 35px 20px;
border-radius: 8px;
overflow: hidden;
margin-left: -150px;
} .timelayer h4 {
line-height: 45px;
font-size: 20px;
font-weight: 700;
color: #7e28c2;
text-align: center;
margin:0px;
} .timelayer p {
margin-top: 10px;
text-align: center;
font-size: 16px;
} .timelayer p span {
padding: 0px 3px;
color: red;
font-weight: 700;
} .timelayer .close {
position: absolute;
height: 35px;
width: 35px;
right: 0px;
top: 0px;
/*background: url(images/close3.png) center center no-repeat;*/
background-size: 20px;
}
</style>
</body> </html>
活动倒计时-兼容ios的更多相关文章
- iOS活动倒计时的两种实现方式
代码地址如下:http://www.demodashi.com/demo/11076.html 在做些活动界面或者限时验证码时, 经常会使用一些倒计时突出展现. 现提供两种方案: 一.使用NSTime ...
- 兼容iOS 10 资料整理笔记
原文链接:http://www.jianshu.com/p/0cc7aad638d9 1.Notification(通知) 自从Notification被引入之后,苹果就不断的更新优化,但这些更新优化 ...
- iOS开发 - 兼容iOS 10
1.Notification(通知) 自从Notification被引入之后,苹果就不断的更新优化,但这些更新优化只是小打小闹,直至现在iOS 10开始真正的进行大改重构,这让开发者也体会到UserN ...
- 【转】兼容iOS 10 资料整理
1.Notification(通知) 自从Notification被引入之后,苹果就不断的更新优化,但这些更新优化只是小打小闹,直至现在iOS 10开始真正的进行大改重构,这让开发者也体会到UserN ...
- 兼容iOS 10 资料整理
1.Notification(通知) 自从Notification被引入之后,苹果就不断的更新优化,但这些更新优化只是小打小闹,直至现在iOS 10开始真正的进行大改重构,这让开发者也体会到UserN ...
- 兼容iOS 10 资料整理笔记-b
原文链接:http://www.jianshu.com/p/0cc7aad638d9 1.Notification(通知) 自从Notification被引入之后,苹果就不断的更新优化,但这些更新优化 ...
- 活动倒计时代码(精确到毫秒)jquery插件
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- 解决scroll在ios上卡顿问题和兼容ios不支持:active伪类情况
//有时候因为滚动层级元素过多会产生卡顿,特别在ios上十分明显,如果不想更换其他实现方式,可以加:-webkit-overflow-scrolling: touch; 开启硬件加速: 兼容ios不支 ...
- 关于新版本,iOS10的相关内容,兼容iOS 10 资料整理笔记
1.Notification(通知) 自从Notification被引入之后,苹果就不断的更新优化,但这些更新优化只是小打小闹,直至现在iOS 10开始真正的进行大改重构,这让开发者也体会到UserN ...
随机推荐
- HDU 2795 Billboard 线段树,区间最大值,单点更新
Billboard Time Limit: 20000/8000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) Total ...
- UWP Listview 多选
最近在做一个项目的时候,用到了Listview,需要选择一个item,来进行删除. 但是当开启了 PullToRefreshListViewControl.IsMultiSelectCheckBoxE ...
- Java数据结构和算法(八)——递归
记得小时候经常讲的一个故事:从前有座山,山上有座庙,庙里有一个老和尚和一个小和尚,一天,老和尚给小和尚讲了一个故事,故事内容是“从前有座山,山上有座庙,庙里有一个老和尚和一个小和尚,一天,老和尚给小和 ...
- javascript设计模式——适配器模式
前面的话 适配器模式的作用是解决两个软件实体间的接口不兼容的问题.使用适配器模式之后,原本由于接口不兼容而不能工作的两个软件实体可以一起工作.适配器的别名是包装器(wrapper),这是一个相对简单的 ...
- Python的变量及简单数据类型
Python的变量及简单类型 1. 变量 在Python编程中,变量是用来存放值或对像的容器.变量的名称可以自定义,但需遵循一定的规范,否则可能会引发一些错误.Python的变量可以分为数字.字符和 ...
- Android注解方式实现表单校验
在开发中总会遇到输入框的输入规则限制 比如 电话输入框电话号码的校验,密码规则的校验等 ,我们通常做法是提交操作时对每个输入框的输入内容进行校验,很多的if else ,代码看起来很乱,其实我们可以用 ...
- Java内存模型—JMM
有时候编译器.处理器的优化会导致runtime与我们设想的不一样,为此Java对编译器和处理器做了一些限制,JAVA内存模型(JMM)将这些抽象出来,这样编写代码时就无需考虑那么多底层细节,并保证& ...
- hdoj 1285 确定比赛名次 【拓扑排序】
确定比赛名次 Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others) Total Sub ...
- iOS日历中给一个事件加入多个提醒
大熊猫猪·侯佩原创或翻译作品.欢迎转载,转载请注明出处. 假设认为写的不好请多提意见,假设认为不错请多多支持点赞.谢谢! hopy ;) iOS自带的日历应用中,我们最多仅仅能给一个事件设置2个提醒, ...
- [数字图像处理]常见噪声的分类与Matlab实现
1.研究噪声特性的必要性 本文的内容主要介绍了常见噪声的分类与其特性. 将噪声建模,然后用模型去实现各式各样的噪声. 实际生活中的各种照片的老化,都能够归结为下面老化模型. 这个模型非常easy,也能 ...