<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<title>文本滚动</title>
</head>
<body>
<div id="anews" class="anews">
<img src="喇叭.png"><!--普通图片，不影响最终显示-->
<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实现文本滚动
内容来源于网络如有侵权请私信删除
文章来源: 博客园
- 还没有人评论，欢迎说说您的想法！
客服
