原生js的时间对象和修改背景图片_原生js的修改背景图片-优快云博客

本文链接：https://blog.youkuaiyun.com/YingUser/article/details/124580735

本文介绍了如何在JavaScript中获取当前时间对象，并展示了如何利用随机数动态修改页面背景图片，为前端开发提供了一个实用技巧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、获取时间对象，记录当前时间

<body>
    <button>点击</button>
    <p>123</p>

    <script>
        let p = document.querySelector("p")
        let btn = document.querySelector("button")
        btn.onclick = function () {
            p.innerText=getDate()
        }

        function getDate() {
            let date = new Date()
            let year = date.getFullYear()
            let mouth = date.getMonth() + 1
            let dates = date.getDate()
            let arr = ['星期一', '星期二', '星期三', '星期四', '星期五', '星期六', '星期日',]
            let day = date.getDay() //4   下标
            return '今天是：' + year + "年" + mouth + "月"+ dates+ "日" + arr[day] 
        }


    </script>


</body>

效果：

2、随机数修改背景图片

/**
 *
 * 实现指定区间的随机整数(闭区间)
 * @param {number} n, 代表区间的一端
 * @param {number} m, 代表区间的另一端
 *
 * @return {number} , 指定区间的随机整数
*/
function myRandom(n,m) {
    // 1. 考虑数字的安全: 必须是数字才可以, 否则不行, 用户必须给一个数(实参)
    m = m || 0          // m可以没有值, 没有值,将值变成0

    // 2. 重新确定n和m的大小关系
    let min = Math.min(n, m)
    let max = Math.max(n, m)

    return Math.floor(Math.random() * (max - min + 1)) + min

}

引入与使用

 <title>Document</title>
//引入
    <script src="./myRandow.js"></script>
</head>

//使用
<img src="./images/b1.jpg" alt="">
  
    <script>
//封装一个函数
        function repeat() {
            let rand = myRandom(1, 5)

            let img = document.querySelector('img')
            img.src = `./images/b${rand}.jpg`
        }


//每隔一段时间调用这个函数
        setInterval(repeat, 500)