Javascript - demo 与捷径

Posted 2020-08-29

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Javascript - demo 与捷径相关的知识，希望对你有一定的参考价值。

1、页面的后退、刷新、前进

function back(){
    history.go(-1); // 后退
}
function forward(){
    history.go(+1); // 前进 1 页
}
function refresh(){
    history.go(0); // 刷新
}

2、保护自己的页面不被第三方页面放入iframe中

if(self != top) {
    top.location = self.location;
}

3、当前页面调用其他页面

也可以使用iframe来加载另一个页面，但有些IE是禁止使用的，所以本例使用object方式实现

<html>
<head>
    <title></title>
</head>
<body>
    <object type="text/x-scriptlet" width="350" height="300" data="http://www.baidu.com"></object>
</body>
</html>

4、倒计时

<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<script type="text/javascript">
    // 获取当前时间
    var startday = new Date();
    var clockStart = startday.getTime();


    function initStopwatch(){
        var myTime = new Date();
        var timeNow = myTime.getTime();
        // 获取间隔时间
        var timeDiff = timeNow - clockStart;       
        // 因为时间以毫秒为单位,并且转化为字符串类型才可以使用indexof和subsring
        var diffSecs = "" + timeDiff / 1000;       
        // 因为返回的毫秒还是有小数点的，所以要去掉
        diffSecs = diffSecs.substring(0,diffSecs.indexOf("."));
        // 返回间隔秒数
        return diffSecs;                        
    }

    function getSecs(){
        var mySecs = initStopwatch();
        // 以倒计时的方式显示时间
        mySecs1 = 10 - mySecs + "秒";
        document.form1.timespent.value = mySecs1;
        window.setTimeout(‘getSecs()‘,1000);
    }
</script>
<body onload="getSecs()">

<form name=form1>
    <input name="timespent" />
</form>

</body>
</html>

5、在页面中动态添加 Script 脚本

<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>

<script type="text/javascript">
    o = document.createElement(‘script‘);
    o.text = "alert(‘test!‘)";    
    document.documentElement.childNodes[0].appendChild(o);

    o = document.createElement(‘script‘);
    o.src = "index.js";    
    document.documentElement.childNodes[0].appendChild(o);
</script>

<body>

</body>
</html>

6、使用 javascript 传递页面参数

<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>

<script type="text/javascript">
    function GetArgs(parms,parmName) {
        var argIndex = parms.indexOf(‘?‘);
        var arg = parms.substring(argIndex + 1);
        var valArg = "";
        var arr_args = arg.split("&");
        for (var i = 0; i < arr_args.length; i++) {
            var str = arr_args[i]
            var arg = str.split("=");
            if(arg.length <= 1) continue;
            if(arg[0] == parmName) valArg = arg[1];
        };
        return valArg;
    }

    function PageParm() {
        var myname = GetArgs(window.location.href,"name");
        alert("参数name的值为：" + myname);
    }
</script>

<body onload = "PageParm()">

</body>
</html>

以上是关于Javascript - demo 与捷径的主要内容，如果未能解决你的问题，请参考以下文章

javascript制作图javascript制作图片无限懒加载，轻松又实用片无限懒加载，轻松又实用

JavaScript Event Loop 机制详解与 Vue.js 中实践应用

iOS的webview和JavaScript的交互方法，求个小Demo，

Linux(内核剖析):07---进程调度总体概述（多任务系统策略时间片）

Javascript节点的概念与操作

JavaScript基础_04对象与函数

Javascript - demo 与 捷径

Javascript - demo 与捷径