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;
});

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) + '%'; 
});



以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持！