用户输入秒数(second)，可以自动转换为时分秒, 输出在页面的div和span标签中

最新推荐文章于 2023-09-05 13:26:26 发布

小熊崽崽cc

最新推荐文章于 2023-09-05 13:26:26 发布

阅读量457

点赞数 5

文章标签： css css3 javascript 前端 html

本文链接：https://blog.csdn.net/m0_51229018/article/details/127997614

版权


<!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">
    <title>Document</title>
    <style>
        div{
            width: 100px;
            height: 100px;
            background-color: red;
            color: #fff;
            text-align: center;
            line-height: 100px;
        }
    </style>
</head>

<body>
    <script>
        let second = +prompt('请你输入一个秒数')
        //  2.1声明函数 定义形参
        function getDate(date) {

            //         计算公式：计算时分秒
            //         小时：  h = parseInt(总秒数 / 60 / 60 % 24)
            let h = parseInt(date / 60 / 60 % 24)
            //         分钟：  m = parseInt(总秒数 / 60 % 60)
            let m = parseInt(date / 60 % 60)
            //         秒数: s = parseInt(总秒数 % 60)
            let s = parseInt(date % 60)
            /* 实现功能:①:?用户输入总秒数 （注意默认值）
                              ②:计算时分秒（封装函数）  里面包含数字补0
                              ③:打印输出在页面
            */
            // 2.3注意时间小于10,补0操作
            // if (h < 10) {
            //     h = '0' + h
            // }
            h = h < 10 ? '0' + h : h
            // if (m < 10) {
            //     m = '0' + m
            // }
            m = m < 10 ? '0' + m : m
            // if (s < 10) {
            //     s = '0' + s
            // }
            s = s < 10 ? '0' + s : s
            // 结果在外部输出
            // console.log(h,m,s);
            // return [h,m,s]
            return `${h}:${m}:${s}`
        }
        // 2.2调用函数 传递实参
        // getDate(second)
        // console.log(getDate(second));
        let val = getDate(second)
        document.write(`<div>${val}</div>`)

        // let age = 10
        // '0' + age
        // console.log(age);//10
    </script>
</body>

</html>