V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
推荐关注
Meteor
JSLint - a JavaScript code quality tool
jsFiddle
D3.js
WebStorm
推荐书目
JavaScript 权威指南第 5 版
Closure: The Definitive Guide
dyniao
V2EX  ›  JavaScript

bookmarklet 显示当前页面的进度,其实没卵用。

  •  
  •   dyniao · 2016-01-22 22:26:01 +08:00 · 1854 次点击
    这是一个创建于 3254 天前的主题,其中的信息可能已经有所发展或是发生改变。

    将代码接放到标签栏,然后点击就可以显示页面的滚动进度。看着玩吧!

    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/

    5 条回复    2016-01-22 23:00:31 +08:00
    zhjits
        1
    zhjits  
       2016-01-22 22:38:42 +08:00
    本页滚动到底部就 121% 了
    dyniao
        2
    dyniao  
    OP
       2016-01-22 22:44:12 +08:00
    @zhjits 目前还没发现这个问题。什么环境?什么浏览器呢?
    zhjits
        3
    zhjits  
       2016-01-22 22:46:07 +08:00

    Chrome Version 47.0.2526.106 (64-bit)
    OS X 10.11.2
    dyniao
        4
    dyniao  
    OP
       2016-01-22 22:49:47 +08:00
    @zhjits 是个问题,估计是哪算错了,我查查。
    loading
        5
    loading  
       2016-01-22 23:00:31 +08:00 via Android
    不如做个点击回到顶部的吧,更实用。
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   3944 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 22ms · UTC 05:15 · PVG 13:15 · LAX 21:15 · JFK 00:15
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.