将代码接放到标签栏,然后点击就可以显示页面的滚动进度。看着玩吧!
js 放到页面里运行没问题,但是放到 bookmarklet ,开始运行没有初始值,不知道怎么回事,求解答!
v2 ,超链接不支持 js 的。那就贴上源码,自行添加吧!
javascript:void((function(){function c(){var b=document.getElementById("processjQJ8kWLTA7mNRs"),c=b.innerHTML.replace("%",""),a=b.getContext("2d");b.a=!0;b.width=50;b.height=50;a.clearRect(0,0,25,25);a.beginPath();a.moveTo(25,25);a.arc(25,25,25,0,2*Math.PI,!1);a.fillStyle="#e6e6e6";a.fill();a.beginPath();a.moveTo(25,25);a.arc(25,25,25,-.5*Math.PI,-.5*Math.PI+2*Math.PI*c/100,!1);a.closePath();a.fillStyle="#ff8000";a.fill();a.beginPath();a.arc(25,25,19,0,2*Math.PI,!0);a.closePath();a.fillStyle="#fff";a.fill();a.beginPath();a.arc(25,25,17,0,2*Math.PI,!0);a.closePath();a.font="bold 10px consolas";a.fillStyle="#ff8000";a.textAlign="center";a.textBaseline="middle";a.moveTo(25,25);a.fillText(c+"%",25,25)}(function(){var b=document.createElement("canvas");b.id="processjQJ8kWLTA7mNRs";b.style.position="fixed";b.style.right="0";b.style.bottom="0";b.innerHTML="0%";document.body.appendChild(b)})();(function(){var b=document.documentElement.clientHeight;window.addEventListener("resize",function(){b=document.documentElement.clientHeight},!1);window.addEventListener("scroll",function(){document.getElementById("processjQJ8kWLTA7mNRs").innerHTML=parseInt(100*(document.documentElement.scrollTop||document.body.scrollTop)/((document.documentElement.scrollHeight||document.body.scrollHeight)-b))+"%";c()},!1)})();c()})());
获取进度和画图的简单说明:
http://www.dyniao.com/use-canvas-draw-browse-progress/
1
zhjits 2016-01-22 22:38:42 +08:00
本页滚动到底部就 121% 了
|
3
zhjits 2016-01-22 22:46:07 +08:00
Chrome Version 47.0.2526.106 (64-bit) OS X 10.11.2 |
5
loading 2016-01-22 23:00:31 +08:00 via Android
不如做个点击回到顶部的吧,更实用。
|