day03 js_01

最新推荐文章于 2024-04-26 16:47:03 发布

娃娃哈哈

最新推荐文章于 2024-04-26 16:47:03 发布

阅读量220

点赞数

分类专栏： web 文章标签： js javascript 脚本语言

本文链接：https://blog.csdn.net/weixin_43525993/article/details/108172510

版权

web 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

1 在html中引入js代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>javascript的快速入门</title>

</head>
<body>

</body>
<!--需求1: 使用JS在网页上输出5个Hello World-->
<script>
    for (var i = 0; i <5; i++) {
        document.write("hellow! <br/>")
    }
</script>
<!--需求2: 引入外部的js-->
<script src="js/out.js"></script>

<!--错误示范1-->
<!--<script src="js/out.js">-->
    <!--for (var i = 0; i <5; i++) {-->
        <!--document.write("hellow! <br/>")-->
    <!--}-->
<!--</script>-->

<!--错误示范2-->
<!--<script src="js/out.js"/>-->
</html>

2 js的三种输出方式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<!--需求1: js的三种 输出方式-->
<script>
    // 将内容输出到浏览器窗体中(课堂上用的比较多, 比较直观)
    document.write("输出方式一: document.write");

    // 将内容输出到控制台(用的最多)
    console.log("输出方式二: console.log");

    // 将内容在弹出框中显示(尽量不要用)
    alert("输出方式三: alert弹出框");
</script>
</body>
</html>

3 js定义变量的细节

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<script>
    // 1 定义变量的三种方式
    var j = 5;
    let k = 6;
    const PI = 3.14;

    // document.write("j = " + j + "<br/>");
    // document.write("k = " + k + "<br/>");
    // document.write("PI = " + PI + "<br/>");

    // ` 飘号,反单引号,
    // document.write(`j = ${j} <br/>`);
    // document.write(`k = ${k} <br/>`);
    // document.write(`PI = ${PI} <br/>`);

    // 1.1 关于弱类型: 变量值的类型可以更换
    var num = 5;
    num = "abc";
    num = true;
    // document.write(`num = ${num}<br/>`);

    var str1 = "abc";
    var str2 = 'def';
    var str3 = `ABC`;
    // document.write(`str1 = ${str1} <br/>`);
    // document.write(`str2 = ${str2} <br/>`);
    // document.write(`str3 = ${str3} <br/>`);

    // 2.作用域不同：var定义的变量在代码块中不受{}限制，let定义的变量是受限制
    {
        var v = 555;
    }
    // document.write(`v = ${v} <br/>`);

    {
        let let1 = 555;
    }
    // document.write(`let1 = ${let1} <br/>`);
    // 3.重新定义变量区别：var可以修改变量的值
    var v3 = 333;
    {
        var v3 = 666;
    }
    // document.write(`v3 = ${v3} <br/>`); // 666

    let let3 = 222;
    {
        let let3 = 444;
    }
    // document.write(`let3 = ${let3} <br/>`); // 222

    // 4.const关键字，如果是对象，它的属性可以修改
    const p1 = {name:"张三", age:13};
    document.write(`p1.name = ${p1.name}, p1.age = ${p1.age} <br/>`); // p1.name = 张三, p1.age = 13
    document.write("p1.name = " +  p1.name + ", p1.age = " +  p1.age + " <br/>"); // p1.name = 张三, p1.age = 13
    document.write("<hr/>")
    // 修改对象的属性
    p1.name = "李四";
    p1.age = 14;
    document.write(`p1.name = ${p1.name}, p1.age = ${p1.age} <br/>`); // p1.name = 张三, p1.age = 13
    document.write("p1.name = " +  p1.name + ", p1.age = " +  p1.age + " <br/>"); // p1.name = 张三, p1.age = 13

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

4 五种数据类型

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

</head>
<body>

