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>