利用JavaScript分别实现倒计时、跑马灯和打字机效果_js 怎么实现马拉松倒计时功能-优快云博客

倒计时代码如下

<!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>
</head>
<body>
    <!-- 距离中午吃饭还有: -->
    <h1></h1>
    <script>
        //  结束的时间
        //  开始的时间
        var h1 = document.querySelector('h1')
        djs('2019,8,14 11:30:00','距离元旦:')
        function djs(t,str){
        var startDate = new Date();  //开始时间
        var endDate = new Date(t); //结束时间
        var times = endDate - startDate; // 相差的毫秒
        //  参照  1970年 1月1日  00:00:00
        
         var alltime = parseInt(times/1000);  // 
         var s = alltime%60
         var m = parseInt(alltime/60%60)
         var h = parseInt(alltime/60/60%24)
         var d = parseInt(alltime/60/60/24) 
        h1.innerText = str+bl(d)+'天'+bl(h)+'时'+bl(m)+'分'+bl(s)+'秒'
        //  console.log(d,h,m,s)
    }
    function bl(x){
        return x<10?"0"+x:x
    }
    setInterval(djs,1000,'2020,1,1 00:00:00','距离元旦:')
    
    </script>
</body>
</html>

跑马灯代码如下

<!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>
</head>
<body>
        <p id="d1">愿有岁月可回首，且以深情共白头.</p>
        <script>
           var d1 = document.getElementById('d1');
           
          
           setInterval(function(){
                var str = d1.innerText;
                var qu = str.charAt(0);
                var liu = str.substring(1);
                var newstr = liu+qu
                d1.innerText = newstr
                },500)
            
            
    </script>
</body>
</html>

打字机效果代码如下

<!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>
</head>
<body>
    <p></p>
    <script>
        var str = '哔哩哔哩（英文名称：bilibili，简称B站）现为国内领先的年轻人文化社区，该网站于2009年6月26日创建，被粉丝们亲切的称为“B站”。B站的特色是悬浮于视频上方的实时评论功能，爱好者称其为“弹幕”，这种独特的视频体验让基于互联网的弹幕能够超越时空限制，构建出一种奇妙的共时性的关系，形成一种虚拟的部落式观影氛围，让B站成为极具互动分享和二次创造的文化社区。B站目前也是众多网络热门词汇的发源地之一。'
        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)
        
    </script>
</body>
</html>