<script>
    // 1 定义不同类型的值
    // 2 输出变量的类型
    
    let n1 = 3.14; // 小数
    let n2 = 666; // 整数
    // document.write("n1.type = " + typeof(n1) + "<br/>");
    // document.write("n2.type = " + typeof(n2) + "<br/>");

    let str1 = "abc";
    let str2 = 'ABC';
    let str3 = `bbb`;
    // document.write("str1.type = " + typeof(str1) + "<br/>");
    // document.write("str2.type = " + typeof(str2) + "<br/>");
    // document.write("str3.type = " + typeof(str3) + "<br/>");

    let b = true;
    // document.write("b.type = " + typeof(b) + "<br/>");

    let persoJson = {name:"张三", age:18};
    // document.write("persoJson.type = " + typeof(persoJson) + "<br/>"); // object
    // document.write(persoJson); // [object Object]
    // console.log(persoJson); // {name: "张三", age: 18}

    let aaa;
    document.write("aaa.type = " + typeof(aaa) + "<br/>"); // aaa.type = undefined 未定义类型
    
    let bbb = null;
    document.write("bbb.type = " + typeof(bbb) + "<br/>"); // bbb.type = object


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

5 比较运算符

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<script>
    // 需求; 判断字符串和数字 是否相等
    let str = "55";
    let num = 55;

    document.write(`str == num : ${str == num} <br/>`); // true
    document.write(`str === num : ${str === num} <br/>`); // false === 不仅判断值是否一样, 还判断类型是否一致

    document.write(`str != num : ${str != num} <br/>`); // false
    document.write(`str !== num : ${str !== num} <br/>`); // true

    let num2 = str + num;
    document.write(`num2 = ${num2} <br/>`); // num2 = 5555,  在js中, 字符串和数值参与运算会得到一个更长的字符串

    // 如果字符串参数非加法运算, 会先将字符串转成数字再参与运算, 前提: 字符串可以转成数值
    let num3 = str - 10;
    document.write(`num3 = ${num3} <br/>`); // 45

    let str2 = "abc";
    let num4 = str2 - 10; // NaN: not a num 不是一个数值型
    document.write(`num4 = ${num4} <br/>`);
</script>
</body>
</html>

6 逻辑运算和三元运算

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<script>

    // 逻辑运算
    // 1 在js中 0, null, undifine等 需要理解成 false, 反之 为true
    // 2 短路: 如果左边能够算出整体的结果, 就把左边的结果当作整体的结果; 如果不能继续向后运算
    // document.write((5>4) && (3>6)); // false
    // document.write("<hr/>");
    // document.write(1 && 5); // 5
    // document.write("<hr/>");
    // document.write(0 && 5); // 0
    // document.write("<hr/>");
    // document.write(1 || 5); // 1
    // document.write("<hr/>");
    // document.write(0 || 5); // 5

    // 三元运算
    var result = 5 > 3 ? 5 : 3;
    document.write(result);
    document.write("<hr/>");

    var result2 = true ? 555 : 333;
    document.write(result2);
    document.write("<hr/>");

    var result3 = false ? 555 : 333;
    document.write(result3);
    document.write("<hr/>");

    var result4 = 1 ? 555 : 333;
    document.write(result4); // 555
    document.write("<hr/>");

    var result5 = 0 ? 555 : 333;
    document.write(result5); // 333
    document.write("<hr/>");
</script>
</body>
</html>

7 if语句

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<script>
    // if语句的使用: 判断两个数字的大小
    let num1 = 333;
    let num2 = 666;

    if(num1 > num2) {
        document.write(`${num1} 大于 ${num2}`);
    }else if(num1 == num2) {
        document.write(`${num1} 等于 ${num2}`);
    } else {
        document.write(`${num1} 小于 ${num2}`);
    }
</script>
</body>
</html>

8 分支结构

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<script>
    // 通过prompt输入的分数，如果90~100之间，输出优秀。80~90之间输出良好。60~80输出及格。60以下输出不及格。其它分数输出:分数有误。
    var score = window.prompt("请输入您的分数:", 66);
    // document.write("score = " + score);
    switch (true) {
        case score>=90:
            document.write("优秀");
            break;
        case score>=80 && score<90:
            document.write("良好");
            break;
        case score>=60 && score<80:
            document.write("及格");
            break;
        case score<60:
            document.write("不及格");
            break;
        default:
            document.write("请输入正确的分数!");
            break;
    }
</script>
</body>
</html>

