<!DOCTYPE html>
<html lang="zh-CN">
<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>
@font-face {
font-family: "jikel";
src: url(./font/font/DS-DIGIT.TTF);
}
div {
transition: .5s;
border-radius: 3px;
}
div:hover {
top: -3px;
box-shadow: 0px 5px 10px 3px #D1D1D1;
transform: scale(1.1);
/*放大1.1倍*/
}
#heart {
animation: breathe 1s infinite;
box-shadow: 0px 5px 10px 3px #D1D1D1;
}
@keyframes breathe {
0% {
transform: scale(.99);
}
50% {
transform: scale(1.03);
}
100% {
transform: scale(.99);
}
}
</style>
</head>
<body>
<div id="heart" class="demo"></div>
<script>
let div = document.querySelector('div')
div.style.width = '800px'
div.style.height = '100px'
div.style.border = '5px solid gold'
div.style.textAlign = 'center'
div.style.margin = "100px auto"
// div.style.backgroundColor = 'aqua'
div.style.backgroundColor = 'red'
div.style.color="#fff"
div.style.borderRadius = "20px"
div.style.fontFamily = 'jikel'
function add() {
div.className = ' div:hover'
add()
}
function stop() {
// 如何获取时间戳
let time = + new Date()
let lastTime = +new Date('2022-5-29-23:00:00')
console.log(time);
console.log(lastTime);
// 毕业倒计时时间
let newTime = (lastTime - time) / 1000
console.log();
// 转换单位
let d = parseInt(newTime / 60 / 60 / 24);
let h = parseInt(newTime / 60 / 60 % 24);
let m = parseInt(newTime / 60 % 60);
let s = parseInt(newTime % 60);
// 数组补0
d = d < 10 ? "0" + d : d
h = h < 10 ? '0' + h : h
m = m < 10 ? "0" + m : m
s = s < 10 ? "0" + s : s
// 渲染网页
div.innerHTML = `<h1>拼多多-百亿补贴活动仅剩 : ${d}天 - ${h}时 - ${m}分 - ${s}秒</h1>`
}
setInterval(stop, 1000)
</script>
</body>
</html>
案例-跳动倒计时!
最新推荐文章于 2024-06-24 13:56:05 发布