如何让网页中的JS函数自动执行？

JavaScript013

如何让网页中的JS函数自动执行？,第1张

functionn MyAutoRun(){//以下是您的函数的代码，请自行修改先！\x0d\x0aalert("函数自动执行哦！")} 下面，我们就针对上面的函数，让其在网页载入的时候自动运行！ ①第一种方法 将如上代码改为： \x0d\x0afunctionn MyAutoRun(){//以下是您的函数的代码，请自行修改先！\x0d\x0aalert("函数自动执行哦！")}window.onload=MyAutoRun//仅需要加这一句\x0d\x0a ②第二种方法 修改网页的Body为： 或者改为： ③第三种方法 使用JS定时器来间断性的执行函数： setTimeout("MyAutoRun()",1000)//隔1000毫秒就执行一次MyAutoRun()函数 实现方法，将最上面的那JS函数，改为： \x0d\x0afunctionn MyAutoRun(){//以下是您的函数的代码，请自行修改先！\x0d\x0aalert("函数自动执行哦！")}setTimeout("MyAutoRun()",1000)//这样就行拉\x0d\x0a 其它的方法比较特殊，也不常用，通用性也不大，偶就不介绍了，拜拜！

其实不要被“函数表达式”的函数两字束缚了，其实就是“表达式”，这样一来就会好理解了。在表达式的前面加个逻辑运算符（比如!取反）或数学运算符（比如+），js就会认为你是要获取表达式的值，这样它就会去运行这个表达式，这样函数就会被执行了。比如说有下面这个函数声明：

function abc(){return true}

那么执行 !abc() 时js就会先去调用abc函数，然后再把返回值取反，这个好理解吧？

而现在把abc直接替换为匿名函数：

!function(){return true}()

js也一样会把!后面的部分当作一个表达式去运行，然后把取回的值进行取反，这个过程中匿名函数就会自动运行了。

其实 (function(){})()和 (function(){}()) 能够自执行的原理也是一样的，我加黑的那对括号其实也是运算符（就好比小学数学中的 (2+3)×4 中的括号），这样js就会把括号里的部分当作表达式来处理了。

所以，说到底函数的自执行其实并不是js的有意为之，而是一种无心插柳的行为，说是旁门左道也不为过，但它确实可以帮我们实现一些特殊的要求，所以就慢慢变成一种正经用法了。

这个主要是基础理解不够的原因。

打开页面时，HTML CSS Javascript 分别有加载器加载。

可执行的js代码会自动执行。

但是事件函数，是需要出发事件后才可以执行的。

下面是简单的代码，仅供参考：

<body>

    <input type="button" id="btn" />

    <div style="width:100px height:100px background:#ccc"></div>

</body>

<script>

    var oBtn = document.querySelector('#btn')

    var oDiv = document.querySelectorAll('div')[0]

    oBtn.onclick = function(){

        oDiv.style.display = 'none'  //当页面加载时，div是显示的，但是当点击按钮后，div消失。

    }

</script>