JS代码练习（中）---js函数+jsDOM操作+JS高级教程——cn教程可运行代码

于 2021-11-04 18:50:12 发布
阅读量114 收藏
点赞数 3
分类专栏： # JavaScript 文章标签： javascript 前端 html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hannah2233/article/details/121148636
版权

文章目录

一、JS函数

1-1 js函数定义.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>javascript函数定义</title>
</head>

<body>
    <script>
        // 函数表达式
        var myFunction = function(a, b) {
            return a * b
        };
        var z = myFunction(4, 3);
        console.log(z);


        // 箭头函数
        // 之前：
        // var x = function(x, y) {
        //     return x * y;
        // }

        const x = (x, y) => x * y;

        // js函数参数 ： 函数显示参数（Parameters）与隐式参数（Arguments）
    </script>

</body>

</html>

1-2 js闭包.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>javaScript闭包</title>
</head>

<body>
    <!-- javascript内嵌函数 -->
    <script>
        function add() {
            var counter = 0;

            function plues() {
                counter += 1;
            }
            plus();
            return counter;
        }
    </script>

</body>

</html>

二、 DOM操作.html

2-1 DOMHTML和CSS和事件.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DOM 改变HTML和CSS</title>
</head>

<body onload="checkCookies()">
    <script>
        function checkCookies() {
            if (navigator.cookieEnabled == true) {
                alert("Cookie可用")
            } else {
                alert("Cookie不可用")
            }
        }
    </script>
    <!-- 1. 改变HTML属性 -->
    <img src="" alt="" id="image">
    <script>
        document.getElementById("image").src = ""
    </script>

    <!-- 改变HTML样式 -->
    <p id="id">Hello World!</p>
    <p id="id2">Hello World!</p>
    <script>
        document.getElementById("id").style.color = "blue";
        document.getElementById("id2").style.fontFamily = "Arial";
        document.getElementById("id2").style.fontSize = "larger";
    </script>

    <!-- 对事件做出反映 -->
    <h1 onclick="this.innerHTML = 'aaaaaa'">点击我</h1>
    <h1 onclick="changetext(this)">点击文本2</h1>
    <script>
        function changetext(id) {
            id.innerHTML = "ooooo";
        }
    </script>

    <!-- HTML事件属性以及使用HTML DOm来分配事件 -->
    <!-- <button οnclick="displayDate()">点这里</button>
    <input type="text" id="fname" οnchange="upperCase()">
    <script>
        document.getElementById("myBtn").onclick = function() {
            displayDate()
        }
    </script> -->


    <!-- onchange事件 -->
    <input type="text" id="fname" onchange="upperCase()">
    <script>
        function upperCase(e) {
            var x = document.getElementById("fname");
            x.value = x.value.toUpperCase();
        }
    </script>

    <!-- onMouseover和Onmouseout事件 -->
    <div onmouseover="mOver(this)" onmouseout="mOut(this)" style="background-color: aqua;width: 120px;height: 200px;">Mouse Over Me</div>
    <script>
        function mOver(obj) {
            obj.innerHTML = "Thank You"
        }

        function mOut(obj) {
            obj.innerHTML = "Mouse Over me"
        }
    </script>

    <!-- onmousedown和onmouseup -->
    <img id="myimage" onmousedown="lighton()" onmouseup="ligthoff()" src="https://www.runoob.com/try/demo_source/bulboff.gif" width="100" height="180" />
    <script>
        function lighton() {
            document.getElementById('myimage').src = "https://www.runoob.com/try/demo_source/bulbon.gif";
        }

        function ligthoff() {
            console.log("进来了");
            document.getElementById('myimage').src = "https://www.runoob.com/try/demo_source/bulboff.gif";
        }
    </script>
</body>

</html>

2-2 EventListener.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>addEventListener() 方法</title>
</head>

<body>
    <!-- // addEventer()添加的事件句柄不会覆盖已经存在的事件 -->
    <button id="id" onmouseover="this.style.backgroundColor='red'" onmouseout="this.style.backgroundColor=''">会有点击事件嘛</button>
    <script>
        document.getElementById("id").addEventListener("click", displayDate);

        function displayDate() {
            document.getElementById("id").innerHTML = Date();
        }
    </script>

    <!-- 向window对象添加不同类型的事件： -->'
    <p id="demo">拖拉屏幕我会变哦</p>
    <script>
        window.addEventListener("resize", function() {
            document.getElementById("demo").innerHTML = Math.random();
        });
        console.log(Math.random());
    </script>

    <!-- 传递参数 -->
    <h2>以下演示按钮执行计算</h2>
    <button id="myBtn">点我</button>
    <p id="demo2"></p>
    <script>
        var p1 = 2;
        var p2 = 4;
        document.getElementById("myBtn").addEventListener("click", function() {
            myFunction(p1, p2);
        })

        function myFunction(a, b) {
            var result = a * b;
            document.getElementById("demo2").innerHTML = result;
        }
    </script>

    <!-- addEventListener()冒泡和捕获，第三个参数是true时，为捕获传递 -->

