原生js实现文本滚动

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84

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>         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>

　　原生js实现文本滚动