将代码接放到标签栏,然后点击就可以显示页面的滚动进度。看着玩吧!
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/
这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。
V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。
V2EX is a community of developers, designers and creative people.