0基础学Web—随机颜色、数学对象、日期及方法、定时器、倒计时
- 随机颜色
- 数学对象
- 日期及方法
- 定时器
- 倒计时
- css
- js
随机颜色
点击div时，随机改变div背景颜色
<body><div class="wrapper" onclick="changebgColor()"></div><script>//改变背景颜色function changebgColor() {//获取wrapperlet _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.141592653589793console.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.235console.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开始，需要+1let 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) % 24let minutes = parseInt(s / 1000 / 60) % 60let seconds = parseInt(s / 1000) % 60s = `距离双12还有${days}天${hours}小时${minutes}分${seconds}秒`_active.innerHTML = s}// setInterval('timer()', 1000)let num = 3let setTimer = () => {let id = setInterval(() => {btn.innerHTML = numnum--btn.disabled = truebtn.style.backgroundColor = 'rgb(245, 210, 146)'document.querySelector('.a').style.display = 'block'if (num === -2) {clearInterval(id)btn.innerHTML = '发送验证码'btn.disabled = falsebtn.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>
