模拟打字、跑马灯、展开收缩

最新推荐文章于 2024-01-01 14:56:48 发布

菲允龙歌

最新推荐文章于 2024-01-01 14:56:48 发布

阅读量235

点赞数

分类专栏：应用案例文章标签： js

本文链接：https://blog.csdn.net/Steve_Richard/article/details/100677862

版权

应用案例专栏收录该内容

23 篇文章 1 订阅

订阅专栏

模拟打字

<body>
    <p></p>
    <script>
        var str = '百度（纳斯达克：BIDU），全球最大的中文搜索引擎及最大的中文网站，全球领先的人工智能公司。百度愿景是：成为最懂用户，并能帮助人们成长的全球顶级高科技公司。“百度”二字，来自于八百年前南宋词人辛弃疾的一句词：众里寻他千百度。这句话描述了词人对理想的执着追求。1999年底，身在美国硅谷的李彦宏看到了中国互联网及中文搜索引擎服务的巨大发展潜力，抱着技术改变世界的梦想，他毅然辞掉硅谷的高薪工作，携搜索引擎专利技术，于 2000年1月1日在中关村创建了百度公司。百度拥有数万名研发工程师，这是中国乃至全球最为优秀的技术团队。这支队伍掌握着世界上最为先进的搜索引擎技术，使百度成为中国掌握世界尖端科学核心技术的中国高科技企业，也使中国成为美国、俄罗斯、和韩国之外，全球仅有的4个拥有搜索引擎核心技术的国家之一。'
        var p = document.querySelector('p');
        // var n = 0
        // var timer = setInterval(function(){
        //     p.innerHTML += str.charAt(n) 
        //     n++
        //     if(n>str.length){
        //         clearInterval(timer)
        //     }
        // },100)
        var n = 0
        setInterval(function(){
            n++
            p.innerHTML = str.substr(0,n)
        },100)
        //或者
        function write(){
            var count = -1
            var timer = setInterval(function(){
                count++
                if(count>=str.length){
                    clearInterval(timer)
                }
                str2 = str1.substr(count,1)
                console.log(str2)
                p.innerHTML += str2
                
            },1000)
        }
    </script>
</body>

跑马灯

<body>
    <span>愿有岁月可回首，且以深情共白头.</span>
    <script>
        var spans = document.querySelector('span')
        function fun(){
            var timer = setInterval(function(){
                var str = spans.innerHTML
                var qu = str.charAt(0)
                var liu = str.substring(1)
                var newstr = liu+qu
                spans.innerHTML = newstr 
            }, 1000);
        }
        fun()
    </script>
</body>

展开收缩

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {padding: 0;margin: 0;}
        div {width: 400px;border: 5px solid #999;padding: 20px;background-color: #fff;overflow: hidden;display: inline-block;}
        span {color: #00f;text-decoration: underline;position: relative;left: -50px;top: -10px;}
    </style>
</head>
<body>
    <div>
    </div>
    <span>展开</span>
    <script>
        var box = document.querySelector('div')
        var spans = document.querySelector('span')
        var str = '百度（纳斯达克：BIDU），全球最大的中文搜索引擎及最大的中文网站，全球领先的人工智能公司。百度愿景是：成为最懂用户，并能帮助人们成长的全球顶级高科技公司。“百度”二字，来自于八百年前南宋词人辛弃疾的一句词：众里寻他千百度。这句话描述了词人对理想的执着追求。1999年底，身在美国硅谷的李彦宏看到了中国互联网及中文搜索引擎服务的巨大发展潜力，抱着技术改变世界的梦想，他毅然辞掉硅谷的高薪工作，携搜索引擎专利技术，于 2000年1月1日在中关村创建了百度公司。百度拥有数万名研发工程师，这是中国乃至全球最为优秀的技术团队。这支队伍掌握着世界上最为先进的搜索引擎技术，使百度成为中国掌握世界尖端科学核心技术的中国高科技企业，也使中国成为美国、俄罗斯、和韩国之外，全球仅有的4个拥有搜索引擎核心技术的国家之一。'       
        function fn(x){
            var str1 = str.substr(0,x)
            console.log(str1)
            box.innerHTML = str1 
        }
        fn(45)
        var flag = true
        spans.onclick = function(){
            if(flag){
                fn(str.length)
                spans.innerHTML = '收起'
                flag = false
            }else{
                fn(20)
                spans.innerHTML = '展开'
                flag = true
            }
        }
    </script>
</body>
</html>