【每日一练】243—JS实现折叠效果

每日一练11个月前发布 admin
2,352 0

第243练的最终效果如下:

【每日一练】243—JS实现折叠效果

HTML:

<!DOCTYPE html>
<html lang=”en”>
<head>
  <meta charset=”UTF-8″>
  <meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
  <title>第243练</title>
  <link rel=”stylesheet” href=”./style.css”>
</head>
<body>
  <h1>为什么精英都是时间控</h1>
  <p class=”text”>《为什么精英都是时间控》—如果你想要改变现在的人生,请先改变管理时间的方法;《为什么精英都是时间控》—如果你想要改变现在的人生,请先改变管理时间的方法<span class=”dots”> …</span>
    <span class=”moreText”> 我不知道你有没有感觉时间不够用的时候,我只从升级为二宝妈妈以后,我经常会感觉时间不够用,在职场的时候,希望一天24小时能变成48小时;离开职场后,希望一天24小时能变成72小时。
      但是,我知道这些都是不可能的事情,所以,我为了更加高效的利用好自己的时间,我也阅读了一些关于时间管理方面的图书。
      最近,我新阅读了一本关于时间管理术的书—《为什么精英都是时间控》,这是一本教你怎么集中注意力高效利用好时间和提高工作效率的书。
      我不知道,你是否思考过关于高效利用时间和高效完成工作的问题,因为我常感觉时间不够用,所以常困惑,于是就去书中寻求解决方案。</span></p>
  <button class=”readMoreBtn”>阅读更多</button>
  <script src=”./main.js”></script>
</body>
</html>

CSS:

body{
  font-family: ‘Montserrat’;
  text-align: justify;
  max-width: 600px;
  margin: 0 auto;
  background-color: rgb(18, 23, 27);
  color: aliceblue;
}
.text{
  font-size: 24px;
}
.moreText{
  display: none;
}
.text.show-more .moreText{
  display: inline;
}
.readMoreBtn{
  padding: 15px 60px;
  background-color: rgb(149, 170, 197);
  color:rgb(53, 49, 49);
  border: none;
  outline: none;
  border-radius: 8px;
  font-size: 24px;
  cursor: pointer;
}
.dots{
  display: inline-block;
}
.text.show-more .dots{
  display: none;
}

JS:

const readMoreBtn = document.querySelector(‘.readMoreBtn’);
const text = document.querySelector(‘.text’);
readMoreBtn.addEventListener(‘click’,(e)=>{
  text.classList.toggle(‘show-more’);
  if(readMoreBtn.innerText === ‘更少’){
    readMoreBtn.innerText = ‘更多’;
  }else{
    readMoreBtn.innerText = ‘更少’;
  }
})
© 版权声明

相关文章

暂无评论

暂无评论...