【Web】0基础学Web—随机颜色、数学对象、日期及方法、定时器、倒计时-优快云博客

本文链接：https://blog.youkuaiyun.com/2201_75539182/article/details/144402137

0基础学Web—随机颜色、数学对象、日期及方法、定时器、倒计时

随机颜色
数学对象
日期及方法
定时器
倒计时
- css
- js

随机颜色

点击div时，随机改变div背景颜色

<body>
    <div class="wrapper" onclick="changebgColor()"></div>
    <script>
        //改变背景颜色
        function changebgColor() {
            //获取wrapper
            let _wrapper = document.querySelector('.wrapper')
            //修改背景颜色
            _wrapper.style.backgroundColor = randomColor()

        }
        function randomColor() {
            //rgb(0-255,0-255,0-255)
            let r = parseInt(Math.random() * 256)
            let g = parseInt(Math.random() * 256)
            let b = parseInt(Math.random() * 256)
            return `rgb(${r},${g},${b})`
        }
    </script>
</body>

数学对象

<script>
<script>
    console.log(Math.PI)  //3.141592653589793
    console.log(Math.abs(-1)) //1  绝对值
    console.log(Math.ceil(2.0001)) //3  向上取整
    console.log(Math.floor(2.999))  //2  向下取整
    console.log(Math.round(4.45))  //5  四舍五入取整
    console.log(Math.max(4, 8, 2)) //8   最大值
    console.log(Math.min(4, 8, 2))  //2   最小值
    console.log(Math.sqrt(9))  //3  开平方
    console.log(Math.pow(2, 3))  //8  幂次方
    console.log(Math.random())  //随机[0-1)小数
    console.log(parseInt(Math.random() * 11))  //随机[0-10]小数
    console.log(parseInt(Math.random() * 11) + 5)  //随机[5-15]小数
    console.log(parseInt(Math.random() * 19) + 8)  //随机[8-26]小数
    //随机[m,n] parseInt(Math.random()*(m-n+1))+m
    //保留位数
    let a = 2.235
    console.log(a.toFixed(1)) //'2.2'
</script>
</script>

日期及方法

<script>
let date1 = new Date()  //当前时间
console.log(date1)
let date = new Date('2023-6-8 15:20:12')  //自定义时间
console.log(date)  //Thu Jun 08 2023 15:20:12 GMT+0800
//  时间 => 格式化日期
//格式化当前时间
var fd = moment().format('YYYY-MM-DD hh:mm:ss'); // 输出例如 "2023-04-10"
console.log(fd)  //2024-12-04 11:04:52
//格式化自定义时间
var fd = moment('2023-06-08 15:20:12').format('YYYY-MM-DD hh:mm:ss'); // 输出例如 "2023-04-10"
console.log(fd,'+++++++++++')  //2023-06-08 03:20:12
function formatMilliseconds(ms) {
    // 创建一个Date对象
    let date = new Date(ms);
    // 获取年、月、日、时、分、秒
    let year = date.getFullYear();
    let month = String(date.getMonth() + 1).padStart(2, '0'); // 月份从0开始，需要+1
    let day = String(date.getDate()).padStart(2, '0');
    let hours = String(date.getHours()).padStart(2, '0');
    let minutes = String(date.getMinutes()).padStart(2, '0');
    let seconds = String(date.getSeconds()).padStart(2, '0');
    // 格式化并返回字符串
    return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
}
// 示例用法
let milliseconds = 1633072800000; // 这是一个示例的毫秒数，代表某个具体的日期和时间
let formattedDate = formatMilliseconds(milliseconds);
console.log(formattedDate); // 输出：2021-10-01 00:00:00      


let date = new Date()
console.log(date.getFullYear()) //2024
console.log(date.getMonth()+1+'月')  //11  0-11
console.log(date.getDate())   //4
console.log(date.getDay())    //3 星期日为0
console.log(date.getHours())   //14点
console.log(date.getMinutes())   //15分
console.log(date.getSeconds()) //32秒
console.log(date.getMilliseconds()) //955毫秒
//1970-至今的秒数
console.log(date.getTime()) //1733292972998 秒 
console.log(date.toLocaleDateString()) //2024/12/4
console.log(date.toLocaleTimeString()) //14:17:24
console.log(date.toLocaleString()) //2024/12/4 14:18:08       
</script>

定时器

<body>
    <div class="wrapper"></div>
    <script>
        //计时器，间隔执行
        // id=setInterval('执行函数',间隔时间毫秒)
        let id = setInterval(() => {
            let date = new Date()
            let _wrapper = document.querySelector('.wrapper')
            //动态设置标签内容
            _wrapper.innerHTML = date.toLocaleString()

        }, 1000)

        console.log(id)  //1

        //定时器，设置执行的延迟时间
        let id2 = setTimeout(() => {
            console.log('你好')
        }, 2000)
        console.log(id2)



    </script>
</body>

倒计时

css

<style>
        button {
            width: 150px;
            height: 40px;
            font-size: 18px;
            text-align: center;
            border: none;
            background-color: orange;
            color: white;
            border-radius: 20px;
            box-shadow: 2px 2px 2px gray;
            font-family: 黑体;
            font-weight: 600;
        }

        .a {
            width: 150px;
            height: 40px;
            color: blue;
            display: none;
            text-align: center;
            line-height: 40px;
        }
    </style>

js

<body>
    <div class="wrapper">10</div>
    <div class="active"></div>
    <button onclick="setTimer()">发送验证码</button>
    <div class="a" onclick="setTimer()">重新发送</div>
    <script>
        const btn = document.querySelector('button')
        //距离双12倒计时
        let _active = document.querySelector('.active')
        let date = new Date('2024-12-12 00:00:00')
        function timer() {
            let s = date - new Date()
            //  console.log(s) //637657296毫秒
            let days = parseInt(s / 1000 / 60 / 60 / 24)
            let hours = parseInt(s / 1000 / 60 / 60) % 24
            let minutes = parseInt(s / 1000 / 60) % 60
            let seconds = parseInt(s / 1000) % 60
            s = `距离双12还有${days}天${hours}小时${minutes}分${seconds}秒`
            _active.innerHTML = s
        }

        // setInterval('timer()', 1000)




        let num = 3
        let setTimer = () => {
            let id = setInterval(() => {
                btn.innerHTML = num
                num--
                btn.disabled = true
                btn.style.backgroundColor = 'rgb(245, 210, 146)'
                document.querySelector('.a').style.display = 'block'
                if (num === -2) {
                    clearInterval(id)
                    btn.innerHTML = '发送验证码'
                    btn.disabled = false
                    btn.style.backgroundColor = 'orange'
                    document.querySelector('.a').style.display = 'none'
                    num = 3
                }
            }, 1000)
        }
        //倒计时
        // let _wrapper = document.querySelector('.wrapper')
        // let id = setInterval(function () {
        //     num--
        //     _wrapper.innerHTML = num
        //     //停止条件
        //     if (num == 0) {
        //         clearInterval(id)  //停止计时器
        //     }
        // }, 1000)

    </script>
</body>