// 倒计时
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>
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
