• js写滚动的文字


    页面中的文字,逐个显示在页面;由于电脑的配置较低,录制的视频相对来说比较卡顿

    思路:

    用一个定时器将预制的文字通过字符串截取.substring(0, i)方法不断的赋给要显示的区域,i在定时器里面迭代累加,当预制的文字跟显示区的文字相同时,清除定时器。

    代码

     1 <!DOCTYPE html>
     2 <html lang="en">
     3 <head>
     4     <meta charset="UTF-8">
     5     <title>动起来的文字</title>
     6     <style>
     7         .page{
     8              500px;
     9         }
    10 
    11     </style>
    12     <script type="text/javascript" src="js/tween.js"></script>
    13     <script type="text/javascript" src="js/animation.js"></script>
    14 </head>
    15 <body>
    16 <div class="page">
    17     <h1 class="page2-title">公司介绍</h1>
    18     <p class="li-none" id="page2Txt">
    19     深圳达农保险经纪有限公司成立于2016年5月,总部设立于深圳,立足打造农村互联网保险平台,首期注册资本5000万人民币,是诺普信农化股份有限公司控股的保险经纪服务商。达农保险将一直秉持“保险基于需求”的理念,以国家农业现代化的发展趋势为导向,积极发挥保险经纪金融工具的特有优势,以创新的模式,深入三农,为农业的现代化发展提供保障。展望未来,达农保险将以金融手段持续附着产业共同发展。
    20     </p>
    21     <div class="el-page2 li-none">
    22         
    23         <p class="fenge-solid"></p>
    24         <p class="page2-txt" id="page2TxtShow"></p>
    25     </div>
    26 </div>
    27 <script>
    28     var page2Txt = document.getElementById('page2Txt'),
    29     page2TxtShow = document.getElementById('page2TxtShow'),
    30     i = 0;
    31     /*timer = setInterval(function(){
    32         page2TxtShow.innerHTML = page2Txt.innerHTML.substring(0, i);
    33         i++;
    34         if(page2TxtShow.innerHTML == page2Txt.innerHTML){
    35             clearInterval(timer);
    36         };
    37     },60);*/
    38     var timer = null;
    39     timer = setInterval(function(){
    40         page2TxtShow.innerHTML = page2Txt.innerHTML.substring(0,i);
    41         i++;
    42         if (page2TxtShow.innerHTML == page2Txt.innerHTML) {
    43             clearInterval(timer);
    44         }
    45     },100);
    46 /*Math.animation(document.documentElement.scrollTop, 0, function (value) {
    47     document.documentElement.scrollTop = value;
    48 }, 'Quart.easeOut', 600);*/
    49 </script>
    50 </body>
    51 </html>

    关于String 对象的知识点总结:

    substring() 方法

    定义与用法:

    substring() 方法用于提取字符串中介于两个指定下标之间的字符。

    语法:stringObject.substring(start,stop)

    返回值

    一个新的字符串,该字符串值包含 stringObject 的一个子字符串,其内容是从 start 处到 stop-1 处的所有字符,其长度为 stop 减 start

    注意:substring() 方法返回的子串包括 start 处的字符,但不包括 stop 处的字符。与 slice() 和 substr() 方法不同的是,substring() 不接受负的参数。其用法类似

        如果参数 start 与 stop 相等,那么该方法返回的就是一个空串(即长度为 0 的字符串)

    //eg.script中的代码
        var str="Hello world!"
        document.write(str.substring(3,7))
    

    slice() 方法

      substr() 方法与slice()方法类似

    String常用方法

    使用说明可通过w3c school 查询

  • 相关阅读:
    响应式页面@media介绍和移动端单位介绍
    jQuery的位置信息和事件
    jQuery的文档操作和操作input的value值,ajax
    jQuery的选择器和属性操作
    虚拟机linux桥接联网问题
    Linux基础知识与命令1(su passwd)
    操作系统基础知识笔记1
    Algs4-2.3.10快排100万元素对比次数超1000亿次的概率
    Algs4-2.3.9请说明Quick.sort()在处理只有两种、三种主键值时的行为
    Algs4-2.3.8Quick.sort()在处理N个全部重复的元素时比较次数
  • 原文地址:https://www.cnblogs.com/lvxisha/p/9743265.html
Copyright © 2020-2023  润新知