js文字一个个出现有html代码的话怎么解决呢

qingwadaxia_1 2017-11-02 04:01:37
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div class="call"><i id="ggewz"></i></div>
<div id="cccv">电话垂询:<div class="aaxz"><span>1111-1111111</span></div></div>
<script>
var ggewz = document.getElementById("ggewz");
var cccv = document.getElementById("cccv");
var time = null;
var num = 0;
time =setInterval(function(){
ggewz.innerHTML = cccv.innerHTML.substring(0,num++);
},30);
</script>
</body>
</html>
其实只要在页面上打印:电话垂询:1111-1111111
但是这里面包含:<div class="aaxz"><span></span></div>
这些html代码

虽然最终显示效果是文字,但是html代码还是会有个打印的动作出来,如何一个个打印的时候,过滤掉html代码,但是又可以让他打印出现的文字具备html代码的显示效果呢

比如,我的文字 是加了红颜色的, 我不希望打印<span style="color:#f00;"> 但是却能让它具备红色这个效果

不知道我这样说是不是很复杂
...全文
325 5 点赞 打赏 收藏 举报
写回复
5 条回复
切换为时间正序
当前发帖距今超过3年,不再开放新的回复
发表回复
天际的海浪 2017-11-02

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <title>Document</title>
 </head>
 <body>
  <div class="call"><i id="ggewz"></i></div>
		<div id="cccv"><span style="color: #0f0;">电话垂询:</span><div class="aaxz"><span style="color: #f00;">1111</span>-<span style="color: #00f;">1111111</span></div></div>
		<script>
	var ggewz = document.getElementById("ggewz");
	var cccv = document.getElementById("cccv");
	var time = null;
	var num = 0;
	time =setInterval(function(){
		var str1 = cccv.innerHTML.match(new RegExp("((<.+?>|[\r\n])*[^<>]?){"+(num++)+"}"))[0];
		var str2 = cccv.innerHTML.slice(str1.length).replace(/((<.+?>)*)[^<>]?/g,"$1");
		ggewz.innerHTML = str1+str2;
	},100);
</script>
 </body>
</html>

  • 打赏
  • 举报
回复
天际的海浪 2017-11-02
用innerText 的话,里面的html标签样式不都没有了,应该用正则表达式过滤字符吧
  • 打赏
  • 举报
回复
当作看不见 2017-11-02
我可以很负责的告诉你,没有兼容性问题, 但这绝对不是唯一且最好的解决方案,只是一个比较简单和便于理解的解决方案.
  • 打赏
  • 举报
回复
qingwadaxia_1 2017-11-02
引用 1 楼 qq_29594393 的回复:
不是很复杂,就是不要用html 插入,改为先设置样式,再插入文本text,

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <title>Document</title>
 </head>
 <style type="text/css">
 	#ggewz{
 		color: red;
 	}
 </style>
 <body>
  <div class="call"><i id="ggewz"></i></div>
<div id="cccv">电话垂询:<div class="aaxz"><span>1111-1111111</span></div></div>
<script>
var ggewz = document.getElementById("ggewz");
var cccv = document.getElementById("cccv");
var time = null;
var num = 0;
time =setInterval(function(){
ggewz.innerText = cccv.innerText.substring(0,num++);
},30);
</script>
 </body>
</html>
innerText确实使用这个 不会在打印的时候 打印html的动作,只是这个好像是有兼容问题吗 这是唯一且最好的解决方法吗
  • 打赏
  • 举报
回复
当作看不见 2017-11-02
不是很复杂,就是不要用html 插入,改为先设置样式,再插入文本text,

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <title>Document</title>
 </head>
 <style type="text/css">
 	#ggewz{
 		color: red;
 	}
 </style>
 <body>
  <div class="call"><i id="ggewz"></i></div>
<div id="cccv">电话垂询:<div class="aaxz"><span>1111-1111111</span></div></div>
<script>
var ggewz = document.getElementById("ggewz");
var cccv = document.getElementById("cccv");
var time = null;
var num = 0;
time =setInterval(function(){
ggewz.innerText = cccv.innerText.substring(0,num++);
},30);
</script>
 </body>
</html>
  • 打赏
  • 举报
回复
相关推荐
发帖
JavaScript
加入

8.5w+

社区成员

Web 开发 JavaScript
申请成为版主
帖子事件
创建了帖子
2017-11-02 04:01
社区公告
暂无公告