小型倒计时定时器:innerText的浏览器兼容问题
2015-07-09 10:21
281 查看
没想到一个小的定时器居然会卡了壳,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标签哦。
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标签哦。
相关文章推荐
- 简单运行Nginx + PHP
- Android批量图片加载经典系列——afinal框架实现图片的异步缓存加载
- RTMP协议抓包详解
- 查看Android系统给APP分配的最大堆栈
- clone DEMO(be aware of list mutability)
- 实现第三方锁屏
- Number of 1 Bits
- struct与class的区别
- VS2013 GDI+显示jpg
- [LeetCode][Java] Roman to Integer
- Redis 的数据结构
- [转载]在Vmware ESXI中安装群晖Synology DSM 5.0 (4528)
- 【Seajs源码分析】3. 工具方法2
- 流媒体协议地址获取 rtmp
- UML时序图---添加用户
- POJ 2187 Beauty Contest(凸包-Graham扫描法)
- C语言指针初探
- linux中用debugfs调试
- Eclipse开发JAVA程序
- 7月7日全球域名商(国际域名)解析量排行榜TOP20