</body>

</html>

2-3 DOM元素.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DOM元素</title>
</head>

<body>
    <!-- // 创建新的HHTML元素，在文本流中添加---appendChild添加到结束 -->
    <!-- <div id="div1">
        <p id="p1">这是一个段落。</p>
        <p id="p2">这是另外一个段落。</p>
    </div>
    <script>
        var para = document.createElement("p");
        var node = document.createTextNode("这是一个新的段落吧");
        para.appendChild(node);
        var element = document.getElementById("div1");
        element.appendChild(para);
    </script> -->
    <hr>
    <div id="div2">
        <p id="p1">这是一个段落。</p>
        <p id="p2">这是另外一个段落。</p>
    </div>

    <!-- 创建新的HTML元素 -- insertBefore() ： 添加到开始的位置-->
    <script>
        var para = document.createElement("p");
        var node = document.createTextNode("这是一个新的段落");
        para.appendChild(node);

        var element = document.getElementById("div2");
        var child = document.getElementById("p1");
        element.insertBefore(para, child);
    </script>

    <hr>
    <!-- 移除已经存在的元素 ： 知道该元素的父元素-->
    <div id="div3">
        <p id="p3">这是一个段落。</p>
        <p id="p4">这是另外一个段落。</p>
    </div>
    <script>
        var parent = document.getElementById("div3");
        var child = document.getElementById("p3");
        parent.removeChild(child);
    </script>
    <script>
        // 已知要查找的子元素，然后查找其父元素，再删除这个子元素
        var child = document.getElementById("p1");
        child.parentNode.removeChild(child);
    </script>
    <hr>
    <!-- 替换 HTML 元素 - replaceChild() -->
    <!-- 用para替换child -->
    <div id="div4">
        <p id="p5">这是一个段落。</p>
        <p id="p6">这是另外一个段落。</p>
    </div>
    <script>
        var para = document.createElement("p");
        var node = document.createTextNode("这是一个新的段落");
        para.appendChild(node);

        var parent = document.getElementById("div4");
        var child = document.getElementById("p5");
        parent.replaceChild(para, child);
    </script>
</body>

</html>

2-4 HTML celection对象.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScript HTML DOM 集合(Collection)</title>
</head>

<body>
    <!-- HTML Collection 对象 -->
    <p>我是对象111</p>
    <p>我是对象121</p>
    <p id="333">我是对象131</p>
    <p>我是对象1401</p>
    <p>我是对象1181</p>
    <p>我是对象1118</p>
    <p>我是对象1171</p>
    <p>我是对象1131</p>
    <p>我是对象1121</p>
    <p>我是对象1141</p>
    <script>
        var x = document.getElementsByTagName("p");
        var x1 = document.getElementById("333").innerHTML;
        console.log(x1);
        y = x[1];
        console.log(y);
    </script>


    <!-- HTMLCollection对象length属性 -->
    <button id="demo" onclick="my()">点击会显示上面的行数哦？！？</button>
    <button id="demo2" onclick="my2()">点击后所有p标签的背景颜色变成红色</button>
    <script>
        function my() {
            var myCollectionLength = document.getElementsByTagName("p");
            document.getElementById("demo").innerHTML = myCollectionLength.length;
        }
        document.getElementById("demo2").addEventListener("click", changered);

        function changered() {
            var i;
            var myCollection = document.getElementsByTagName("p");
            for (i = 0; i < myCollection.length; i++) {
                myCollection[i].style.backgroundColor = "red";
            }
        }

        // HTMLCollection无法使用数组的方法: valueOf(), pop()或join()
    </script>




</body>

</html>

2-5 NodeList对象.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JS HTML DOM 集合 -- NodeList对象</title>
</head>

<body>
    <!-- NodeList对象是一个从文档中获取的节点列表（集合） -->
    <!-- 一些旧版本浏览器中的方法（如：getElementsByClassName()）返回的是 NodeList 对象，而不是 HTMLCollection 对象。
所有浏览器的 childNodes 属性返回的是 NodeList 对象。
大部分浏览器的 querySelectorAll() 返回 NodeList 对象。 -->

</body>

</html>

三、JS高级教程

3-1 JS对象.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScript对象</title>
</head>

