js实现文字依次出现和展示当前时间【2021.10.9】_js 时间为今天时显示文字-CSDN博客

本文链接：https://blog.csdn.net/masierty/article/details/120664423

一、陌生方法的介绍

1.toLocaleTimeString() 方法可根据本地时间把 Date 对象的时间部分转换为字符串，并返回结果。

2.substring()方法提取字符串中介于两个指定下标之间的字符。返回的字符串包括开始处的字符，但不包括结束处的字符。

二、成品展示

三、源码展示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <title>移动优先</title>
    <style type="text/css">

    *{
        box-sizing: border-box;
        margin: 0;
        padding: 0;
    }
    html{
        height: 100%;
    }
    body{
        display: flex;
        flex-direction: column;
        height: 100%;
    }
    .wordBox{
        width: 100%;
        height: 50%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
    #word{
        text-align: center;
        font-size: 125%;
        font-weight: bold;
        line-height: 150%;
        display: none;
    }
    #showWord{
        text-align: center;
        font-size: 125%;
        font-weight: bold;
        line-height: 150%;
    }
    .slideBox{
        width: 100%;
        height: 50%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        background-color: rgb(165, 217, 241);
    }

    .slideBox #contentBox{
        width: 45%;
        min-height: 100px;
        height: 40%;
        min-height: 100px;
        border-radius: 50%;
        background-color: coral;
    }
    #contentBox{
        display: flex;
        justify-content: center;
        align-items: center;
        font-weight: bold;
    }
    @media (min-width:1200px) {
        .slideBox #contentBox{
        width: 20%;
        min-height: 100px;
        height: 50%;
        min-height: 100px;
        border-radius: 50%;
        background-color: coral;
    }
       .wordBox #showWord{
           font-size: 40px;
           font-family:inherit;
       }
    }
    </style>
</head>
<body>
    <div class="wordBox">
    <div id="word">你好！我是小萌新,欢迎认识!</div>
    <pre id="showWord"></pre>

    </div>
    
     <div class="slideBox">
         <p>当前时间:</p>
         <p id="demo"></p>
     <button onclick="myStopFunction()" id="timeButton">停止时间</button>
     </div>

</body>
<script>
    //时间start
let myVar = setInterval(function(){ myTimer() }, 1000);
function myTimer() {
    let d = new Date();
    let t = d.toLocaleTimeString();
    document.getElementById("demo").innerHTML = t;
}
function myScendTimer(){
    let d =new Date();
    let t = d.toLocaleTimeString();
    document.getElementById("demo").innerHTML = t;
}
function myStopFunction() {
    let click=0;
    click++;
    if (click%2==1){  
    clearInterval(myVar);
}
}
//时间end
//介绍start

var index=0;
var word=document.getElementById("word").innerHTML;
function type(){
    document.getElementById("showWord").innerText = word.substring(0,index++);
}
setInterval(type, 250);
</script>
</html>