杰晶网络

js 博客内容进度插件详解
网络编程 2024/5/19 佚名
3 2

前面的话

最近在复习自己写的博客，但有的博客内容很长，长到不知道多少时间可以读完。这时，就有种泄气的冲动。但，如果能够提供一个博客内容进度的插件，根据所读内容的多少，显示进度条，让自己对所读的内容进度心里有数，可以让自己平静下来，一点一点读下去。本文将详细介绍博客内容进度插件的实现

效果演示

无论是通过鼠标滚轮，还是拖动滚动条，也或者是按空格键，只要发生了页面的滚动操作，就会触发页面底部博客内容进度条的变化。根据当前内容的多少计算与博客所有内容的比例，最终对应成进度条的宽度。当鼠标移入进度条范围时，会以数字显示出当前的进度百分比

通过使用如下代码，可将进度插件插入页面中

<script src="/UploadFiles/2021-04-02/progress.js">

由于目录和进度都是常用的功能，所以，我把进度的功能整合到目录生成的插件中了

<script src="/UploadFiles/2021-04-02/catalog.js">

原理解释

上面已经简明扼要的说明了进度条的原理，而实现起来也不困难。在触发滚动事件时，计算两个高度值。一个值H用来表示整篇博客内容的底部离页面顶端的距离。一个值h用来表示当前窗口内博客内容的底部离页面顶端的距离。从而比例值radio = h/H，就是进度百分比，以进度条的宽度变化显示出来

具体实现

【1】获取博客内容总高度H，如下图所知，博客园将博客内容放在id为cnblogs_post_body的div内，通过scrollHeight来获取其高度即可。且该值是固定不变的，不需在发生滚动事件时再获取，页面加载完成后就可获取

js 博客内容进度插件详解

js 博客内容进度插件详解

function addEvent(target,type,handler){
 if(target.addEventListener){
 target.addEventListener(type,handler,false);
 }else{
 target.attachEvent('on'+type,function(event){
  return handler.call(target,event);
 });
 }
}
var H;
addEvent(window,'load',function(){
 H = cnblogs_post_body.scrollHeight;
});

【2】获取当前页面窗口中显示的博客内容高度h，h实际上就是页面的滚动距离h2

var h = document.documentElement.scrollTop || document.body.scrollTop;

【3】进度条实现，通过H和h，可以计算出比例系数radio = h/H。HTML5新增了一个表单类控件progress，就是用来表示任务的进度或进程的

[注意]IE9-浏览器不支持

<progress id="progress" value="" max=""></progress>

如果是IE9-浏览器，progress元素被退化为div元素，仅显示百分比即可

将progress的max值设置为H，将value值设置为h。滚动事件触发时，更新value值即可

addEvent(window,'scroll',function(){
 var h = document.documentElement.scrollTop || document.body.scrollTop;
 progress.value = h;
 var radio = (h/H >= 1) "color: #0000ff">【4】样式设置


进度条的样式设置较为简单，将其固定定位，居于页面底部，并与窗口宽度相同





.progress{
 position:fixed;
 left:0;
 right:0;
 bottom:0;
 width:100%;
 height:12px;
 text-align:center;
 font:12px/12px "宋体";
}





【5】动态脚本


由于最终将以插件的形式呈现，所有的代码都需要动态生成





var progress = document.createElement('progress');
progress.id = 'progress';
document.body.appendChild(progress); 





插件代码





//事件兼容
function addEvent(target,type,handler){
 if(target.addEventListener){
 target.addEventListener(type,handler,false);
 }else{
 target.attachEvent('on'+type,function(event){
  return handler.call(target,event);
 });
 }
}
//生成元素
var progress = document.createElement('progress');
progress.id = 'progress';
progress.style.cssText = 'position:fixed;left:0;right:0;bottom:0;width:100%;height:12px;text-align:center;font:12px/12px "宋体";';
document.body.appendChild(progress);
//计算H
var H;
addEvent(window,'load',function(){
 progress.max = H = cnblogs_post_body.scrollHeight;
});
//计算h及radio
addEvent(window,'scroll',function(){
 var h = document.documentElement.scrollTop || document.body.scrollTop;
 progress.value = h;
 var radio = (h/H >= 1) ? 1 : h/H;
 progress.innerHTML = progress.title = Math.floor(100*radio) + '%'; 
});






以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持！
标签：
js进度条插件,进度条插件
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
评论“js 博客内容进度插件详解”
暂无“js 博客内容进度插件详解”评论...
www.imxmx.com 杰晶网络
8,675无损音乐
1,324高清电影
213破解软件
120,141站长资源

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

暴雪近日发布了《魔兽世界》10.2.6 更新内容，新游玩模式《强袭风暴》即将于3月21 日在亚服上线，届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。

艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕，并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时，他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中，玩家将会进入一个全新的海盗主题大逃杀式限时活动，其中包含极高的风险和史诗级的奖励。

《强袭风暴》不是普通的战场，作为一个独立于主游戏之外的活动，玩家可以用大逃杀的风格来体验《魔兽世界》，不分职业、不分装备（除了你在赛局中捡到的），光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式，玩家在加入海盗主题的预赛大厅区域前，可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹，《巨龙崛起》和《魔兽世界：巫妖王之怒 经典版》的玩家都可以获得奖励。

更新动态

友情链接

杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网 更多链接