<body>
    <!-- jS中的所有的事物都是对象: 字符串/数值/数组/函数 -->
    <!-- 访问对象的属性 -->
    <script>
        var message = "Hello World!";
        var x = message.length;
        console.log(x);
    </script>

    <!-- 创建对象的新实例,并向其添加四个属性: -->
    <script>
        person = new Object();
        person.firstname = "John";
        person.lastname = "Doe";
        person.age = 50;
        person.eyecolor = "blue";
    </script>
    <!-- 也可以使用对象字面量来创建对象 -->
    <script>
        person = {
            firstname: "John",
            lastname: "Doe",
            age: 50,
            eyecolor: "blue"
        };
    </script>
    <!-- 对象构造器 -->
    <script>
        function person(firstname, lastname, age, eyecolor) {
            this.firstname = firstname;
            this.lastname = lastname;
            this.age = age;
            this.eyecolor = eyecolor;

            this.changeName = changeName;

            function changeName(name) {
                this.lastname = name;
            }
        }
        // 创建JS对象实例
        var myFather = new person("John", "Doe", 50, "blue");
        console.log(myFather);
        myMother.changeName("Doe");
    </script>

    <!-- JS 的 for...in 循环 -->
    <script>
        var person = {
            fname: "John",
            lname: "Doe",
            age: 25
        };
        for (x in object) {
            txt = txt + person[x];
        }
    </script>

</body>

</html>

3-2 JS的prototype.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JS 的原型对象</title>
</head>

<body>
    <!-- 所有的prototype对象都会从一个prototype中继承属性和方法 -->
    <script>
        function Person(first, last, age, eyeclor) {
            this.firstName = first;
            this.lastName = last;
            this.age = age;
            this.eyeColor = eyeColor;
        }
        // 已存在的构造器的对象中是不能添加新的属性的
        Person.nationlaity = "English";
    </script>

    <!-- prototype继承 -->
    <!-- 所有JavaScript中的对象都是位于原型链顶端的Object的实例 -->
    <!-- 使用prototype属性可以给对象的构造函数添加新的属性 -->
    <div id="demo2">我父亲的国际是哪里呢?</div>
    <script>
        function Person(first, last, age, eyecolor) {
            this.firstName = first;
            this.lastName = last;
            this.age = age;
            this.eyeColor = eyecolor;
        }
        Person.prototype.nationality = "English";
        var myFather = new Person("John", "Doe", 50, "blue");
        document.getElementById("demo2").innerHTML = "我父亲的国籍是" + myFather.nationality;
    </script>

    <!-- 可以直接使用prototype属性可以给对象的构造函数添加新的方法 -->
    <div id="demo3">父亲父亲</div>
    <script>
        function Person(first, last, age, eyecolor) {
            this.firstName = first;
            this.lastName = last;
            this.age = age;
            this.eyeColor = eyecolor;
        }

        Person.prototype.name = function() {
            return this.firstName + " " + this.lastName;
        }

        var Father = new Person("John", "Doe", 50, "blue");
        document.getElementById("demo3").innerHTML = "我的父亲是" + Father.name();
    </script>
</body>

</html>

3-3 3.JavaScript Number对象.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JS的number对象</title>
</head>

<body>
    <!-- 使用toString()方法输出16进制等 -->
    <script>
        var myNumber = 128;
        myNumber.toString(16);
        myNumber.toString(8);
        myNumber.toString(2);
    </script>;
    <!-- +-Infinity -->
    <!-- 除以0产生了无限 -->
    <script>
        var x = 2 / 0;
        var y = -2 / 0;
    </script>

    <!-- 在字符串中查找字符串 -->
    <p id="p1">Click the button to locate where "locate" first occurs.</p>
    <p id="p2">0</p>
    <button onclick="myFunction()">点我</button>
    <script>
        function myFunction() {
            var str = document.getElementById("p1").innerHTML;
            var n = str.indexOf("locate");
            document.getElementById("p2").innerHTML = n + 1;
        }
    </script>

    <!-- 内容匹配 -->
    <!-- match()函数用来查找字符串中特定的字符，并且如果找到的话，则返回这个字符。 -->
    <hr>
    <script>
        var str = "Hello world!";
        document.write(str.match("world") + "<br>");
        document.write(str.match("World") + "<br>");
        document.write(str.match("world!"));
    </script>


    <!-- replce替换内容 -->
    <script>
        str = "Please visit Microsoft!"
        var n = str.replace("Microsoft", "Runoob");
        console.log(n);
    </script>

    <!-- 字符串转为数组 : 使用split()函数 -->
    <script>
        txt = "a,b,c,d,e";
        txt.split("9"); // 使用,分隔
        console.log(txt);
        txt.split("|"); // 使用,分隔
        console.log(txt);
        txt.split("q"); // 使用,分隔
        console.log(txt);
        txt.split("s"); // 使用,分隔
        console.log(txt);
    </script>



