2020-07-15 html的网页点击特效 + css的images-set+ JS的如何禁止页面前进和后退 + 软技能的代码可移植性

2020-07-15 题目来源：http://www.h-camel.com/index.html

[html] 写一个网页点击的特效

拿来主义： 网页点击实现 爱心 特效
https://blog.csdn.net/vampire10086/article/details/107455981

[css] 有使用过css的image-set吗？它能解决什么问题？

image-set() 根据用户设备的分辨率来匹配合适的图片。
div {
    background-image: image-set( "test.png" 1x, "test-2x.png" 2x, "test-print.png" 600dpi );
}

上述代码将会为普通屏幕使用 test.png，为高分屏使用 test-2x.png，如果更高的分辨率则使用 test-print.png，比如印刷。

[js] 当用户打开一个网页时，想一直停留在当前打开的页面，如何禁止页面前进和后退

1. 方式一  
//禁用后退按钮
function stopHistoryGo() {
    //禁用回退
    window.location.hash="no-back-button";
    window.location.hash="Again-No-back-button";//again because google chrome don't insert first hash into history
    window.location.hash="Again-No-back-button";
    window.οnhashchange=function(){window.location.hash="no-back-button";}
    window.setTimeout(function(){window.location.hash="Again-No-back-button";},1000);
}

效果： 前进可以被禁止，后退2次以上还是可以后退

2. 方式二： 网页前进在后退，保持当前页，效果没有禁止的意思
window.history.forward(1)
window.history.forward(-1)

[软技能] 说说你对代码可移植性的理解

可移植性并不是指所写的程序不作修改就可以在任何计算机上运行，而是指当条件有变化时，程序无需作很多修改就可运行。
可移植性表现在：1.不同平台编译器的数量； 2.对特殊硬件或操作系统的依赖性；