第243练的最终效果如下：
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 = ‘更少’;}})
© 版权声明
文章版权归作者所有，未经允许请勿转载。
相关文章
暂无评论...
【web前端开发】一个专业而懂你的前端开发技术研究学习交流平台，每天不定时分享前端技术内容与案例，编程图书与课程，前端开发工具等学习资源，我们坚持每天学习一点点，每天进步一点点，关注我们，一起学习成长进步。
同名公众号【web前端开发】
