<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<title>文本滚动</title>
</head>
<body>
<div style="display:flex;">
<span 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');
if(i.length + 1 < len){
len = i.length + 1
}
//如下是设置的文本长度大于单行最大显示的情况，即i.length + 1 >= len
for(var q = 1, p = 0; p < q; ){
await sleep(t)
anews_txt.innerHTML = i.substr(p,q)
if(q >= len){//当前显示已达到目标，单行最大显示字数//起始字符向后退
p++
if(q == len){
anews_txt.style.setProperty('text-align', 'left');
}
}
if(q <= i.length){//q尚未成为字符串最后一位
q++
}
}
}
//第一个参数为:需要滚动的长文本
//第二个参数为:最多同时显示的字数
//第三个参数为:滚动速度，值越小速度越快
printf(txt,10,60)
}
</script>
</body>
<style>
#anews_txt{
height: 1.5em;
overflow: hidden;
}
</style>
</html>
原生JS实现文本滚动效果
最新推荐文章于 2023-05-13 09:45:26 发布
691
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
