0基础学Web—随机颜色、数学对象、日期及方法、定时器、倒计时
随机颜色
点击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>