javascript随笔

使浏览器回退重新加载页面

if (window.history && window.history.pushState) {
    $(window).on('popstate', function () {
        var hashLocation = location.hash;
        var hashSplit = hashLocation.split("#!/");
        var hashName = hashSplit[1];
        if (hashName !== '') {
            var hash = window.location.hash;
            if (hash === '') {
                location.href = document.referrer;
            }
        }
    });
    window.history.pushState('forward', null, '');
}

创建水印画布

(function(win,$){
    if(!$) return;
    var name = "哈哈哈";
    var $el = $(".post-circle-bg");
    // 创建 画布
    function createCanvas(){
        var width = 150,
            height = 150,
            text_width = 75,
            text_height = 75;
        var $canvas = document.createElement("canvas");
        $canvas.id = "waterMark";
        $canvas.width = width;
        $canvas.height = height;
        var context = $canvas.getContext('2d');
        context.clearRect(0, 0, width, height);
        context.fillStyle = "rgba(127,127,127,.3)"; // 定义颜色
        context.font = "18px Courier New"; // 文字大小
        context.rotate(-45*Math.PI/180); // 旋转角度
        context.translate(-75, 75/2);
        context.textAlign='center'; // 文字居中
        context.fillText(name, text_width, text_height); // 画文字
        var myImage = $canvas.toDataURL("image/png"); // 转化为图像数据
        $el.css({
            backgroundImage: "url("+ myImage +")",
            backgroundSize: "150px",
            backgroundPosition: "-50px 10px"
        });
      }
      createCanvas();
  }(window, window.$ || window.jQuery));

HTML5实现屏幕手势解锁

转载至http://www.open-open.com/lib/view/open1437557508131.html

回到顶部

引用js

<a id="backToTop" onclick="backToTop(10)"></a>
<script src="back-to-top.js"></script>

js代码

(function () {
    var lastTime = 0;
    var prefixes = ['webkit', 'moz']; //浏览器前缀
    for (var x = 0; x < prefixes.length && !window.requestAnimationFrame; ++x) {
        window.requestAnimationFrame = window[prefixes[x] + 'RequestAnimationFrame'];
        // Webkit中此取消方法的名字变了
        window.cancelAnimationFrame = window[prefixes[x] + 'CancelAnimationFrame'] || window[prefixes[x] + 'CancelRequestAnimationFrame'];
    }
    // 如果浏览器实在不支持这个，就只有用 setTimeout 咯
    if (!window.requestAnimationFrame) {
        window.requestAnimationFrame = function (callback, element) {
            var currTime = new Date().getTime();
            var timeToCall = Math.max(0, 16.7 - (currTime - lastTime));
            var id = window.setTimeout(function () {
                callback(currTime + timeToCall);
            }, timeToCall);
            lastTime = currTime + timeToCall;
            return id;
        };
    }

    if (!window.cancelAnimationFrame) {
        window.cancelAnimationFrame = function (id) {
            clearTimeout(id);
        };
    }
}());

/* -------------------------- 样式处理 --------------------*/

window.onscroll = function () {
    var doc = document.body.scrollTop ? document.body : document.documentElement;
    var scrollTop = doc.scrollTop;
    var scrollup = document.getElementById('backToTop');
    //当滚动到距离顶部200px时，返回顶部的锚点显示
    if (scrollTop >= 200) {
        scrollup.style.display = "block";
    } else { //恢复正常
        scrollup.style.display = "none";
    }
}

/* -------------------------- 核心代码 --------------------*/

// 滚动到顶部缓动实现
// rate表示缓动速率，默认是2
var backToTop = function (rate) {
    var doc = document.body.scrollTop ? document.body : document.documentElement;
    var scrollTop = doc.scrollTop;
    var top = function () {
        scrollTop = scrollTop + (0 - scrollTop) / (rate || 2);
        // 临界判断，终止动画
        if (scrollTop < 1) {
            doc.scrollTop = 0;
            return;
        }
        doc.scrollTop = scrollTop;
        // 动画gogogo!
        requestAnimationFrame(top);
    };
    top();
};