网页常用笔记

这篇只是个人工作的笔记，用来记录一些我常用又记不住的代码，杂乱无章，并没有对相关知识归纳整理。如有问题，请指教

1.使用按钮，div，a标签等实现点击回到上一页：

<a href="javascript:history.go(-1);" ></a>
<div onclick="self.location=document.referrer;"></div>

history.go(-1)　　-->返回上一页　　　　history.go(-2)　　-->返回上两页

window.history.back(); 　　-->返回上一页　　window.location.go(-1);　　-->刷新上一页

window.history.back();   location.reload();　　-->返回上一页，刷新当前页

2.css样式中,动态计算高度或宽度

width: calc(100vh - 64px);
width:-moz-calc(100% - 64px);

/*写给不支持calc()的浏览器*/
width:-moz-calc(100%  -  64px);
width:-webkit-calc(100%  -  64px);
width: calc(100% - (100%  -  64px);

vh就是当前屏幕可见高度的1%，也就是说
height:100vh == height:100%;
但是当元素没有内容时候，设置height:100%，该元素不会被撑开，此时高度为0，设置height:100vh，该元素会被撑开屏幕高度一致。

3.禁止点击

$(".eZnTwy").css({ "pointer-events": "none" })

$(this).attr({“disabled”:“disabled”});

4.前端h5的存储方式：

• 本地存储localstorage
• 会话存储sessionstorage
• 离线缓存application cache

我只知道这三种存储方式，肯定还有别的，但是我只用本地存储和会话存储。以下是我总结的区别：

window.sessionStorage 会话存储：存储空间约5M
　　保存在内存中；生命周期为关闭浏览器窗口，即窗口关闭时数据销毁（在同一个窗口下数据可以共享）。
window.localStorage 本地存储：存储空间约20M
　　有可能保存在浏览器内存里，有可能在硬盘里；永久生效，除非手动删除（比如清理垃圾的时候）；可以多窗口共享。

这两个只能存储字符串，可以将对象 JSON.stringify() 编码后存储。

//本地存储对象
localStorage.setItem("notice", JSON.stringify(noticeList[num]));
//读取本地存储的对象
var notice = JSON.parse(localStorage.getItem("notice"));

//session存储json数组对象
sessionStorage.setItem("payinfoList", JSON.stringify(res.data));
//读取
var payinfoList = JSON.parse(sessionStorage.getItem("payinfoList"));

 5.动态拼接方法名并调用方法：eval()函数

//需要调用的方法：lotteryLm0(str),lotteryLm1(str),lotteryLm2(str),lotteryLm3(str)
//var lmball = lotteryCommon.lotteryLm2(str);
var method = "lotteryLm" + $("#adbetType").val();
var lmball = eval("lotteryCommon." + method + "('" + str + "')");

eval() 函数会将传入的字符串当做 JavaScript 代码进行执行

 6.实现点击空白关闭弹框，点击父级控件空白部分关闭，点击子级控件内容则无效：

<div class="ReactModalPortal isHidden">
    <div class="ReactModal__Overlay ReactModal__Overlay--after-open" style="position: fixed; top: 0px; left: 0px; right: 0px; bottom: 0px; background-color: rgba(255, 255, 255, 0.75); overflow: auto; padding: 12px 0px; z-index: 999;">
        <div class="ReactModal__Content ReactModal__Content--after-open bet-amount-popup" tabindex="-1" role="dialog" aria-label="Preset">
            <div class="oc2pj9-1 eCLKjw"><span class="title">预设金额</span></div>
            <div class="fieldset kjMoney"><input class="round-input" type="number" placeholder="设置金额" name="min" value="10" oninput="changeText()" onKeypress="return (/[\d]/.test(String.fromCharCode(event.keyCode)))" pattern="[0-9]*" style="text-align: center;"></div>
            <div class="fieldset kjMoney"><input class="round-input" type="number" placeholder="设置金额" name="min" value="20" oninput="changeText()" onKeypress="return (/[\d]/.test(String.fromCharCode(event.keyCode)))" pattern="[0-9]*" style="text-align: center;"></div>
            <div class="fieldset kjMoney"><input class="round-input" type="number" placeholder="设置金额" name="min" value="30" oninput="changeText()" onKeypress="return (/[\d]/.test(String.fromCharCode(event.keyCode)))" pattern="[0-9]*" style="text-align: center;"></div>
            <div class="fieldset kjMoney"><input class="round-input" type="number" placeholder="设置金额" name="min" value="40" oninput="changeText()" onKeypress="return (/[\d]/.test(String.fromCharCode(event.keyCode)))" pattern="[0-9]*" style="text-align: center;"></div>
            <div class="fieldset kjMoney"><input class="round-input" type="number" placeholder="设置金额" name="min" value="50" oninput="changeText()" onKeypress="return (/[\d]/.test(String.fromCharCode(event.keyCode)))" pattern="[0-9]*" style="text-align: center;"></div>
            <div class="sc-10c8euj-2 lkbPjo">
                <label class="sc-10c8euj-1 cbnCDY"><input class="sc-10c8euj-0 kYwamN" type="radio" name="persist-amounts" value="on" checked="">启用</label>
                <label class="sc-10c8euj-1 cbnCDY"><input class="sc-10c8euj-0 kYwamN" type="radio" name="persist-amounts" value="off">停用</label>
            </div>
            <div class="fieldset"><button class="field-button btn_editKjMoney" onclick="changeOk()" disabled>确认</button></div>
        </div>
    </div>
</div>



<script>
　　　　//点击空白关闭弹框
        $(".ReactModalPortal .ReactModal__Overlay").on("click", function () {//点击父级元素关闭
            closeDiv('.ReactModalPortal');
        });
        $(".bet-amount-popup").on("click", function (e) {//点击子级不受影响
            e.stopPropagation();
        });
</script>

 7.手机端加载嵌套页面，不适用iframe框架时，可以使用load()方法

<div class="sc-1v8csmt-1 jbpesJ" id="ballPage">
            @*将页面加载到这里*@
        </div>

<script>

$("#ballPage").load('/Wap/' + type + 'View', "", function (re) {
　　　　　　　//加载页面后执行的代码
            getGameMsg();
            //现 切换页面
            $("div[cpType='" + type + "']").find("a.left-menu-list-item").first().click();
            //getLotteryOdds();
        }).show();

</script>