功能介绍:文章内容太长,进入页面只显示部分内容,并且提示“展开剩余 76% ↓”,点击按钮显示全部内容!
js代码如下:
document.addEventListener("DOMContentLoaded", function() { const fullContent = document.getElementById('content').innerHTML if(fullContent.length > 800){ const partialContent = fullContent.substring(0, 600); const percent = (100 - (600 / fullContent.length) * 100).toFixed(0) document.getElementById('content').innerHTML = `${partialContent}<div class="read-box"><div class="read_mask"></div><div class="read_mod"><span class="read-button" id="showFullContent">展开剩余 ` + percent + `% ↓</span></div></div>`; document.getElementById('showFullContent').addEventListener('click', function() { document.getElementById('content').innerHTML = `${fullContent}`; this.style.display = 'none'; }); } });
css代码如下:
.read-box { position: relative; z-index: 9; margin-top: -220px; padding: 0 0 35px; width: 101%; text-align: center; } .read_mask { height: 200px; background: -webkit-gradient(linear,0 top,0 bottom,from(rgba(255,255,255,0)),to(#fff)); background: -o-linear-gradient(bottom,rgba(255,255,255,.1),rgba(255,255,255,0)); } .read-box .read_mod { background-color: #fff; } .read-button { display: inline-block; width: 230px; height: 45px; border: 1px solid #6b0; color: #6b0; vertical-align: top; font-size: 14px; line-height: 45px; cursor: pointer; } .read-button:hover{ background: #6b0; border: 1px solid #6b0; color: #fff; }
事件绑定addEventListener和事件解除绑定removeEventListener的基本用法
标签: addEventListener, js代码
上面是“js文章太长显示部分(百分比),点击按钮显示全部”的全面内容,想了解更多关于 js 内容,请继续关注web建站教程。
当前网址:https://ipkd.cn/webs_14280.html
workflows工作流
- 一把令人难忘的美丽吉他ComfyUI工作流
- 在森林中心有一座蛇形的房子ComfyUI工作流
- 树上一个快乐的猕猴桃ComfyUI工作流
- 一头巨大的古代大象背后建着一座城市
- 严寒的冬天里一只小鸟在森林的树枝上休息
- 完整海报生成comfyui工作流
- 丛林里坐着一尊佛像
- 三阶放大comfyui工作流
猜你喜欢
声明:本站提供的所有资源部分来自互联网,如果有侵犯您的版权或其他权益,请发送到邮箱:admin@ipkd.cn,我们会在看到邮件的第一时间内为您处理!