JS基础案例

原创 于 2021-09-17 17:38:35 发布 · 215 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#javascript #html5

JS基础案例

js生成验证码

<!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>Document</title>
    <style>
        #code {
            width: 100px;
            height: 50px;
            background-color: lightblue;
            font-size: 44px;
        }
    </style>
</head>

<body>
    <script>
        function createRndCode() {
            var chars = ['a', 'b', 'c', 'd', '1', '2', '3'];
            var randCode = "";

            for (var i = 0; i < 3; i++) {
                var randPos = Math.floor(Math.random() * (chars.length - 1));
                randCode += chars[randPos];
            }

            document.getElementById("code").innerHTML = randCode;
        }
    </script>


    <div id="code"></div>
    <button onclick="createRndCode()">验证码</button>
</body>

</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>Document</title>

    <script>
        function Star(name, type, blood, attack) {
            this.name = name;
            this.type = type;
            this.blood = blood;
            this.attack = attack;
        }

        var s1 = new Star("廉颇", "力量型", "500", "近战");
        var s2 = new Star("后裔", "射手型", "100", "远程");

        console.log(s1.name);
        console.log(s1.type);
        console.log(s1.blood);
        console.log(s1.attack);
        console.log(s2.name);
        console.log(s2.type);
        console.log(s2.blood);
        console.log(s2.attack);



    </script>
</head>

<body>

</body>

</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>Document</title>
    <script>
        var arr1 = [1, 2, 22, 333, 12, 3, 44444, 22, 13, 4, 5];
        // 升序
        arr1.sort(function (a, b) {
            return a - b;
        })
        console.log(arr1);

        var arr2 = [1, 2, 22, 333, 12, 3, 44444, 22, 13, 4, 5];
        // 降序序
        arr2.sort(function (a, b) {
            return b - a;
        })
        console.log(arr2);
    </script>
</head>

<body>

</body>

</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>Document</title>
    <script>
        var num = prompt("请输入学生人数");
        var sum = 0;
        var avgrage = 0;
        var li = [];
        for (var i = 1; i <= num; i++) {
            var score = eval(prompt("请你输入第" + i + "个学生成绩：")); 
            // eval将输入的字符串型数据变成数字，或者使用parseFloat();
            sum += score;
        }

        avgrage = sum / num;
        alert("班级总成绩是" + sum);
        alert("班级平均分是:" + avgrage);

    </script>
</head>

<body>

</body>

</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>Document</title>
    <script>
        var a = "※";
        var i = 1;
        var str = "";
        for (i = 1; i <= 5; i++) {
            for (var j = 1; j < 6; j++) {
                str += a;
            }
            str += "\n";
        }
        console.log(str);
    </script>
</head>
<body>
</body>
</html>

99乘法表

<!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>Document</title>
    <script>
        var str = "";
        for (var i = 1; i <= 9; i++) {
            for (var j = 1; j <= i; j++) {
                str += j + "*" + i + "=" + i * j + "\t";
            }
            str += "\n";
        }
        console.log(str);
    </script>
</head>
<body>
</body>
</html>

while循环案例

<!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>Document</title>
    <script>
        //1. 打印1~100
        // var i = 1;
        // while (i <= 100) {
        //     console.log("这个人今年" + i + "岁");
        //     i++;
        // }
        //2. 打印1~100的和
        // var sum = 0;
        // while (i <= 100) {
        //     sum += i;
        //     i++;
        // }
        // console.log(sum);

        //3. 循环提示框直到输入1；
        var i = eval(prompt("你爱我么(是1，不是2)："));
        while (i != 1) {
            i = eval(prompt("你爱我么(是1，不是2)："));
        }
        alert("我也爱你！");

    </script>
</head>

<body>

</body>

</html>

doWhile循环案例

<!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>Document</title>
    <script>
        // //1. 打印1~100
        // var i = 1;
        // do {
        //     console.log(i);
        //     i++;
        // } while (i <= 100)


        //2. 打印1~100的和
        // var sum = 0;
        // do {
        //     sum += i;
        //     i++;
        // } while (i <= 100);
        // console.log(sum);


        //3. 循环提示框
        do {
            var message = prompt("你爱我么？");
        } while (message != "我爱你");
        alert("我也爱你");
    </script>
</head>

<body>

</body>

