移动端web页面倒计时 js 由于手机锁屏失效问题? 5C

这是一个web站点提供的倒计时页面。
程序思路:
setInterval("timer()", 1000)
function timer() {
//倒计时代码,并在页面显示
时间--;
}
问题:在PC端正常,但移动端用微信打开或者手机浏览打开,如果手机锁屏或者切换到其他app就会出现倒计时比预计的变慢了。
我的方案:1.使用异步去时时判断现在的倒计时是否正常,但这样不好;
2.网上仅找到一个,就是使用visibilityChange监听页面是否被查看
:代码大概如下
document.addEventListener(visibilityChange, function () {
$("#newswell").append("change")
}, false);
结果:第二个方案,尝试了没有效果,很失望,手机锁屏或者切换页面 该事件都没有反应。

求大神指点啊╮(╯▽╰)╭

2

1个回答

锁屏了程序暂停了所以不执行,除非放在后台任务用websocket

0
TANG280475239
小砂子 我不懂websocket,我就是一个手机调用网站的网页,像我这样还能怎么处理吗?或者还有我没考虑到的js事件可以支持来解决问题?
大约 4 年之前 回复
Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
其他相关推荐
解决web倒计时在IOS手机失效
//起始时间,格式为yyyy-MM-DD hh:mm:ssn  var starttime = "2017-10-20 10:20:10";n//将时间转为yyyy/MM/DD hh:mm:ss 格式,若起始时间为此格式,忽略n    starttime = new Date(starttime.replace(/-/g, "/"));n//获取网络时间n    var nowtimeS
手机锁屏后js倒计时停止问题
n n n 在开发过程中发现到我们锁屏或切到后台以后,h5界面写的js倒计时停止,不想通过原生监听,解决此问题尝试方法如下1、h5自带属性,检测当前页面状态document.hiddendocument.mozHiddendocument.msHiddendocument.webkitHidden为当前document添加监听addEventListener经测试发现...
解决ios的app内H5页面倒计时在锁屏后停止或延迟的解决方案
解决ios的app内H5页面倒计时在锁屏后停止或延迟的解决方案
js worker 解决移动端定时器锁屏后不继续执行的问题
一直知道在js里面使用计时器会阻塞ui渲染,并且在移动端锁屏后计时器不会继续执行。网络上常用的思路是启动定时器时记录当前时间,当锁屏进来后通过当前时间和记录时间对比去解决锁屏后不继续执行的问题,个人觉得这种解决办法不优雅。  最近看了关于worker的知识,就想着用worker写是不是能解决这个问题,试了试,还真行,代码附上。nworker.jsnfunction timeout(time)
移动端息屏定时器暂停问题
我我的业务逻辑里 直接再列表方法里加一个 如下的代码片段document.addEventListener('webkitvisibilitychange',function()n{n if(document.webkitVisibilityState=='hidden')n {n n }elsen {n //再这里再调用一遍获取列表的方法n ...
GCD定时器解决后台、锁屏时,定时器失效问题
n n n 前言:n我们常用的定时器有三种,本文主要介绍通过GCD定时器解决定时器进入后台、锁屏时无效的问题。看到很多其他的方法,比如直接使用GCD再加上进入后台时间段的方法(在模拟器可以,在真机测试无效);设置后台常驻然后使用GCD方法(繁琐,而且有被拒绝风险);利用远程线控,在AppDelegate中监听并发送通知的方法(如果你的手机正在播放音乐,打开你的这个ap...
手机灭屏,js定时器停止计算
解决手机灭屏js定时器不计算的问题
解决ios下后台运行与锁屏时倒计时停止问题
ios里在后台或者锁屏时js会停止运行,倒计时之类的场景会停止执行,这个就是解决这样的问题
手机版倒计时问题 + 伪异步
rn倒计时:rn手机倒计时会有两个问题:rn1、返回到倒计时页面时,倒计时不是最新的rn2、锁屏后,再打开,倒计时不是最新的rn rn经校验发现,后退时,Jquery的该方法都会执行,因此可解决问题1.rn$(function(){rn rn});rn rn rn第一方案rn会有问题:后退更新,锁屏不更新rn$(function(){ rn $.get('/auction/getTimeCount...
iphone休眠模式下,js定时器无法执行
一、问题现象:n    一个H5项目中,需要在页面中显示倒计时信息。然后发现在iphone、ipad中,锁屏一段时间后再打开,锁屏那段时间并没有倒计时。代码如下:nfunction throttle(method, context) {n clearTimeout(method.tId);n method.tId = setTimeout(function () {n method.
关于移动端浏览器定时器后台停止运行的问题
关于移动端浏览器定时器后台停止运行的问题今天在做微信浏览器端的商城项目的时候遇到了一个问题,具体场景是这样的:在页面添加了一个定时器,某项数据每秒递减,当手机锁屏或者后台运行时再返回页面,发现定时器在后台运行时停止了,返回才继续开始运行。解决方法: n这里我是用的是一个H5的一个PageVisibility API,在这里,我们可以得到两个属性及其参数,用来表示当前页面是否可见:ndocument.
ios 倒计时在退出应用出现js暂停状态(没有执行),完美解决方式
ios的这个应用退出,js不执行的bug看了好多人写的都有误差,和偏差不是很正确,这个是优化后的nnsend_verify_code(){ // 验证码倒计时nn       this.count=60;//60s倒计时nn       this.show_timer=false;//显示文字状态nn       this.timerCodeMsg=this.count+' s';//赋值60sn...
前端开发 移动端浏览器页面倒计时在浏览器后台运行时的bug及解决办法
首先,移动端浏览器在后台运行或手机黑屏的情况下页面js是不会执行的,在页面有倒计时的情况下问题就出现了,中间离开这段时间的时间差要怎么计算呢?其实这个问题也是很简单,之前钻到牛角尖,非要监听一个浏览器离开事件,记录当前时间,然后在浏览器在打开的时候记录当前时间,这样这个时间差就算出来了,好像没什么问题。但在写的过程中发现这个事件根本没用, 网上查了很多资料,也都是这种写法,所以就换一种思路。1.记...
h5页面切换到后台再返回 js 定时器时间不准确解决方法
这两天做迭代任务遇到了一个难题,现在找到了解决方法,为了避免忘记,在这里记录下来。nn项目描述:一个基于vue写的h5页面,根据后端返回的当前服务器时间做一个倒计时(我是用setInterval做的)。该h5页面分别嵌套到微信公众号,和原生app中。nn nn问题描述:使用home键把页面切到后台运行,倒计时就暂停了,再切回到前台运行回去看倒计时,时间不准确(具体表现为:切出之前是20:20:20...
js倒计时在移动端的应用(Android与ios获取时间的区别)
//在安卓上这样写可以获取到的nnvar date = '2018-08-29 17:50:13';nvar time = new Date(date).getTime();nn//但在苹果手机上是不支持的,必须这样写:nvar time = new Date(date.replace(/-/g,'/')).getTime();nnn/**n * 短信/邮件倒计时插件n * @param {} c...
js倒计时(天,时,分,秒),适用于web和移动端
js倒计时(天,时,分,秒),适用于web和移动端
移动端倒计时显示NaN,以及倒计时
NaN解决方法n倒计时
解决ios倒计时失效问题(分别用setTimeout和setInterval实现)
项目中使用倒计时效果,具体实现如下:n //使用的数据(获取的是时间戳):systemTime=1554384835539 createtime=1554384824000n let now = new Date(datamsg.systemTime).getTime();n let start = new Date(datamsg.createtime).getTime();n...
IOS微信后台运行时候倒计时暂停问题
链接:https://pan.baidu.com/s/1i7cSkqL 密码:g80irnrn  最近给央视做了个H5答题游戏,但在倒计时上遇到一个终端问题:手机端按Home键将微信收入后台之后,IOS11 会继续跑JS五秒钟,注意是5秒,也就是倒计时9的时候收到后台,等1分钟再打开,JS会从4开始倒计时。 听说IOS6的时候能跑10分钟,IOS7有3分钟,IOS11只有5秒....但TM就是个B
手机网页js计时器在浏览器处于后台的时候被冷冻的问题。
如果在一个网页上做一个计时器,最简单的方法就是载入网页的时候服务器给一个基础时间,然后网页端用js一秒一秒的加时间,并显示。在PC上一般是没问题的,但是在手机上就大大有问题,因为当手机浏览器切到后台的时候,js是不会继续计时的,一段时间后,再切回浏览器的时候,计时只会从刚才被切出去的时候继续计时。而中间切出去的时间则没法计量。n有一个很简单的办法可以解决这个问题,那就是调用手机自己的时间。页面载
前端页面在手机浏览器显示时锚点失效的解决
前端第三方的弹窗控件,点击弹窗的关闭按钮时,有一个锚点的跳转:nlocation.hash="tag";n但是这个效果只在PC上调试生效,在手机浏览器上,能看到地址栏里有#tag,但是页面没有跳转到指定的位置。n尝试了其他的跳转方式,比如:ndocument.getElementById('tag').scrollIntoView()都是不能跳转到指定的锚点。n注意到在点击完关闭按钮后,
手机页面在弹出输入法时变形的解决方法
n n n 之前做公司的一个页面,需要输入用户手机号,页面做的比较漂亮。为了适配多个屏幕,我使用了百分比确定各部分大小。但是发布之后遇到一个问题:在点击手机号输入框时,手机页面出现变形。n细想之后就明白是因为使用百分比的原因,输入法框弹出之后,手机页面大小被挤压,于是使用百分比确定大小的元素也被挤压造成变形。于是可以考虑不使用百分比,如果在元素外围加一个固定高度的框,...
教你一招解决手机锁屏
里面包含具体的解屏,锁屏代码逻辑和app下载即可。绝对管用,如果对你有帮助记得好评哦。
移动端,纯JS手写的倒计时、日期等时间!!部分手机显示NAN问题?
1.首先我们要明确NAN是啥?为啥出现的这个?NaN 属性是代表非数字值的特殊值。该属性用于指示某个值不是数字。2.既然知道NAN,那到底哪里会出现的这个?仔细走一遍倒计时会发现new Date('2018-06-18 14:58:32')在IOS上是拿不到时间戳的,部分安卓手机也是NAN的。查自资料发现原来是低版本的Safari解释new Date('2013-10-21')这个对象不一样,在I...
iOS锁屏或者后台时计时器停止计时解决方法
n n n 当我们在项目中需要使用计时器计时时,往往会碰到当程序进入后台时,计时器就会暂时停止,当重新进入程序时,计时器又会重新开始,然而我们需要在程序进入后台时,计时器依然能够计时,所以,就使用到了一种解决方案,利用进入后台和前台的时间差来让计时器完美计时。n首先在AppDelegate.m中,我们需要在以下两个方法添加相应通知n//当程序进入后台的时候调用nn- ...
移动端后台预加载HTML页面,setTimeout定时器线程跑完问题
在兼容IOS8的时候遇到一个有趣的问题:nnIOS预加载了页面,在页面中我写入了一个setTimeout(差容、缓冲的作用),其作用是为了兼容老版本的设备无Hybird交互仍然能使用功能。nn结果发现,页面后台加载完,计时器线程便开始跑了,这让我满头黑线nn于是我加入的setInterval、documen.hidden(页面前台状态为false,后台状态为true),让它每隔2秒检测一次情况nn...
sessionStorage在移动端的问题
今天在做响应式页面的时候碰到的一个问题,就是在移动端sessionStorage失效了,我用的是vivo自带的浏览器,出现了null。然后我又在电脑浏览器中尝试,没有问题,我又用微信自带的浏览器打开页面,也显示正常,初步判断是某些浏览器对sessionStorage不支持,然后查了一些资料后,发现并不是浏览器不支持sessionStorage,移动端某些浏览器存在着切换页面时关闭原页面,再重新打开...
js 实现倒计时功能,兼容ios,类似京东
效果nnnnhtmlnn<div class="weui-cell count_down">n <div class="weui-cell__bd">n <p>秒杀中,抢到就是赚到</p>n </div>n <div class="weui-cell__ft"&amp
移动端html的overflow:hidden属性失效问题
移动端html的overflow:hidden属性失效问题这第一次做手机端网页,在交付测试的时候发现一个问题, n就是body的宽度,我设置了overflow:hidden,在谷歌调试的时候确实是不能滑动的,但是在手机端测试的时候发现,overflow:hidden是失效的。就是说,页面是也可以左右摇晃的,延展出去的部分会被扯来扯去= = n后来查阅了一些资料,了解到这是由于移动端的web内核不同意
h5 ios 切入后台运行倒计时问题
实操解决ios切入后台倒计时不在执行nnios的后台为虚拟后台,当把正在运行的程序切入后台时,逻辑不在执行。但是项目中包含着倒计时,切入后台时倒计时也不再执行,这就导致切入后台的程序,再次运行时倒计时的时间对不上! n处理这个问题前,进入了一个误区,就是想着去监听运行的程序被切入到后台,但都以失败告终。nn于是想了一下能不能做一个标记,把这个标记作为一个时间的节点去执行,应该拿什么去做标记??程序...
关于修改Android7.0 SystemUI锁屏4种解锁失败等待时间规则
不积跬步无以至千里nn       本文讲解前三种解锁的实现,指纹由下一篇来讲解。nn主要需要有两点nn1、每次都有5次解锁。nn2、随着尝试次数的增加,时间增长。nn3、关机重启后仍然能计算时间。(指纹解锁不需要)nn前摘nn       修改这4种解锁方式是:Pin码解锁、密码解锁、图案解锁和指纹解锁,修改解锁失败的等待时间?做过SystemUI相关模块都知道解锁这一块的验证密码等等操作一般是...
android休眠之后 定时任务TimerTask不生效
本人也是安卓菜鸟一枚,入行不久,公司需要实现一个功能: 就是没有连接电源,黑屏(休眠)之后倒计时20分钟之后让机器关机。当时我就觉得也不是很难,我再Luancher中rn可以注册动态广播监测到黑屏的操作,然后加入一个判断标志看是否连接了电源,然后执行倒计时任务就ok了。谁知道休眠之后,居然计时任务不生效了。我弄了很久才发现。后来就百度啊,然后找到了wakeLock,把延迟任务放入wakeLock中
移动端web页面开发中遇到的三个“小坑”
目前自己接触的移动端项目很有限,所以发现的坑不是那么多,暂时只记录下最近在解决的“小坑”。nnnnnn二、mate标签不可或缺nnnnnnn三、浏览器默认的某些
移动端Web页面常见问题与解决方案(yuyan)
一、meta标签nn1、利用meta标签对viewport进行控制nn<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no"/>nn如果你不这样的设定的话,那就会使用那个比屏幕宽的默认viewport,也就是说会出现横向滚动条。nnWi...
app里h5用js倒计时 切换到后台倒计时暂停的问题
偶然做个项目发现了这个问题网上看了几个解决方案 都不理想,有的是用vue的 ,我想找个原生js 都能解决的.最后自己结合这别人的思路做了一个很简单的方法解决了nnn document.addEventListener("visibilitychange", function(){n n if(document.hidden){n //这里写切换到后台...
clipboard.js移动端无法实现复制
clipboard.js简介:实现了纯 JavaScript (无 Flash)的浏览器内容复制到系统剪贴板的功能。n在项目中使用clipboard.js插件去实现点击按钮,复制文字到剪切板的功能。同样的代码,在PC可以实现正常复制但是在移动端却失效n主要是因为移动端项目为了防止用户长按文本实现复制,一般在重置reset.css里面都会设置ndiv, p, a, ul, li, ol, h1, h...
js的setTimeout方法小记(倒计时失效)
setTimeout(para1, para2)可以传入两个参数,第一个参数是倒计时结束后要执行的方法,第二个参数是倒计时总时长。nnnfunction executeSomthing() {n // do somethingn console.log(do something);n}nnsetTimeout(executeSomething(), 10000);nn// 会发现程序运...
iOS倒计时设计思路和一个系统时间的坑
个人知识点记录,仅供参考nn1.用GCD定时器更准确 n2.当前时间要用服务器时间 n3.如何考虑手机锁屏线程休眠 n4.如何做到tableViewCell里面放倒计时 n5.到期时间不变,当前时间在变,主要操作的是这个差值 nnnnnnnDemo分析nn1.创建GCD定时器 Demo用NSDate来模拟服务器当前时间nnnn@property (nonatomic,strong) dispatc...
移动端click失效的问题
解决办法有 5种可供选择:n​1、将 click 事件直接绑定到目标​元素(​​即 .target)上nn2、将目标​元素换成 a 或者 button 等可点击的​元素n​3、将 click 事件委托到​​​​​非 document 或 body 的​​父级元素上n​4、给​目标元素加一条样式规则 cursor: pointer;n​5、nnn$.each($(".pt_ARL_box_aside...
移动端web开发调试工具——Vorlon.JS上手教程
问题提出:nn在移动端页面的日常开发中常常会碰到这样一个问题,页面在Chrome的Device模式下显示正常,但在移动端浏览器或者内嵌到APP里就会出现样式问题或者Js代码问题,但是移动端上没有类似Chrome的开发者调试工具,只能通过尝试修改,重复发布版本来检查问题,或者写一大堆alert弹窗来调试。这种方法不但繁琐,而且收效甚微。nnnn解决方案:nnVorlon.js可以帮助开发者加载、检查...
文章热词 机器学习教程 Objective-C培训 交互设计视频教程 颜色模型 设计制作学习
相关热词 mysql关联查询两次本表 native底部 react extjs glyph 图标 手机web页面教程视频 web页面制作教程