</body>

</html>

3-4 date.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Date对象</title>
</head>

<body onload="startTime()">
    这里显示的是页面刷新之后的newDate :::::
    <i id="newDate"></i>
    <p id="demo">点击按钮展示相应按钮的变化</p>
    <button onclick="myFunction()">点我获取当前年份: getFullYear()</button>
    <br>
    <hr>

    <button onclick="myFunction2()">点我获取1970年1月1日至今的毫秒数: getTime()</button>
    <br>
    <hr>

    <i>记住JS月份是从0到11，10是11月</i>
    <button onclick="myFunction3()">使用setFullYear()设置具体的日期，出现的是毫秒数，离谱事件</button>
    <br>
    <hr>

    <button onclick="myFunction4()">点击将utc日期和时间转换字符串</button>
    <hr>
    <hr>
    <button onclick="myFunction5()">使用getDay()来显示星期，而不仅仅是数字</button>
    <hr>
    <div id="txt"></div>

    <!-- 使用Date()方法获得当前的日期 -->
    <script>
        document.getElementById("newDate").innerHTML = new Date();

        function myFunction() {
            var d = new Date();
            var x = document.getElementById("demo");
            // 获取年份
            x.innerHTML = d.getFullYear();
        }

        function myFunction2() {
            var d = new Date();
            var x = document.getElementById("demo");
            // 获取获取1970年1月1日至今的毫秒数
            x.innerHTML = d.getTime();
        }

        function myFunction3() {
            var d = new Date();
            var x = document.getElementById("demo");
            // 使用setFullYear()设置具体的日期
            x.innerHTML = d.setFullYear(2021, 11, 5);
            document.write(d);
        }

        function myFunction4() {
            var d = new Date();
            var x = document.getElementById("demo");
            // 使用setFullYear()设置具体的日期
            x.innerHTML = d.toUTCString();
        }

        function myFunction5() {
            var d = new Date();
            var weekday = new Array(7);
            weekday[0] = "周日";
            weekday[1] = "周一";
            weekday[2] = "周二";
            weekday[3] = "周三";
            weekday[4] = "周四";
            weekday[5] = "周五";
            weekday[6] = "周六";
            var x = document.getElementById("demo");
            x.innerHTML = weekday[d.getDay()];
        }

        function startTime() {
            var today = new Date();
            var h = today.getHours();
            var m = today.getMinutes();
            var s = today.getSeconds(); // 在小于10的数字前面加一个'0'
            m = checkTime(m);
            s = checkTime(s);
            document.getElementById('txt').innerHTML = h + ":" + m + ":" + s;
            t = setTimeout(function() {
                startTime()
            }, 1000);

        }

        function checkTime(i) {
            if (i < 10) {
                i = "0" + i;
            }
            return i;
        }
    </script>

</body>

</html>

3-5 Arrays对象.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>数组</title>
</head>

<body>
    <script>
        // 创建一个数组
        var myCars = new Array();
        // myCars[0] = 0;
        myCars[1] = 0;
        myCars[2] = "我的我的";
        console.log(myCars);

        // 简洁方式
        var mytwo = new Array("S", "s", "3");

        // 字面
        var mythree = ["aaa", "333", 222];
        console.log(mythree);

        // 你可以在一个数组中包含对象元素、 函数、 数组：
        myArray[0] = Date.now;
        myArray[1] = myFunction;
        myArray[2] = myCars;
    </script>

</body>

</html>

3-6 6. JS Boolean对象.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>布尔对象</title>
</head>

<body>
    <script>
        // 创建Boolean对象
        var myBoolean = new Boolean();
    </script>

</body>

</html>

3-7 7.JSＭａｔｈ对象.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScript Math 对象</title>
</head>

<body>
    <p id="demo">点击对应按钮显示相应的值</p>
    <button onclick="myFunction1()">带你我显示random之后的值</button>
    <hr>
    <button onclick="myFunction2()">点我显示round之后的值</button>
    <hr>
    <button onclick="min_max()">点我显示min_max之间的最大值</button>
    <script>
        function myFunction1() {
            // 四舍五入
            document.getElementById("demo").innerHTML = Math.random();
        }

        function myFunction2() {
            // 四舍五入
            document.getElementById("demo").innerHTML = Math.round(1.4);
        }

        // max和min是返回范围之间的最大值
        function min_max() {
            document.getElementById("demo").innerHTML = Math.max(3, 6);
        }

        // 返回一个 介于0-11之间的随机数
        document.write(Math.floor(Math.random() * 11));
    </script>
</body>

</html>
牛小小小婷～
关注
  • 3
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值