master

分支 (1)

管理

管理

master

js--jquery-special-effects
/
JS练习一.html

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JS 练习1</title>
</head>

<body>
</body>

</html>
<script>
    // 等腰三角形
    document.write("一、等腰三角形</br>");
    var line = 9;
    for (var i = 1; i <= line; i++) {

        for (var j = 1; j <= line - i; j++) {
            document.write("&nbsp;");
        }
        for (var k = 1; k <= i; k++) {
            document.write("*");
        }
        document.write("</br>")
    }
    document.write("</br>");


    //九九乘法表
    document.write("二、九九乘法表</br>");
    var line = 9;
    for (var i = 1; i <= line; i++) {
        for (var j = 1; j <= i; j++) {
            document.write(j + "*" + i + "=" + j * i + "&nbsp;&nbsp;");
        }
        document.write("</br>");
    }
    document.write("</br>");


    // 输出1到100间的奇数和偶数
    document.write("三、输出1到100间的奇数和偶数</br>");
    function OddEvenNumber() {
        var odd = [];
        var even = [];
        for (var i = 1; i <= 100; i++) {
            if (i % 2 == 0) {
                //偶数
                even.push(i)  //追加元素到数组中
            } else {
                //奇数
                odd.push(i)  //追加元素到数组中
            }
        }
        document.write(`偶数总共有：${even.length}</br>`);
        document.write(even);

        document.write("</br>");

        document.write(`奇数总共有：${odd.length}</br>`);
        document.write(odd);
    }
    OddEvenNumber();

    document.write("</br>");
    document.write("</br>");


    // 入职薪水10K，每年涨幅5%，50年后工资多少？
    document.write("四、入职薪水10K，每年涨幅5%，50年后工资多少？</br>");
    function salary() {
        var sal = 10;
        for (let i = 0; i < 50; i++) {
            sal += sal * 0.05;
        }
        document.write(`50年后薪资为：${sal.toFixed(2)}K (四舍五入后结果)`)
    }
    salary();

    document.write("</br>");
    document.write("</br>");

    // 输出20-80之间能被3整除的整数，每5个一行
    document.write("五、输出20-80之间能被3整除的整数，每5个一行</br>");
    function demo1() {
        for (var i = 20; i <= 80; i++) {
            // 计数器count 控制换行
            var count = 0;
            if (i % 3 === 0) {
                document.write(`${i}&nbsp;`);
                count++;
                if (count % 5 === 0) {
                    document.write(`<br>`);
                }
            }
        }
    }
    demo1();

    document.write("</br>");
    document.write("</br>");

    //// 求s=a+aa+aaa+aaaa+….+aa...a的值，其中a是一个数字。例如2+22+222+2222
    document.write("★★★★★★ 六、求s=a+aa+aaa+aaaa+….+aa...a的值，其中a是一个数字。例如2+22+222+2222</br>");
    // function deom2(num, count) {
    //     var count = num;
    //     for (i = 1; i <= count; i++) {
    //         for (var j = 0; j < i; j++) {
    //             count += num * 10;
    //             console.log("----"+num);
    //         }
    //         num +=count;
    //         console.log(num);
    //     }
    // }
    // deom2(2,2)


    document.write("</br>");
    document.write("</br>");

    document.write("七、黑白棋（9x9）");
    document.write("<table border='1px' width='300px' height='300px'>")
    function demo3() {
        for (var i = 1; i <= 9; i++) {
            document.write("<tr>");
            for (var col = 1; col <= 9; col++) {
                // (奇数行 && 奇数列) || (偶数行 && 偶数列)
                if ((i % 2 != 0 && col % 2 != 0) || (i % 2 == 0 && col % 2 == 0)) {
                    document.write(`<td style="background:black"></td>`);
                } else {
                    document.write(`<td style="background:white"></td>`)
                }
            }
            document.write("</tr>");
        }
        document.write("</table>");
    }
    demo3()

    document.write("</br>");
    document.write("</br>");

    // 打印三角形
    document.write("八、打印三角形</br>");
    let num = prompt('请输入三角形行数');
    document.write("普通三角形：</br>");
    function demo4() {
        for (var i = 1; i <= num; i++) {
            document.write("</br>");
            for (var j = 1; j <= i; j++) {
                document.write("* ");
            }
        }
    }
    demo4()

    document.write("</br>");
    document.write("倒三角形：</br>");
    function demo5() {
        var col = num;
        for (var i = 1; i <= num; i++) {
            document.write("</br>");
            col--;
            for (var j = col; j >= 0; j--) {
                document.write("* ");
            }
        }
    }
    demo5()

    document.write("</br>");
    document.write("</br>");

    // 数组去重
    document.write("九、数组去重</br>");
    var array = ['一', '2', '3', '4', '5', '5', '4', '3', '2', '一'];
    document.write(`现有数组：array: ${array}</br>`);

    // 1、利用Array.from(new Set)去重  （Set是ES6新加数据结构，类似数组，最大的特点为所有元素都是唯一的，没有重复值）
    // Array.from()将一个类数组对象或可遍历对象转换为数组，ES6新加
    document.write("1、利用Array.from(new Set(数组名))去重:（Set是ES6新加数据结构，类似数组，最大的特点为所有元素都是唯一的，没有重复值）</br>");
    var newArray = Array.from(new Set(array));
    document.write(`newArray: ${newArray}</br>`);


    // 2、利用includes去重   includes判断数组是否包含一个指定的值，是返回true，否返回false
    document.write("2、利用includes去重：（includes判断数组是否包含一个指定的值，是返回true，否返回false）</br>");
    var newArray = [];
    array.forEach((value) => {
        if (!newArray.includes(value)) {
            newArray.push(value);
        }
    });
    document.write(`newArray: ${newArray}</br>`);


    // 3、利用indexOf()去重 indexOf()返回每个指定字符串值在字符串中首次出现的位置，如果没有找到，返回-1
    document.write("3、利用indexOf()去重:( indexOf()返回每个指定字符串值在字符串中首次出现的位置，如果没有找到，返回-1)</br>");
    var newArray = [];
    array.forEach((value) => {
        if (newArray.indexOf(value) === -1) {
            newArray.push(value);
        }
    });
    document.write(`newArray: ${newArray}</br></br>`);

    // 字符串去重
    document.write("十、字符串去重</br>");
    var str = "helloWorldhelloWorld";
    document.write(`str: ${str}</br>`);

    document.write("1、使用indexOf()去重，结合for()循环index下标，不能使用forEach()</br>");
    var newStr = "";
    for (var i = 0; i < str.length; i++) {
        if (newStr.indexOf(str[i]) === -1) {
            newStr += str[i];
        }
    }
    document.write(`newStr: ${newStr}</br>`);

    document.write("2、使用set()+join()方法</br>");
    //new Set()方法将当前字符串去重转换成数组，再通过join()方法将数组转换成字符串
    document.write("new Set()方法将当前字符串去重转换成数组，再通过join()方法将数组转换成字符串</br>");
    var newStr = "";
    newStr = [...new Set(str)].join('');
    document.write(`newStr: ${newStr}</br></br>`);

    // 字符串去重
    document.write("★★★★★★ 十一、去除连续的字符串</br></br>");

</script>