2024/11/6日工作总结

学习JS基础知识：
1.字符串：

点击查看代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<script>
    var str1 = new String("abc");
    var str2 = "abc";
    var str3 = 'abc';

    //length
    //alert(str3.length);

    //trim():去除字符串前后两端的空白字符
    var str4 = "      abc     ";
    alert(1+str4+1);
    alert(1+str4.trim()+1);


</script>

</body>
</html>

2.自定义对象：

点击查看代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<script>
    var person = {
        name : "zhangsan",
        age : 23,
        eat : function (){
            alert("干饭~");
        }
    }

    alert(person.name);
    alert(person.age);
    person.eat();


</script>

</body>
</html>

3.window对象：

点击查看代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
    //alert
    /*window.alert("abc");
    alert("abc");*/

    //confirm,点击确认返回true
    /*var flag = confirm("确认删除？");
    alert(flag);

    if(flag){
        //删除逻辑
    }*/

    //定时器
    /*
    * setTimeout(function,毫秒值):在一定时间间隔执行一个function，只执行一次
    *
    * setInterval(function,毫秒值）:......,循环执行
    *
    * */

    /*setTimeout(function (){
        alert("hehe");
    },3000)*/

    setInterval(function (){
        alert("hehe");
    },2000)


</script>
</body>
</html>

4.定时器案例：

点击查看代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<input type="button" onclick="on()" value="图一">
<img id="myImage" border="0" src="../imgs/年宝1.png">
<input type="button" onclick="off()" value="图二">

<script>
    function on(){
        document.getElementById('myImage').src='../imgs/年宝3.png';
    }

    function off(){
        document.getElementById('myImage').src='../imgs/年宝1.png';
    }

    var x = 0;
    setInterval(function () {
        if(x%2 == 0){
            on();
        }else {
            off();
        }
        x++;

    },1000)


</script>

</body>
</html>

5.Location对象：

点击查看代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<script>

    /*alert("要跳转了");
    location.href = "https://www.baidu.com";
*/

    //3秒跳转到首页
    document.write("3秒跳转到首页...")
    setTimeout(function (){
        location.href = "https://www.baidu.com";
    },3000)


</script>


</body>
</html>

6.DOM：

点击查看代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<img id="龙泡泡" src="../imgs/年宝1.png"> <br>

<div class="cls">vivy</div><br>
<div class="cls">vimiiii</div><br>

<input type="checkbox" name="hobby">电影
<input type="checkbox" name="hobby">旅游
<input type="checkbox" name="hobby">游戏
<br>

<script>
    //获取：使用Document对象的方法来获取

    //getElementById:id获取，返回一个Element对象
    var img = document.getElementById("龙泡泡");
    //alert(img);
    img.src = "../imgs/年宝3.png";

    //getElementByTagTagName:标签名称获取，返回Element对象数组
    var divs = document.getElementsByTagName("div");
    for (let i = 0; i < divs.length; i++) {
        /*divs[i].style.color = 'red';*/
        divs[i].innerHTML = "hehe";
    }


    //getElementsByName:name属性值获取，返回Element对象数组
    var hobbys = document.getElementsByName("hobby");
    for (let i = 0; i < hobbys.length; i++) {
        /*alert(hobbys[i]);*/
        hobbys[i].checked = true;
    }

    //getElementsByClassName:根据class属性获取，返回Element对象数组
    var clss = document.getElementsByClassName("cls");
    /*for (let i = 0; i < clss.length; i++) {
        alert(clss[i]);
    }*/



</script>

</body>
</html>
posted @ 2024-11-07 21:00  vivi_vimi  阅读(14)  评论(0)    收藏  举报