9 for循环

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--<table border="0" width="80%" cellspacing="0" cellpadding="10">-->
    <!--<tr>-->
        <!--<td>1 * 1 = 1</td>-->
    <!--</tr>-->
    <!--<tr>-->
        <!--<td>2 * 1 = 2</td>-->
        <!--<td>2 * 2 = 4</td>-->
    <!--</tr>-->
    <!--<tr>-->
        <!--<td>3 * 1 = 3</td>-->
        <!--<td>3 * 2 = 6</td>-->
        <!--<td>3 * 3 = 9</td>-->
    <!--</tr>-->
<!--</table>-->
<script>
    // 需求: 输出 9*9 乘法表
    document.write(`<table border="0" width="80%" cellspacing="0" cellpadding="10">`);
    // 输出行
    for(var i=1; i<=9; i++) {
        document.write("<tr>");
        // 输出列
        for (let j = 1; j <= i ; j++) {
            document.write("<td>");
            document.write(`${i} * ${j} = ${i * j}`);
            document.write("</td>");
        }
        document.write("</tr>");
    }
    document.write(`</table>`);
</script>
</body>
</html>

10 函数的细节(重点重点重点)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
    // 函数的细节
    function  demo01() {
        document.write("调用函数1 ... ...")
    }
    // 细节1: 函数只有被调用才会执行
    // demo01();
    function demo02() {
        document.write("调用函数2 ... ...");
        // 细节2: 如果函数有返回值, 直接返回即可, 不需要指定返回值的类型
        return "22222";
    }
    // var result = demo02();
    // alert(result);

    // 细节3: 如果函数需要参数, 不需要指定参数的类型
    function demo03(x, y) {
        document.write("调用有参数的函数3... .... x = " + x + ", y = " + y);
    }

    function demo03() {
        document.write("调用无参数的函数3... .... " + new Date().toLocaleString() + "<br/>");
        // 细节6: 如何得到参数? js的函数中提供了一个对象 arguments, 理解成数组, 里面封装了参数
        let arg1 = arguments[0];
        let arg2 = arguments[1];

        document.write("参数1 == " + arg1 + "<br/>")
        document.write("参数2 == " + arg2 + "<br/>")
    }
    // 细节4: 在js中没有函数重载的概念, 如果有同名的函数, 后面的会把前面的覆盖
    // 细节5: 如果函数不需要参数, 我就传, 不会报错, 而且会正常执行
    //demo03(555, 666); // 调用无参数的函数3... ....

    function demo04(x, y, z) {
        document.write("调用有参数的demo04 ... ...." + new Date().toLocaleString());
    }
    // 细节7: 如果函数需要参数, 我就不传, 正常执行不会报错
    // demo04();

    function slkdfjsklfdjskldfjslkdfjsdlkfjslkdfjslkdfjslkdfjsldfjdslkfjskldfjskldfjdskfjsddlkfj() {
        document.write("<hr/>调用特别长的函数名 ... ... " + new Date().toLocaleString());
    }
    slkdfjsklfdjskldfjslkdfjsdlkfjslkdfjslkdfjslkdfjsldfjdslkfjskldfjskldfjdskfjsddlkfj();

    // 细节8: 给函数起别名, 注意: 不要带 ()
    var $ = slkdfjsklfdjskldfjslkdfjsdlkfjslkdfjslkdfjslkdfjsldfjdslkfjskldfjskldfjdskfjsddlkfj;
    $();
</script>
</body>
</html>

11 匿名函数

    // 普通函数
    // function add(a, b) {
    //     return a + b;
    // }
    // var result = add(3, 6);
    // document.write(result);

    // 匿名 函数
    var add2 = function(a, b) {
        return a + b;
    }
    var result = add2(33, 66);
    document.write(result);

12 轮播图案例

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<center>
<img src="img/0.jpg" width="900" id="pic"/>
</center>
<script>
    // 需求: 轮播图案例
    // 每隔1秒钟执行一次
    var num = 1;
    setInterval(function(){
        document.getElementById("pic").src = "img/" + num + ".jpg";
        // 计数器 + 1
        num++;
        // 如果超过4, 重置为0
        if(num>4) {
            num = 0;
        }
    }, 3000);
</script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<center>
<img src="img/0.jpg" width="900" id="pic"/>
</center>
<script>
    // 需求: 轮播图案例
    // 每隔1秒钟执行一次
    var num = 1;
    setInterval("changeImg()", 3000);

    var changeImg = function(){
        document.getElementById("pic").src = "img/" + num + ".jpg";
        // 计数器 + 1
        num++;
        // 如果超过4, 重置为0
        if(num>4) {
            num = 0;
        }
    }
