小型倒计时定时器:innerText的浏览器兼容问题

原创 2015年07月09日 10:21:26
没想到一个小的定时器居然会卡了壳,var seconds=50;
function clock(){
seconds--;//=seconds;
setText(document.getElementById('count-down'),seconds);
if(seconds>0) setTimeout(clock,1000);//alert(seconds);

}

这是一个很简单的函数,利用setTimeout写在clock函数内部并进行调用clock实现递归循环,从而达到定时器的功能,获取div内容(其id 为count-down),并根据seconds的变化给该div重新赋值,我们即可在屏幕上观察到时间的变化,可是这时出现了问题,

起初我用的是document.getElementById('count-down').innerText=seconds;结果在屏幕上时间并无变化,未达到所需效果,那么问题出现在哪里呢,我alert了一下document.getElementById('count-down').innerText==null,结果发现居然输出了true,要知道,我的div内容最开始赋的值就是50啊。

恩,有错误了,今天早上起来百度了一下innerText的用法,结果发现了问题,昨天我测试的环境是firefox,恰好innerText在firefox浏览器下是不支持的,它用textContent来替换innerText。于是,我把document.getElementById('count-down').innerText=seconds;替换成了setText(document.getElementById('count-down'),seconds);

而setText(element,content)则是自己定义的函数来达到兼容firefox浏览器的结果。

function setText(element,content)
{
   if(element.innerText)
   element.innerText=content;
else
  element.textContent=content;
}

恩,小小定时器搞定,当然在这里你要是用innerHTML是不存在问题的,因为innerHTML是去掉最外面的html标签而保留内部的html标签,而此时我们的div内部木有什么html标签哦。


浏览器兼容问题

  • 2017年08月18日 14:30
  • 40KB
  • 下载

浏览器兼容问题

  • 2012年05月19日 11:27
  • 1KB
  • 下载

Chrome firefox ie等浏览器空格( )兼容问题

使用( ;)空格浏览器之间,显示的不一样,对不起等现象。解决方案:用半角空格 或者全角空格 就可以了, 相当于半格中文字符的宽度, 相当于一个中文字符宽...

最全的CSS浏览器兼容问题

  • 2012年07月25日 15:51
  • 38KB
  • 下载

解决IE浏览器兼容问题

  • 2016年03月04日 13:47
  • 31KB
  • 下载

web开发中有关浏览器兼容问题及其解决方案的记录

在浏览器兼容之JavaScript篇——已在IE、FF、Chrome测试和浏览器兼容性问题解决方法,已在IE、FF、Chrome测试中已经对浏览器中存在的CSS的兼容性和JS的兼容性进行了简单说明,现...
  • AKAK714
  • AKAK714
  • 2015年09月24日 10:20
  • 347

CSS浏览器兼容问题

  • 2014年07月02日 16:20
  • 369KB
  • 下载

js的setAttribute中class和className浏览器兼容问题

前几天工作中遇到一个js问题,本来js就不大会,倒腾了好长时间,并在做弹窗的时候用到了setAttribute,出现了不兼容的问题,在网上查了好多,真是郁闷,看来啥都得学啊。     主要的工作是做...

最全的CSS浏览器兼容问题

  • 2009年11月02日 16:16
  • 78KB
  • 下载
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:小型倒计时定时器:innerText的浏览器兼容问题
举报原因:
原因补充:

(最多只允许输入30个字)