说明. 实现文本内容的打字输入的动态效果,代码实现如下:
html:
<div class="hcontainer text-center flex-center" id="HotNews">
公司使命:服务国家战略、保障人民健康、引领行业发展
/div>
js效果实现:
<script LANGUAGE="JavaScript">
var NewsTime = 2000; //每条新闻的停留时间
var TextTime = 50; //新闻标题文字出现等待时间,越小越快
var newsi = 0;
var txti = 0;
var txttimer;
var newstimer;
var newstitle = new Array(); //新闻标题
newstitle[0] = "公司使命";
newstitle[1] = "服务国家战略、保障人民健康、引领行业发展";
function shownew()
{
var endstr = "_"
hwnewstr = newstitle[newsi];
if(txti==(hwnewstr.length-1)){endstr="";}
if(txti>=hwnewstr.length){
clearInterval(txttimer);
clearInterval(newstimer);
newsi++;
if(newsi>=newstitle.length){
newsi = 0
}
newstimer = setInterval("shownew()",NewsTime);
txti = 0;
return;
}
clearInterval(txttimer);
document.getElementById("HotNews").innerHTML = hwnewstr.substring(0,txti+1)+endstr;
txti++;
txttimer = setInterval("shownew()",TextTime);
}
shownew();
</script >
以上内容仅供参考,样式可以自行定义;