</script>
</body>
</html>

13 绑定事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<input type="button" value="命名函数" id="btn1" onclick="fun1()"/>
<input type="button" value="匿名函数" id="btn2"/>

<script>
    // 需求: 给按钮1 绑定单击事件(命名函数) 静态绑定
    function fun1() {
        alert("点击按钮1 ... ..." + new Date().toLocaleString());
    }
    // 缺点: html代码和事件代码 耦合在一起

    // 需求: 给按钮2 绑定单击事件(匿名函数) 动态绑定
    document.getElementById("btn2").onclick = function() {
        alert("点击按钮2 ... ..." + new Date().toLocaleString());
    }
</script>
</body>
</html>

14 页面加载完成后事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
    // alert(1111);

    // 等页面加载完成后再执行
    window.onload = function() {
        // alert(4444);
        document.getElementById("btn2").onclick = function() {
            alert("调用fun2 函数 ... ..." + new Date().toLocaleString());
        }
    }

    // alert(2222);
    // 需求: 演示页面加载完成后执行
</script>

<input type="button" value="匿名函数" id="btn2"/>

<script>
    // alert(3333);
</script>
</body>
</html>

15 绑定单机事件和双击事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
姓名1：<input type="text" id="t1"/> <br/>
姓名2：<input type="text" id="t2" /> <br/>
<input type="button" value="单击复制/双击清除" id="b1">

<script>
    // 1 给按钮绑定单击事件
    document.getElementById("b1").onclick = function() {
        // 1.1 获取姓名1的值
        var val1 = document.getElementById("t1").value;
        // 1.2 将姓名1的值 复制给 姓名2
        document.getElementById("t2").value = val1;
    }
    // 2 给按钮绑定双击事件
    document.getElementById("b1").ondblclick = function () {
        // 清空输入框的内容
        document.getElementById("t1").value = "";
        document.getElementById("t2").value = "";
    }
</script>
</body>
</html>

16 给输入框绑定获取焦点事件和失焦事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

</head>
<body>
用户名: <input type="text" id="user"> <span id="info" style="color: red"></span>

<script>
    /*
        当文本框失去焦点时，显示后面的文字，获得到焦点时，后面的文字消失
        如果span中有字，就会显示，没有字就不显示。
        修改span中文字内容，使用属性：innerText
     */
    // 给用户名输入框绑定 获取焦点的事件
    document.getElementById("user").onfocus = function () {
        // 清空span标签中的内容
        document.getElementById("info").innerText = "";
    }

    // 给用户名输入框绑定 失去焦点的事件
    document.getElementById("user").onblur = function () {
        // 设置span标签中的内容
        document.getElementById("info").innerText = "用户名必须时4~12位字母数字的组合!";
    }
</script>
</body>
</html>

17_绑定变化事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>改变事件</title>
</head>
<body>
城市：
<select id="city">
    <option value="广州">广州</option>
    <option value="上海">上海</option>
    <option value="南京">南京</option>
</select>
<hr/>
英文：
<input type="text" id="eng">

<script type="text/javascript">
    /*
    选中不同的城市，出现一个信息框显示选中城市的值
    this对象表示当前激活的对象
     */
    document.getElementById("city").onchange = function () {
        //alert(document.getElementById("city").value);
        alert(this.value);
    }

    //用户输入英文字母以后，文本框的字母全部变成大写
    document.getElementById("eng").onchange = function () {
        this.value = this.value.toUpperCase();
    }

    // 给输入框绑定键盘弹起事件
    // document.getElementById("eng").onkeyup = function () {
    //     this.value = this.value.toUpperCase();
    // }
</script>
</body>
</html>

18 鼠标移入和移出事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<img src="img/0.jpg" width="900" id="pic" onmouseout="changeImg(this)"/>

<script>
    // 1 鼠标悬浮在图片上, 更换图片为 1.jpg, 修改宽度为500(动态绑定)
    document.getElementById("pic").onmouseover = function () {
        this.src = "img/1.jpg";
        this.width = "500";
    }
    
    // 2 鼠标移开图片时, 更换图片为2.jpg(静态绑定)
    function changeImg(_img) {
        _img.src = "img/2.jpg";
    }
