JavaScript 基础语法

1 引入JavaScript脚本

• 直接在元素上撰写

<div onclick="javascript:alert('点击了我！');" class="demo" id="s1">JavaScript基础语法</div>

• 直接在网页里撰写脚本，script标签包围

<div onclick="clc()" class="demo" id="s1">JavaScript基础语法</div>
<script>
    function clc(){
        alert('点击了我！');
    }
</script>

• 引入外部JS脚本

<script src="./demo.js"></script>

• JS脚本一般写在body标签的最后之前

2 获取网页元素

<script>
    // 根据class获取元素
    divs = document.getElementsByClassName('demo');
    console.log(divs[0].innerText);
    // 根据id获取元素
    divd = document.getElementById('s2');
    console.log(divd.innerText);
</script>

3 设置网页元素内容

<script>
    // 根据class获取元素
    divs = document.getElementsByClassName('demo');
    console.log(divs[0].innerText);
    // 根据id获取元素
    divd = document.getElementById('s2');
    divd.innerText = "JavaScript你好！";
    divd.style.color = "red";
</script>

4 日期

<script>
    var dt=new Date();
    document.getElementById("s1").innerText = dt.getFullYear() + "-" + dt.getMonth() + "-" + dt.getDate() +  " " + dt.getHours() + ":" + dt.getMinutes() + ":" + dt.getSeconds();
</script>

5 数学

<script>
Math.abs();//绝对值
Math.sqrt();//返回平方根
Math.ceil();//上舍入
Math.floor();//下舍入
Math.exp();//返回e的指数
Math.log();//返回以e为敌的对数
Math.max(x,y)/min(x,y);//返回x，y之间的最大最小值
Math.pow(x,y);//返回x的y次幂
Math.sin/cos/tan();
Math.acos();//反余弦
Math.asin();//反正弦
Math.atan();//反正切 返回-PI/2至PI/2之间的弧度值
Math.atan2();//反正切 返回从x轴到（x，y）-PI/2至PI/2之间的弧度值
</script>

6 典型函数

• alert() ： 弹出提示

• console.log() ：打印控制台日志

• eval() ：将字符表达式转为实际的运算

<script>
    s = "1 + 3 * 3 / 7";
    alert(eval(s));

</script>

• setInterval：循环函数

<script>
    setInterval(function(){
        var dt=new Date();
        document.getElementById("s1").innerText = dt.getFullYear() + "-" + dt.getMonth() + "-" + dt.getDate() +  " " + dt.getHours() + ":" + dt.getMinutes() + ":" + dt.getSeconds();
    }, 1000);
</script>

• setTimeout：定时函数

<script>
    setTimeout(function(){
        document.getElementById("tips").innerText = "";
    }, 3000)
</script>