关闭

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

标签: web前端浏览器兼容
668人阅读 评论(0) 收藏 举报
分类:
没想到一个小的定时器居然会卡了壳,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标签哦。


0
0

猜你在找
【直播】机器学习&数据挖掘7周实训--韦玮
【套餐】系统集成项目管理工程师顺利通关--徐朋
【直播】3小时掌握Docker最佳实战-徐西宁
【套餐】机器学习系列套餐(算法+实战)--唐宇迪
【直播】计算机视觉原理及实战--屈教授
【套餐】微信订阅号+服务号Java版 v2.0--翟东平
【直播】机器学习之矩阵--黄博士
【套餐】微信订阅号+服务号Java版 v2.0--翟东平
【直播】机器学习之凸优化--马博士
【套餐】Javascript 设计模式实战--曾亮
查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:46726次
    • 积分:821
    • 等级:
    • 排名:千里之外
    • 原创:36篇
    • 转载:6篇
    • 译文:0篇
    • 评论:0条