一、JS实现倒计时
// 倒计时
var h = document.querySelector('.hour');
var m = document.querySelector('.minute');
var s = document.querySelector('.second');
var time = new Date('2023-12-12 00:00:00');
//调用函数，防止进入页面要过一秒才显示计时
countDown();
setInterval(countDown, 1000);
// 封装补零函数
function add0(n) {
return n = n < 10 ? '0' + n : n
}
function countDown() {
var now_time = new Date();
var times = (time - now_time) / 1000; //剩余秒数
//转换
var hour = parseInt(times / 60 / 60); //时
var minute = parseInt(times / 60 % 60); //分
var second = parseInt(times % 60); //秒
//写进网页
h.innerHTML = add0(hour);
m.innerHTML = add0(minute);
s.innerHTML = add0(second);
}
二、JS实现手风琴
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
dl {
width: 400px;
margin: 0 auto;
}
dt {
background-color: rgb(226, 237, 141);
border: 1px solid black;
text-align: center;
}
p {
/* height: 200px; */
background-color: rgb(170, 238, 238);
/* display: none; */
height: 0;
overflow: hidden;
font-size: 12px;
}
</style>
</head>
<body>
<dl>
<dt> 1 《抉择》</dt>
<p> 人的一生常处于抉择之中，如：念哪一间大学？选哪一种职业？娶哪一种女子？……等等伤脑筋的事情。一个人抉择力的有无，可以显示其人格成熟与否。倒是哪些胸无主见的人，不受抉择之苦。因为逢到需要决定的时候，他总是求询别人说：'嘿，你看怎么做？'大凡能够成大功业的人，都是抉择力甚强的人。他知道事之成败，全在乎已没有人可以代劳，更没有人能代你决定。在抉择的哪一刻，成败实已露出端倪。
</p>
<dt>2 《生命》</dt>
<p>生命，也许是宇宙之间唯一应该受到崇拜的因素。生命的孕育、诞生和显示本质是一种无比激动人心的过程。生命像音乐和画面一样暗自挟带着一种命定的声调或血色，当它遇到大潮的袭卷，当它听到号角的催促时，它会顿时抖擞，露出本质的绚烂和激昂。当然，这本质更可能是卑污、懦弱、乏味的;它的主人并无选择的可能。应当承认，生命就是希望。应当说，卑鄙和庸俗不该得意过早，不该误认为它们已经成功地消灭了高尚和真纯。伪装也同样不能持久，因为时间像一条长河在滔滔冲刷，卑鄙者、奸商和俗棍不可能永远戴着教育家、诗人和战士的桂冠。在他们畅行无阻的生涯尽头，他们的后人将长久地感到羞辱。
</p>
<dt>3 《大小》</dt>
<p>一位朋友谈到他亲戚的姑婆，一生从来没有穿过合脚的鞋子，常穿着巨大的鞋子走来走去。儿子晚辈如果问她，她就会说：'大小鞋都是一样的价钱，为什么不买大的？'每次我转述这个故事，总有一些人笑得岔了气。其实，在生活里我们会看到很多这样的'姑婆'。没有什么思想的作家，偏偏写着厚重苦涩的作品;没有什么内容的画家，偏偏画着超级巨画;经常不在家的商人，却有非常巨大的家园。许多人不断地追求巨大，其实只是被内在贪欲推动着，就好像买了特大号的鞋子，忘了自己的脚一样。不管买什么鞋子，合脚最重要，不论追求什么，总要适可而止。
</p>
<dt>4 《崇拜》</dt>
<p>我崇拜高尚的生命的秘密。我崇拜这生命在降生、成长、战斗、伤残、牺牲时迸溅出的钢花焰火。我崇拜一个活灵灵的生命在崇山大河，在海洋和大陆上飘荡的自由。是的，生命就是希望。它飘荡无定，自由自在，它使人类中总有一支血脉不甘于失败，九死不悔地追寻着自己的金牧场。
</p>
</dl>
</body>
<script>
var dtList = document.querySelectorAll('dt')
var pList = document.querySelectorAll('p')
for (let i = 0; i < dtList.length; i++) {
dtList[i].onclick = function() {
// pList[i].style.display = 'block'
var h = 0;
var hmax = 200;
// 展开
var timer = setInterval(function() {
h += 20;
pList[i].style.height = h + 'px'
if (h >= 200) {
clearInterval(timer)
}
}, 10)
// 合起来
for (let k = 0; k < pList.length; k++) {
if (pList[k].offsetHeight > 0) {
var timer2 = setInterval(function() {
hmax -= 20;
pList[k].style.height = hmax + 'px'
if (hmax <= 0) {
clearInterval(timer2)
}
}, 10)
}
}
}
}
</script>
</html>
三、JS实现返回顶部
<script>
var img = document.querySelector('img');
var timer = null;
document.onscroll = function() {
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
// console.log(scrollTop);
// if (scrollTop >= 500) {
// img.style.display = 'block'
// } else {
// img.style.display = 'none'
// }
img.style.display = scrollTop >= 500 ? 'block' : 'none'
img.onclick = function() {
// scrollTop = 0
timer = setInterval(function() {
scrollTop -= 50
document.documentElement.scrollTop = scrollTop
document.body.scrollTop = scrollTop
if (scrollTop <= 0) {
clearInterval(timer)
}
}, 10)
}
}
</script>
四、JS实现放大镜
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body {
overflow: hidden;
}
.left {
float: left;
}
.right {
float: left;
}
.bigPic {
width: 400px;
height: 400px;
margin-bottom: 20px;
position: relative;
}
.bigPic img {
width: 100%;
height: 100%;
}
.smallPic img {
width: 100px;
height: 50px;
}
.right {
width: 400px;
height: 400px;
border: 1px solid black;
overflow: hidden;
position: relative;
}
.right img {
width: 800px;
height: 800px;
display: none;
position: absolute;
left: 0;
top: 0;
}
.mask {
position: absolute;
left: 0;
top: 0;
width: 200px;
height: 200px;
background-color: rgba(0, 0, 0, .3);
/* cursor: move; */
display: none;
/* visibility: hidden; */
}
</style>
</head>
<body>
<div class="left">
<div class="bigPic">
<img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2F2ffa3992-4e82-40d3-862a-bcd558dbf93d%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1704354754&t=19d2bff6d6b6e657dd0c7eab05535424"
alt="">
<div class="mask"></div>
</div>
<div class="smallPic">
<img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2F2ffa3992-4e82-40d3-862a-bcd558dbf93d%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1704354754&t=19d2bff6d6b6e657dd0c7eab05535424" alt="">
<img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2F6fe50b7f-bc61-4097-b284-0ba158ebe3e4%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1704354754&t=1602136e64a5f88ff557d12f48d0d5d6" alt="">
<img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2F049f40fe-9dec-4a2d-ab62-0e3677484d93%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1704354837&t=2896fce9e9c214756d5b1c4dc08d1cc6" alt="">
<img src="https://img.88tph.com/tphc.1/52/5a/Ulp0pQqXEemMSQARMiynhQ.jpg" alt="">
</div>
</div>
<div class="right">
<img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2F2ffa3992-4e82-40d3-862a-bcd558dbf93d%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1704354754&t=19d2bff6d6b6e657dd0c7eab05535424"
alt="">
</div>
</body>
<script>
var smallPicList = document.querySelectorAll('.smallPic img');
var bigPicImg = document.querySelector('.bigPic img')
var bigPic = document.querySelector('.bigPic');
var mask = document.querySelector('.mask')
var rightPic = document.querySelector('.right img')
var rightBox = document.querySelector('.right')
// 鼠标移入到小图片时，左侧大图切换，右侧的图片地址也切换
for (let i = 0; i < smallPicList.length; i++) {
smallPicList[i].onmouseover = function () {
bigPicImg.src = this.src
rightPic.src = this.src
}
}
// 鼠标没在左边大图上时，遮罩层和右边的大图隐藏起来
bigPic.onmouseout = function () {
mask.style.display = 'none'
rightPic.style.display = 'none'
}
// 鼠标移入到大图上后遮罩层和右边的大图显示出来
bigPic.onmouseover = function () {
mask.style.display = 'block';
rightPic.style.display = 'block';
}
// 鼠标在左边大图上移动
bigPic.onmousemove = function () {
// 遮罩层跟着鼠标的位置移动
var e = event || window.event
var x = e.clientX - bigPic.offsetLeft - mask.clientWidth / 2;
var y = e.clientY - bigPic.offsetTop - mask.clientHeight / 2;
var xMax = bigPic.offsetWidth - mask.offsetWidth;
var yMax = bigPic.offsetHeight - mask.offsetHeight;
// 遮罩层不能超出左边框框的范围
x = x >= xMax ? xMax : x <= 0 ? 0 : x;
y = y >= yMax ? yMax : y <= 0 ? 0 : y;
mask.style.left = x + 'px';
mask.style.top = y + 'px'
// 右边的图大小为右边框框的二倍，且右边的图向与遮罩层相反的方向移动，大小为左边移动的二倍
rightPic.style.left = -2 * x + 'px'
rightPic.style.top = -2 * y + 'px'
}
</script>
</html>