1.定时器
代码语言：javascript复制<style>
span {
width: 50px;
height: 50px;
background-color: black;
color: seashell;
border: 10px solid #eee;
}
</style><body>
<span class='hour'></span><span class='minute'></span><span class='second'></span>
<script>
//1.获取元素
var hour = document.querySelector('.hour');
var minute = document.querySelector('.minute');
var second = document.querySelector('.second');
// var inputTime = new Date('2021-5-2 18:00:00');
var inputTime = (new Date('2021-5-2 18:00:00')).getTime();
countDown();
//2.开启定时器
setInterval(countDown, 1000);
function countDown() {
var nowTime = new Date();
var times = (inputTime - nowTime) / 1000;
var h = parseInt(times / 60 / 60 % 24);
h = h < 10 ? '0' h : h;
hour.innerHTML = h;
var m = parseInt(times / 60 % 60);
m = m < 10 ? '0' m : m;
minute.innerHTML = m;
var s = parseInt(times % 60);
s = s < 10 ? '0' s : s;
second.innerHTML = s;
}
</script>
</body>2.短信案例
代码语言：javascript复制<body>
电话号码：<input type="text"><button>发送</button>
<script>
var but = document.querySelector('button');
var time = 3;
but.addEventListener('click', function() {
but.disabled = true;
var timer = setInterval(function() {
if (time == 0) {
clearInterval(timer);
but.disabled = false;
but.innerHTML = '发送'
time = 3;
} else {
but.innerHTML = '还剩' time '秒';
time--;
}
}, 1000)
})
</script>
</body>类似短信验证码案例模型，css格式自己设计
3.京东搜索框优化
只需要按s键可以打字搜索，不需要鼠标点击 通过修改ASCLL改变
代码语言：javascript复制<body>
<input type="text">
</body>
<script>
var search = document.querySelector('input');
document.addEventListener('keyup', function(e) {
if (e.keyCode === 83) {
search.focus();
}
})
</script>4.图片与鼠标联动
代码语言：javascript复制 <style>
img {
position: absolute;
height: 20px;
width: 20px;
top: 10px;
}
</style>
</head>
<body>
<img src="picture/3.png" alt="">
<script>
var img = document.querySelector('img');
document.addEventListener('mousemove', function(e) {
var x = e.pageX;
var y = e.pageY;
console.log('x坐标是' x, 'y的坐标是' y);
//不要忘记px
img.style.left = x - 10 'px'; //减去的是图片的一半，实际开发放大镜
img.style.top = y - 10 'px';
})
</script>
</body>5.网页屏幕大小
通过拉伸网页屏幕来改变内容
代码语言：javascript复制 <style>
div {
width: 200px;
height: 200px;
background-color: red;
}
</style>
</head>
<script>
window.addEventListener('load', function() {
var div = document.querySelector('div');
window.addEventListener('resize', function() {
console.log(window.innerWidth);
console.log('变化了');
if (window.innerWidth <= 800) {
div.style.display = 'none';
} else {
div.style.display = 'block';
}
})
})
</script>
<body>
<div></div>
</body>