</script>
</body>
</html>

19_更改css样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>使用JS来修改css的样式</title>
    <style>
        .hello {
            /*css样式：字体，颜色，大小*/
            font-family: "隶书";
            color: blue;
            font-size: 40px;
        }
    </style>
</head>
<body>
<p id="p1">第一自然段</p>
<p id="p2">第二自然段</p>
<hr/>
<input type="button" id="b1" value="改变几个样式">
<input type="button" id="b2" value="改变类样式">

<script type="text/javascript">
    /*
    在JS中修改CSS样式有2种方式：
        1. 每条语句修改1个样式，语法：
        元素.style.样式名 = 样式值;

        2. 先使用class定义类样式，然后再使用以下方法，一次修改一批样式：
        元素.className = 类名;
     */
    // 1 给按钮1绑定单击事件
    document.getElementById("b1").onclick = function () {
        // 1.1 更改id=p1的样式 获取id=p1的标签对象
        var p1Obj = document.getElementById("p1");
        // 1.2 修改样式: 元素.style.样式名 = 样式值;
        p1Obj.style.fontFamily = "微软雅黑";
        p1Obj.style.color = "red";
        p1Obj.style.fontSize = "45px";
    }

    // 2 给按钮2 绑定单机事件
    document.getElementById("b2").onclick = function() {
        // 2.1 获取 id=p2的标签对象
        let p2Obj = document.getElementById("p2");
        // 2.2 更改目标对象的class属性值
        p2Obj.className = "hello";
    }

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

20_数学对象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>内置对象：数学对象</title>
</head>
<body>
<script type="text/javascript">
    //四舍五入保留到整数
    var num = 123.1;
    document.write("四舍五入 结果: " + Math.round(num));
    document.write("<hr/>");

    //向下取整
    document.write("向下取整 结果: " + Math.floor(num));
    document.write("<hr/>");

    //向上取整
    document.write("向上取整 结果: " + Math.ceil(num));
    document.write("<hr/>");

    //产生随机数，0~1之间的小数，不等于1  [0,1)
    let randomNumber = Math.random();
    document.write("产生一个从0到1的随机值,不包含1 : " + randomNumber);
    document.write("<hr/>");

    // 扩展题: 产生60 ~ 80 的随机值
    // 1 产生 [0, 1) * 20;
    let randomNum2 = Math.random() * 20;
    // 2 [0, 20) + 60 = [60, 80)
    let randomNum3 = randomNum2 + 60;
    // document.write(`randomNum3 = ${randomNum3}`)
    // 3 取整: 向下取整
    let randomNum4 = Math.floor(randomNum3);
    document.write(`randomNum4 = ${randomNum4}`)

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

作业:

1 第10题到第20题每个敲3编

要求: 1 看老师代码写注释 2 看自己的注释写代码 3 自己写注释再敲代码

21 全局函数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>全局函数</title>
</head>
<body>

<script type="text/javascript">

    /*
    将一个字符串转成整数，从一开始向后去查找，碰到第一个不能转换的就停止了
     */
    let num1 = parseInt("2") + parseInt("3");
    document.write(num1);
    document.write("<hr/>");
    document.write(parseInt("abc") + "<br/>"); // NaN not a number 表示字符串不是一个数字
    document.write(parseInt("123abc")); // 123
    document.write("<hr/>");

    //将一个字符串转成小数，转换方式同上
    let num2 = parseFloat("2.5") + parseFloat("3.2");
    document.write("num2 = " + num2)
    document.write("<hr/>");

    let str = "32期 天生傲娇!";
    //对汉字使用URI编码进行转换
    let encodeStr = encodeURI(str);
    document.write("编码后: " + encodeStr);
    document.write("<hr/>");
    //对已经编码的字符串进行解码
    let decodeStr = decodeURI(encodeStr);
    document.write("解码后: " + decodeStr);
    document.write("<hr/>");

    //执行字符串中js代码
    var str2 = "alert('32期 天生傲娇!');"
    document.write(typeof(str2));

    eval(str2);
</script>
</body>
</html>