</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>Document</title>
    <script>
        //1. 求1~100所有数的和与平均值
        // var i = 1;
        // var sum = 0;
        // while (i <= 100) {
        //     sum += i;
        //     i++;
        // }
        // alert("总和：" + sum + ",平均值:" + sum / 100);

        //2. 求1~100之间所有偶数的和
        // var i = 1;
        // var sum = 0;
        // while (i <= 100) {
        //     if (i % 2 == 0) {
        //         sum += i;
        //     }
        //     i++;
        // }
        // alert("1~100之间所有偶数的总和：" + sum);

        //3. 1~100之间7倍数的和
        // var i = 1;
        // var sum = 0;
        // while (i <= 100) {
        //     if (i % 7 == 0) {
        //         sum += i;
        //     }
        //     i++;
        // }
        // alert("1~100之间7倍数的总和：" + sum);

        //4. for循环打印n行m列的星星
        // var a = "※";
        // var rows = parseInt(prompt("行数："));
        // var cols = parseInt(prompt("列数："));
        // var str = "";
        // for (var i = 1; i <= rows; i++) {
        //     for (var j = 1; j <= cols; j++) {
        //         str += a;
        //     }
        //     str += "\n";
        // }
        // alert(str);

        //5. for循环打印三角形
        var a = "※";
        var rows = parseInt(prompt("行数："));
        var str = "";
        for (var i = 1; i <= rows; i++) {
            for (var j = 1; j <= i; j++) {
                str += a;
            }
            str += "\n";
        }
        alert(str);
    </script>
</head>
<body>
</body>
</html>

函数调用

//4. 利用函数求和
        function getSum() {
            var sum = 0;
            for (var i = 0; i <= 100; i++) {
                sum += i;
            }
            console.log(sum);
        }
        //调用函数
        getSum();
        
// 5. 函数传参（当形参实参个数不匹配，按形参个数进行舍弃实参）
        function get(sta) {
            alert(sta);
        }
        get("大傻逼");
        
//6. 函数返回值（函数没有return则返回undefined）
        function get(x, y) {
            return x + y;
        }
        var sum = get(5, 6);
        alert(sum);
//7. arguments使用(为了不确定的实参个数，是一个内置对象，是一个数组按索引存储)
        // argument是一个伪数组没有pop() push()方法
        function fn() {
            // console.log(arguments);arguments存储了所有参数
            for (var i = 0; i < arguments.length; i++) {
                console.log(arguments[i]);
            }
        }
        fn(1, 2, 3)

函数的声明方式

//8. 函数的两种声明方式
        function fn() {

        }
        fn();

        var fun = function (arg) {
            console.log(arg);
        }
        fun("123123");
        //1. fun是变量名 不是函数名
        //2. 函数表达式也可以传递参数

随机数猜数游戏

<!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>Document</title>
    <script>
        var num = parseInt(prompt("请输入一个数字(1-10)："));
        var randomNum = Math.floor(Math.random() * 10) + 1;
        while (1) {
            if (num > randomNum) {
                num = prompt("您猜大了！请重新输入：");
            } else if (num < randomNum) {
                num = prompt("您猜小了！请重新输入：");
            }
            else {
                alert("正确答案是：" + randomNum + "!恭喜您猜对了！");
                break;
            }
        }
    </script>
</head>

<body>

</body>

</html>

（重点）倒计时案例

<script>
    function conutDown(time) {
            var nowTime = +new Date();
            var inputTime = +new Date(time);
            var times = (inputTime - nowTime) / 1000; //剩余时间秒
            var d = parseInt(times / 60 / 60 / 24);
            d = d < 10 ? "0" + d : d;
            var h = parseInt(times / 60 / 60 % 24);
            h = h < 10 ? "0" + h : h;
            var m = parseInt(times / 60 % 60);
            m = m < 10 ? "0" + m : m;
            var s = parseInt(times % 60);
            s = s < 10 ? "0" + s : s;
            return d + "天" + h + "时" + m + "分" + s + "秒";
    }
    console.log(conutDown("2027-9-12 9:30:00"));

</script>

(重点)数组去重


<!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>Document</title>
    <script>
        var arr = ['a', 'b', 'f', 'a', 's', 'dd', 'ds', 'dd', 'dd'];
        var arr1 = [];
        for (var i in arr) {
            if (arr1.indexOf(arr[i]) == -1) {    //当arr[i]不在arr1中返回-1
                arr1.push(arr[i]);
            }
        }
        console.log(arr1);
    </script>
</head>

<body>

</body>

</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>Document</title>
    <script>
        var str = "abcdefghijklmnoapqrstuavwcxyzababc";
        var count = 0;
        var arr = [];
        var s = prompt("输入要查找的字符:");
        var index = str.indexOf(s);
        while (index != -1) {
            count++;
            arr.push(index);
            index = str.indexOf("s", index + 1);
        }
        console.log(arr);
        console.log(count);

    </script>
</head>

<body>

</body>

</html>
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值