js前端URL特殊字符的转码及PHP解码

问题：url传有特殊字符出现丢失，因为特殊字符会被特殊处理
我们先用getUrlParam()函数获取参数，

// 获取链接参数
function getUrlParam(name) {
    //构造一个含有目标参数的正则表达式对象
    var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
    //匹配目标参数
    var r = window.location.search.substr(1).match(reg);
    if (r != null) return unescape(r[2]);
    return null; //返回参数值
}

再用encodeURIComponent()函数转码，例如：

//url里边包含@等特殊字符
var url = "https://6.hbibwl.com.cn/wxkf/main.html?pin=U.P0Ky40vy63TnhM65rk@_B9&id=8";
var pin = encodeURIComponent(getUrlParam('pin'));
//打印转码的pin值
console.log(pin);

结果：

U.P0Ky40vy63TnhM65rk%40_B9

PHP解码：

$_POST['pin'] = urldecode($_POST['pin']);
echo $_POST['pin'];

结果：

U.P0Ky40vy63TnhM65rk@_B9

js复制A标签的链接地址

function copy(copyId){
    console.log(copyId);
    var url = document.getElementById(copyId).href;
    var cInput = document.createElement('input');
    cInput.value = url;
    document.body.appendChild(cInput);
    cInput.select(); // 选取文本框内容 
    document.execCommand("Copy"); // 执行浏览器复制命令
    alert("复制成功!");
    document.body.removeChild(cInput);
}

CSS最高优先级!important用法详解

在 CSS 属性值的后面添加 !important，可以提升 CSS 属性的优先级。
例如：

.foo { color:#fff !important;}

此时，无论使用何种级别的选择器，.foo 元素的颜色都是白色。

很多读者对 !important 的认知比较传统，认为 CSS 的优先级就像一个小世界，设置了 !important 之后，这个 CSS 属性就可以在 CSS 世界中“称王称霸”。

实际上，!important 所起的作用不是这样，而是直接将这个 CSS 属性带到另一个更高维度的世界中，而这个“更高维度的世界”就是更高级别的级联层级。

回顾一下级联层级的优先级关系：

1.设置了!important的浏览器内置样式；
2.设置了!important的用户设置的样式；
3.@layer规则中设置的包含!important的样式；
4.开发者设置的包含!important的样式；
5.开发者设置的CSS样式；
6.@layer规则中的CSS样式；
7.用户设置的CSS样式；
8.浏览器内置的CSS样式。

可以看到，无论是浏览器内置的 CSS 样式、用户设置的 CSS 样式、@layer 规则中的 CSS 样式，还是开发者设置的 CSS 样式，其中的 CSS 属性只要被设置了 !important，就会拥有一个只属于其自身的级联层级。并且，如果我们观察得足够仔细，就会发现 !important 的级联层级的提升规则是逆向越级，非常有趣。

JS实现简易网页计算器

利用e.target||e.srcElement，获取到触发事件的元素，||连接两个语法是为了解决不同浏览器的兼容性问题。

获取到触发事件元素的具体值之后，判断元素值是否等于“=”和“C”，这两个按钮是做区别于普通字符串拼接及计算的其他功能。

C做清屏处理：判断触发事件的按钮值是否为C，若为C，屏幕中只显示0；

=做计算处理：判断触发事件的按钮值是否为=，若为=，利用eval()方法计算屏幕上的公式；

其他触发事件的按钮直接做字符串拼接显示在屏幕上。

1款超炫的CSS3复选框(Checkbox)

复选框（Checkbox）在各个浏览器中的效果不一致，因此很多 Web 开发人员会自己重新设计一套界面和使用体验都更佳的复选框功能。下面就给大家分享1款超炫的复选框（Checkbox）效果，纯CSS3实现，未使用任何图片。

温馨提示：为保证最佳的效果，请在 IE10+、Chrome、Firefox 和 Safari 等现代浏览器中浏览。