22 数组

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>数组</title>
</head>
<body>
<script type="text/javascript">
    //创建数组四种方式：
    //1 创建一个长度为0的数组
    var arr1 = new Array();
    document.write("数组1大小 : " + arr1.length);
    document.write("<hr/>");

    //2 创建一个长度为5的数组
    var arr2 = new Array(5);
    document.write("数组2大小 : " + arr2.length);
    document.write("<hr/>");

    var arr3 = new Array("abc");
    document.write("数组3大小 : " + arr3.length);
    document.write("<hr/>");

    //3 指定每个元素，创建数组
    var arr4 = new Array("abc", 2, 4, 6, 8);
    document.write("数组4大小 : " + arr4.length);
    document.write("<hr/>");

    //4 使用中括号创建数组，指定每个元素
    var arr5 = ["abc", 2, 4, 6, 8];
    document.write("数组5大小 : " + arr5.length);
    document.write("<hr/>");

    // 5 遍历数组
    // 5.1
    document.write("<h1>遍历数组方式1: </h1>");
    for (let i = 0; i < arr5.length; i++) {
        document.write(arr5[i] + "<br/>");
    }
    document.write("<hr/>");

    document.write("<h1>遍历数组方式2: </h1>");
    for (let ele of arr5) {
        document.write(ele + "<br/>");
    }
    document.write("<hr/>");

    // 修改数组的长度, 只保留前三个
    // 6 修改数组长度在遍历
    arr5.length = 3;
    document.write("<h1>修改数组的长度后, 遍历数组方式2: </h1>");
    for (let ele of arr5) {
        document.write(ele + "<br/>");
    }
    document.write("<hr/>");


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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>数组的方法</title>
</head>
<body>
<script type="text/javascript">
    //1 两个或两个以上数组的拼接
    let a1 = [1, 1, 1];
    let a2 = [2, 2, 2];
    let a3 = a1.concat(a2, a1, "1111111");
    document.write("a3 = " + a3);
    document.write("<hr/>");

    //对数组反转
    let a4 = [4, 1, 8, 9];
    document.write(a4.reverse());
    document.write("<hr/>");

    //将一个数组通过分隔符拼接成一个字符串，与字符串中split函数功能相反
    let a5 = [4, 1, 8, 9];
    document.write("a5 = " + a5);
    document.write("<hr/>");
    document.write("a5 = " + a5.join("******"));
    document.write("<hr/>");

    /*
    对字符串进行排序
    1. 按字符的ASCII码值进行比较
    2. 两个字符串比较，先比较第1个，如果谁大谁就大，后面不再比较。如果相同则继续比较第2个。
    3. 小写字母 > 大写字母 > 数字
    如：
     */
    var str1 = "abcdef";
    var str2 = "ac";
    var  str3 = "AB";
    document.write(str1 > str2); // false
    document.write("<hr/>");
    document.write(str1 > str3); // true


    //默认按字符串排序
    //默认是按字符的大小来排序
    let a6 = [40, 100, 28, 9];
    document.write("排序前: " + a6 + "<br/>");
    a6.sort(function (a, b) {
        return b-a;
    });
    document.write("排序后: " + a6 + "<br/>");
    document.write("<hr/>");

    //删除数组中最后一个元素
    let a7 = [40, 100, 28, 9, 111];
    document.write("删除前: " + a7 + "<br/>");
    a7.pop();
    document.write("删除后: " + a7 + "<br/>");

    //向数组最后添加一个或多个元素
    a7.push("aaa", "bbb", "ccc");
    document.write("添加后: " + a7 + "<br/>");
</script>
</body>
</html>

23 日期对象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>日期对象</title>
</head>
<body>
<script type="text/javascript">
    let date = new Date();
    // 年份
    let year = date.getFullYear();
    document.write("年份: " + year + "<br/>");
    let month = date.getMonth();
    document.write("月份: " + (month+1) + "<br/>");
    //0-6: 0表示周日，1~6表示周一到周六
    let day = date.getDay();
    document.write("周几? : " + day + "<br/>");

    //得到1970-1-1到现在相差的毫秒数
    let time = date.getTime();
    document.write("毫秒值: " + time + "<br/>");

    //得到本地格式的时间，类似于Java中：SimpleDateFormat
    document.write(date.toLocaleString());
</script>
</body>
</html>

娃娃哈哈

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
day03 js_01

1 在html中引入js代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>javascript的快速入门</title></head><body></body><script>
复制链接

扫一扫