javascript web编程案例干货
1.定时器
<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.短信案例
<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改变
<body>
<input type="text">
</body>
<script>
var search = document.querySelector('input');
document.addEventListener('keyup', function(e) {
if (e.keyCode === 83) {
search.focus();
}
})
</script>4.图片与鼠标联动
<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.网页屏幕大小
通过拉伸网页屏幕来改变内容
<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>本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2021-05-01 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录
相关产品与服务
短信
腾讯云短信（Short Message Service，SMS）可为广大企业级用户提供稳定可靠，安全合规的短信触达服务。用户可快速接入，调用 API / SDK 或者通过控制台即可发送，支持发送验证码、通知类短信和营销短信。国内验证短信秒级触达，99%到达率；国际/港澳台短信覆盖全球200+国家/地区，全球多服务站点，稳定可靠。