第二十七课：JavaScript-优快云博客

本文链接：https://blog.youkuaiyun.com/xinyoulinxi0512/article/details/108247120

JS代码添加方式

内部方式添加js代码, script标签位置没有要求
引入js文件的script标签中, 不能再写js代码

ECMAScript

数据类型：弱类型

var b = 1;//undefined,未定义类型

typeof: 可以查看变量类型

undefined: 未定义

事件：与标签有关
onblur - 失去焦点, 通常用于input标签
onchange - 内容改变, 通常用于select标签
onclick - 单击, 可以用于所有元素
onfocus - 获得焦点, 通常用于input标签
onkeydown - 键盘按下, 通常用于input标签
onload - 某个页面或图像被完成加载, 通常用于body标签
onmouseover - 鼠标被移到某元素之上
onmouseout - 鼠标移开
onsubmit - 提交按钮被点击, 用于form标签

<script>
    a = 1;
    function f() {
        alert(a++ + "click")
    }
</script>

例子：登陆页面遇到错误后自动跳转

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>作业</title>
    <style>
    body{
        background-repeat: no-repeat;
        background-image:url("img/error.png");
    }
    #word{
        margin-left: 200px;

    }
    .txt{
        color: white;
        font-size: 30px;
        margin-top: 450px;
        float: left;
    }
    #linked{
        margin-left: 700px;
        padding-top: 455px;
    }
    #linked a{
        font-size: 15pt;
        color: yellow;
        text-decoration: none;
    }
</style>
    <script>
        window.onload = function() {
            timer = setInterval("denglu()",5000);
            timer1 = setInterval("time1()",1000);
        }
        function m1() {
            timer1 = setInterval("time1()",1000);
        }
        function denglu(){
            location.href="index.html";
        }
        i = 5;
        function time1() {
            i--;
            clearInterval(timer1);
            if(i<0){
                clearInterval(timer1);
            }
            document.getElementById("word1").innerHTML =i;
            m1();
        }
    </script>
</head>

<body>
<div id="word" class="txt">遇到错误</div>
<div><span class="txt" id="word1">5</span></div>
<div class="txt">秒后自动跳转，立即跳转请点击</div>
<div id="linked"><a href="index.html" target="_blank">返回</a></div>
</body>
</html>

例子二：广告轮播图

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>作业2</title>
    <style>

    </style>
    <script>
        onload = function () {
            timer = setInterval("changeImg()",3000);
        }
        image=["img/apple.jpg","img/daffodil.jpg","img/daisy.jpg","img/rose.jpg"]
        var index = 0;
        function changeImg(){
            index++;
            var img2 = document.getElementById("img1");
            console.log(image[index]);
            img2.src = image[index];
                if(index == 3){
                    index = -1;
                }
        }
        function stopimage(obj) {
            console.log(obj);
            //var image3 =
        }
    </script>
</head>
<body>
<h1>1、广告轮播</h1>
<div ><img src="img/apple.jpg" id="img1"></div>
<div onmouseover="stopimage(this)">
    <button style="font-size: 30px" >1</button>
    <button style="font-size: 30px">2</button>
    <button style="font-size: 30px">3</button>
    <button style="font-size: 30px">4</button>
</div>
</body>
</html>