BOM【限时秒杀、计算器、计数】-CSDN博客

本文链接：https://blog.csdn.net/weixin_44892365/article/details/127590540

限时秒杀

<style>
    .box {
        color: red;
        margin: 20px auto;
        width: 700px;
        font-size: 30px;
    }
    span {
        font-size: 20px;
        display: inline-block;
        width: 50px;
        height: 50px;
        text-align: center;
        line-height: 50px;
        border: 1px solid black;
        margin: 0 5px;
    }
</style>
<body>
    <img src="./image/1.png" width="100%" alt="">
    <div class="box"></div>
</body>

<script>
    // 限时秒杀
    let end = new Date('2022-11-11')
    function getTime() {
        let start = new Date()
        let times = end - start
        if (times > 0) {
            var days = parseInt(times / 1000 / 60 / 60 / 24)
            days = days < 10 ? '0' + days : days
            var hours = parseInt(times / 1000 / 60 / 60 % 24)
            hours = hours < 10 ? '0' + hours : hours
            var minutes = parseInt(times / 1000 / 60 % 60)
            minutes = minutes < 10 ? '0' + minutes : minutes
            var seconds = parseInt(times / 1000 % 60)
            seconds = seconds < 10 ? '0' + seconds : seconds   
        }else{
            clearInterval(times)
            days = hours = minutes = seconds = '00'
        }
        let str = `距离本场秒杀结束还剩：<span>${days}天</span><span>${hours}时</span><span>${minutes}分</span><span>${seconds}秒</span>`
        let mydiv = document.querySelector('.box')
        mydiv.innerHTML = str
    }
    setInterval(getTime, 1000)
</script>

计算器

方法一：

<style>
    .bord {
        background-color: pink;
        margin: 30px auto;
        width: 400px;
        height: 150px;
    }
    input {
        width: 100px;
    }
    button {
        width: 66px;
        text-align: center;
    }
</style>

<body>
    <table border="1" class="bord">
        <tr style="line-height: 35px;font-size: 25px;font-weight: 700;">
            <td colspan="3">计算器</td>
        </tr>
        <tr>
            <td style="text-align: right;">第一个数</td>
            <td><input type="text" id="num1"></td>
            <td rowspan="3" style="text-align:center;">
                <button class="add">+</button><br>
                <button class="subtract">-</button><br>
                <button class="multiply">*</button><br>
                <button class="divide">/</button>
            </td>
        </tr>
        <tr>
            <td style="text-align: right;">第二个数</td>
            <td><input type="text" id="num2"></td>

        </tr>
        <tr>
            <td style="text-align: right;">计算结果</td>
            <td><input type="text" id="sum"></td>
        </tr>
    </table>
</body>

<script>
    // 2.简易计算器
    let num1 = document.querySelector('#num1')
    let num2 = document.querySelector('#num2')
    let sum = document.querySelector('#sum')

    let add = document.querySelector('.add')
    let subtract = document.querySelector('.subtract')
    let multiply = document.querySelector('.multiply')
    let divide = document.querySelector('.divide')

    add.addEventListener('click', function () {
        sum.value = (+num1.value) + (+num2.value)
    })
    subtract.addEventListener('click', function () {
        sum.value = num1.value - num2.value
    })
    multiply.addEventListener('click', function () {
        sum.value = num1.value * num2.value
    })
    divide.addEventListener('click', function () {
        sum.value = num1.value / num2.value
    })
</script>

方法二：

<body>
    <label for="">
        第一个数<input type="text" id="num1">
    </label>
    <br/>
    <label for="">
        第二个数<input type="text" id="num2">
    </label>
    <br/>
    <label for="">
        结果<input type="text" id="result">
    </label>
    <br/>
    <button onclick="getSum('+')">+</button>
    <button onclick="getSum('-')">-</button>
    <button onclick="getSum('*')">*</button>
    <button onclick="getSum('/')">/</button>
</body>

<script>
    function getSum(choose) {
        // 1.获取input控件
        let num1 = document.getElementById('num1')
        let num2 = document.getElementById('num2')
        let result = document.getElementById('result')
        // 2.计算结果
        switch (choose) {
            case '+':
                result.value = (+num1.value) + (+num2.value)
                break;
            case '-':
                result.value = num1.value - num2.value
                break;
            case '*':
                result.value = num1.value * num2.value
                break;
            case '/':
                if (num2.value != 0) {
                    result.value = num1.value / num2.value
                }else{
                    alert('除数不能为0')
                }
                break;
        }
    }
</script>

计数

方式一：

<body>
    <!-- 计数 -->
    <div class="box">
        <button class="btn_begin">开始计数</button>
        <input type="text" id="count">
        <button class="btn_stop">停止计数</button>
    </div>
</body>

<script>
    // 1.获取标签
    let begin = document.querySelector('.btn_begin')
    let my_input = document.querySelector('#count')
    let stop = document.querySelector('.btn_stop')
    let num = 0
    // 2.定时器
    var timer = null
    // 3.注册事件监听
    begin.addEventListener('click',getCount)
    function getCount() {
        timer = setInterval(function getNum(){
            count.value=num++
        },100) 
    }
    stop.addEventListener('click',gameOver)
    function gameOver(){
        clearInterval(timer)
    }
</script>

方式二：

<body>
    <button id="beginNum" onclick="startNum()">开始计数</button>
    <input type="text" id="count">
    <button id="stopNum" onclick="stopNum()">停止计数</button>
    <script>
        let begin = document.getElementById('beginNum')
        let my_input = document.getElementById('count')
        let end = document.getElementById('stopNum')
        let timer = null
        let num = 0
        function startNum() {
            timer = setInterval(function(){
                num++
                my_input.value = num
            },100)
        }
        function stopNum() {
            clearInterval(timer)
        }
    </script>
</body>