Detailed Explanation of JavaScript Blog Content Progress Plugin

Preliminary remarks

Recently, I have been reviewing my own blog posts, but some of the blog content is very long, long to the point where I don't know how long it will take to read. At this time, there is a feeling of frustration. But, if a blog content progress plugin can be provided, according to the amount of content read, the progress bar can be displayed to make me have a sense of the progress of the content I read, which can calm me down and read a little at a time. This article will introduce the implementation of the blog content progress plugin in detail

Effect demonstration

Whether through the mouse wheel, or dragging the scroll bar, or pressing the space bar, as long as the page scrolling operation occurs, it will trigger the change of the blog content progress bar at the bottom of the page. According to the amount of current content, calculate the proportion with the total content of the blog, and finally correspond to the width of the progress bar. When the mouse is moved over the progress bar range, the current progress percentage will be displayed in numbers

By using the following code, you can insert the progress plugin into the page

Since both catalog and progress are commonly used features, I have integrated the progress feature into the catalog generation plugin

Principle explanation

The principle of the progress bar has been briefly explained above, and it is not difficult to implement. When the scroll event is triggered, calculate two height values. One value H is used to represent the distance from the bottom of the entire blog content to the top of the page. One value h is used to represent the distance from the bottom of the blog content within the current window to the top of the page. Thus, the ratio radio = h/H is the progress percentage, displayed by the change in the width of the progress bar

Specific implementation

【1】Obtain the total height H of the blog content, as shown in the figure below, Cnblogs places the blog content in a div with the id cnblogs_post_body, and its height can be obtained through scrollHeight. This value is fixed and does not need to be obtained again when the scroll event occurs; it can be obtained after the page is loaded.

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】Get the height h of the blog content displayed in the current page window, h is actually the scroll distance of the page h2

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

【3】Progress bar implementation, through H and h, you can calculate the proportional coefficient radio = h/H. HTML5A new form control class progress has been added, which is used to represent the progress or process of a task

[Note]IE9-Browser does not support

If it is IE9-Browser, the progress element is degraded to a div element, and only the percentage is displayed

Set the max value of progress to H and the value to h. Update the value when the scroll event is triggered

addEvent(window,'scroll',function(){
 var h = document.documentElement.scrollTop || document.body.scrollTop;
 progress.value = h;
 var radio = (h/H >= 1) &63; 1 : h/H;
 progress.innerHTML = progress.title = Math.floor(100*radio) + %''; 
});

【4】Style setting

The style setting of the progress bar is relatively simple, fix its position, locate at the bottom of the page, and match the window width

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

【5】Dynamic script

Since it will ultimately be presented as a plugin, all code needs to be dynamically generated

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

Plugin code

//Event compatibility
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);
 });
 }
}
//Generate element
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 "Songti";';
document.body.appendChild(progress);
//Calculate H
var H;
addEvent(window,'load',function(){
 progress.max = H = cnblogs_post_body.scrollHeight;
});
//Calculate h and radio
addEvent(window,'scroll',function(){
 var h = document.documentElement.scrollTop || document.body.scrollTop;
 progress.value = h;
 var radio = (h/H >= 1) &63; 1 : h/H;
 progress.innerHTML = progress.title = Math.floor(100*radio) + %''; 
});

That's all for this article. I hope the content of this article can bring you some help in learning or work, and I also hope to support the Shouting Tutorial more!

Declaration: The content of this article is from the Internet, and the copyright belongs to the original author. The content is contributed and uploaded by Internet users spontaneously. This website does not own the copyright, has not been manually edited, and does not assume any relevant legal liability. If you find any content suspected of copyright infringement, please send an email to: notice#oldtoolbag.com (Please replace # with @ when sending an email for reporting. Provide relevant evidence, and once verified, this site will immediately delete the suspected infringing content.)

Basic Tutorial