zoukankan      html  css  js  c++  java
  • js渐显文字 时间间隔

    文字指定时间间隔,逐渐显现所有文字。

    一日,看到一官网首页有个文字渐显,感觉和手写上去一样,很是炫酷。F12发现不是动画,于是研究了下。

    <!doctype html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>渐显</title>
    </head>
    <body>
    <div style="font-family:宋体" id="append"></div>
    <script>
        var append = document.getElementById("append");
       var str1 = '你好世界,世界那么大,我好想去看看!!';  //要显现的文字 var array1 = str1.split('');  //将文字切割成单个 console.log(array1); var timer = setInterval(jianbian, 300);  //设置时间间隔 循环周期为300毫秒,自行修改 ,每300毫秒执行一次jianbian方法 console.log(array1.length); var i = 0;
      //进入方法 function jianbian() {
         //循环完毕撤销时间器 if (i == array1.length) { clearInterval(timer); console.log('取消时间器'); } else {
           //依次追加文字 append.innerHTML += array1[i]; console.log(i + ':' + array1[i]); i++; } } </script> </body> </html>

      字体样式就不贴了。

    总结:多看别人写的东西,终会成就那样的人。

  • 相关阅读:
    在线预览Office文档
    花生壳内网穿透
    Net core跨域
    EF链表查询
    Python冒泡排序、选择排序、插入排序、希尔排序、归并排序
    竟然可以这样学python!
    如何使用python打印9乘9乘法口诀表?
    python爬取小视频
    —用python写PDF转换器
    从0到1搭建个人博客-Django(三)
  • 原文地址:https://www.cnblogs.com/yangchas/p/9275001.html
Copyright © 2011-2022 走看看