- A+
所属分类：Web前端
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <title>文本滚动</title> </head> <body> <div id="anews" class="anews"> <img src="喇叭.png" alt="原生js实现文本滚动"><!--普通图片，不影响最终显示--> <span class="anews_txt" id="anews_txt"></span> </div> <script> window.onload=function(){ var anews_txt = document.getElementById("anews_txt") var txt = "观自在菩萨，行深般若波罗蜜多时，照见五蕴皆空，度一切苦厄，舍利子，色不异空，空不异色，色即是空，空即是色，受想行识，亦复如是，舍利子，是诸法空相，不生不灭，不垢不净，不增不减，是故空中无色，无受想行识，无眼耳鼻舌身意，无色声香味触法，无眼界，乃至无意识界，无无明，亦无无明尽，乃至无老死，亦无老死尽，无苦集灭道，无智亦无得，以无所得故，菩提萨埵，依般若波罗蜜多故，心无罣碍，无罣碍，故无有恐怖，远离颠倒梦想，究竟涅盘，三世诸佛，依般若波罗蜜多故，得阿耨多罗三藐三菩提，故知般若波罗蜜多，是大神咒，是大明咒，是无上咒，是无等等咒，能除一切苦，真实不虚，故说般若波罗蜜多咒，即说咒曰，揭谛揭谛，波罗揭谛，波罗僧揭谛，菩提萨婆诃。" const sleep = (delay) => new Promise((resolve) => setTimeout(resolve, delay)) const printf = async (i,len,t) => { //i为设置的文本/len为标签一行最多显示的字数/t为刷新时间，即下一个字出来的时间 anews_txt.style.setProperty('width', len+'em');//设置文本最大显示字符 anews_txt.style.setProperty('text-align', 'right');//实现一开始的文本从有往左 for(var q = 1, p = 0; q <= i.length+len; ){ await sleep(t) //如下是设置的文本长度大于单行最大显示的情况，即i+1 >= len //若i+1 < len文字则无法消失 anews_txt.innerHTML = i.substr(p,q) if(q >= len){ p++当前显示已达到目标，单行最大显示字数//起始字符向后退 anews_txt.style.setProperty('text-align', 'left'); } if(q <= i.length){ q++ } } } //第一个参数为String类型 //第二个参数为int类型的正整数 //第三个参数为int类型的正整数 //第三个参数越大文本移动速度越快 printf(txt,10,60) } </script> </body> <style> *{ margin: 0; padding: 0; z-index: 0; } .anews{ display: flex; } .anews_txt{ height: 1.5em; overflow: hidden; } </style>
</html>
原生js实现文本滚动
