JS基础案例

最新推荐文章于 2022-12-04 00:31:30 发布
最新推荐文章于 2022-12-04 00:31:30 发布
阅读量178 收藏
点赞数
分类专栏： web前端 文章标签： javascript html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Python1One/article/details/120353712
版权

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>
Z_cx
关注
专栏目录
JavaScript基础案例篇（题目附代码）
qq_66193208的博客
04-20 8709
这篇文章的代码难度循序渐进，从最基础的变量使用开始，慢慢去提升js的兴趣（这里使用的软件是vscode）
【JavaScript】js基础-DOM（案例1）
你今天真好看呀
08-17 420
文章目录1. innerHTML属性2. 案例1：动态显示时间3. 案例2：全选练习4. 案例3：下拉列表左右选择 1. innerHTML属性 1.这个属性不是DOM的组成部分，但是是大多数浏览器都支持的属性 2.作用： 1.获取文本内容 2.向标签里面设置内容（可以是html代码） <!DOCTYPE html> <html lang="en"> <head...
js基础案例集合
Build Kay的博客
07-21 343
代码】js基础案例集合。
mescroll.js基础案例
04-08
**mescroll.js基础案例详解** `mescroll.js` 是一个强大的JavaScript滚动插件，专为实现上拉刷新和下拉加载功能而设计。它适用于网页开发，可以帮助开发者轻松地构建具有滚动交互效果的页面，提升用户体验。在这个...
JavaScript基础与案例开发详解
07-22
资源名称：Javaｓｃｒｉｐｔ基础与案例开发详解内容简介：《Java ｓｃｒｉｐｔ基础与案例开发详解》根据Javaｓｃｒｉｐｔ在各种类型的应用开发中(如B2B、B2C、C2C)的使用情况，有针对性地安排了丰富的案例，从基本的...
JavaScript基础——JS简单案例
m0_68794863的博客
12-04 5481
JS基础案例
超详细JavaScript入门基础+练手小案例
weixin_55643605的博客
10-28 2991
一.什么是JavaScript 它是一种浏览器解释型语言，嵌套在HTML文件中交给浏览器解释执行。主要用来实现网页的 动态效果，用户交互及前后端的数据传输等。 它由下列三部分组成： 1.核心语法：规范JavaScript的基本语法。 2.BOM：提供了一系列操作浏览器的方法。 3.DOM：提供了一系列操作文档的方法。 二.使用方法 将JavaScript嵌入页面有以下三种方式： 1.元素绑定事件 事件：指用户的行为（单击，双击等）。 事件处理：元素监听事件，并在事件发生后自动执行事件过程
JavaScript基础和实例代码
03-20
JavaScript电子书，包括了JavaScript的大部分知识，可以帮助读者快速入门。内容如下： 第1章 JavaScript语言概述 1.1 JavaScript是什么 1.1.1 JavaScript简史 1.1.2 JavaScript有何特点 1.2 JavaScript能做什么 1.2.1 表单数据合法性验证 1.2.2 页面特效 1.2.3 交互式菜单 1.2.4 动态页面 1.2.5 数值计算 1.3 JavaScript编程起步 1.3.1 “Hello World！”程序 1.3.2 选择JavaScript脚本编辑器 1.4 如何引入JavaScript脚本代码 1.4.1 通过与标记对引入 1.4.2 通过标记的src属性引入 1.4.3 通过JavaScript伪URL引入 1.4.4 通过HTML文档事件处理程序引入 1.5 嵌入JavaScript脚本代码的位置 1.5.1 在与标记对之间放置 1.5.2 在与标记对之间放置 1.5.3 在两个标记对之间混合放置 1.6 选择合适的浏览器 1.7 处理不支持JavaScript脚本的情况 1.7.1 使用标记对直接屏蔽法 1.7.2 使用和标记对给出提示信息 1.8 JavaScript的实现基础 1.8.1 ECMAScript 1.8.2 DOM 1.8.3 BOM 1.9 客户端与服务器端脚本 1.10 JavaScript与JScript、 VBScript 1.11 JavaScript与Java、Java applet 1.12 JavaScript的未来如何 1.13 本章小结 第2章 JavaScript语言入门 2.1 编程准备 2.1.1 编程术语 2.1.2 脚本执行顺序 2.1.3 大小写敏感 2.1.4 空白字符 2.1.5 分号 2.1.6 块 2.2 数值类型 2.2.1 整型和浮点数值 2.2.2 八进制和十六进制 2.3 变量 2.3.1 变量标识符 2.3.2 变量申明 2.3.3 变量作用域 2.4 弱类型 2.5 基本数据类型 2.5.1 Number型 2.5.2 String型 2.5.3 Boolean型 2.5.4 Undefined型 2.5.5 Null型 2.5.6 Function型 2.6 组合类型 2.6.1 Array型 2.6.2 Object型 2.7 运算符 2.7.1 赋值运算符 2.7.2 基本数学运算符 2.7.3 位运算符 2.7.4 位移运算符 2.7.5 自加和自减 2.7.6 比较运算符 2.7.7 逻辑运算符 2.7.8 逗号运算符 2.7.9 空运算符 2.7.10 ?...:运算符 2.7.11 对象运算符 2.7.12 typeof运算符 2.7.13 运算符优先级 2.8 核心语句 2.8.1 基本处理流程 2.8.2 if条件假设语句 2.8.3 switch流程控制语句 2.8.4 for循环语句 2.8.5 while和do-while循环语句 2.8.6 使用break和continue进行循坏控制 2.8.7 with对象操作语句 2.8.8 使用for…in进行对象循坏 2.8.9 含标签的语句 2.9 函数 2.9.1 函数的基本组成 2.9.2 全局函数与局部函数 2.9.3 作为对象的函数 2.9.4 函数递归调用 2.9.5 语言注释语句 2.9.6 函数应用注意事项 2.10 本章小结 第3章 JavaScript事件处理 3.1 什么是事件 3.2 HTML文档事件 3.2.1 事件捆绑 3.2.2 浏览器事件 3.2.3 HTML元素事件 3.2.4 IE扩展的事件 3.3 JavaScript如何处理事件 3.3.1 匿名函数 3.3.2 显式声明 3.3.3 手工触发 3.4 事件处理器的返回值 3.5 事件处理器设置的灵活性 3.6 现代事件模型与Event对象 3.7 IE4中的Event对象 3.7.1 对象属性 3.7.2 事件上溯 3.7.3 阻止事件上溯 3.7.4 事件改向 3.8 NN4中的Event对象 3.8.1 对象属性 3.8.2 事件捕获 3.8.3 关闭事件捕获 3.8.4 事件传递 3.9 DOM的解决之道
js基础小例子
Vivian_shuang的博客
07-12 907
DOCTYPE html> html> head> meta charset="UTF-8"> title>title> head> body> input type="text" name="txt1" id="txt1" value="" /> input type="text" name="txt2" id="txt2" value="" /
JS小案例总结（JS基础案例）
a_l_f_的博客
08-08 8327
JS小案例总结JS小案例总结案例一：JS实现tab选项卡功能案例二：JS实现盒子拖拽功能案例三：JS实现导航条吸顶效果案例四：JS实现图片懒加载结构案例五：JS实现简易弹幕功能案例六：JS实现自动滚动新闻列表 JS小案例总结 案例一：JS实现tab选项卡功能 描述：纯原生js实现选项卡切换的效果,即当鼠标移入某个选项卡区域时,显示不同的内容。 HTML代码如下： <body> <div id="tabs"> <div id="options">
js常用基础案例整理(持续更新)
weixin_41086056的博客
11-17 9844
这里写目录标题一级目录二级目录三级目录036-网页日历035-记住用户名(js代码)034-基础轮播图(js代码)033-京东放大镜效果(js代码)032-简单动画函数封装031-仿淘宝固定侧边栏+返回顶部按钮030-拖动的模态框029-发送短信倒计时案例028-倒计时效果027-模拟京东快递单号查询案例026-模拟京东按键输入内容025-跟随鼠标移动的小人024-动态生成表格案例023-删除留言案例022-新浪下拉菜单021-Tab栏切换(仿京东)020-全选与反选019-表格隔行变色018-开关灯效果0
JS基础&案例
qq_44331253的博客
03-05 7153
目录JS基础JS的作用JS的组成JS引入常用的一些方法变量数据类型算数运算函数JS事件事件介绍常见事件事件绑定普通函数方式匿名函数方式事件使用JS的BOMBOM里面的五个对象window: 窗体对象navigator:浏览器导航对象screen:屏幕对象history:历史对象location:当前路径信息JS的DOM操作标签获取标签操作标签操作标签体 JS基础 什么是JS JS，全称JavaScript，是一种直译式脚本语言，是一种动态类型、弱类型、基于对象的脚本语言，内置支持类型。 JS语言和Java
javascript 基础案例（循环）
阿牛的博客
02-22 1802
今天写几个基本的js案例，熟悉一下js中的循环。
js基础精选案例
m0_64492064的博客
04-09 1701
主要是自己用来复习用的。如果想要练习的小伙伴也可以参考一下哦~ 1.[red','blue','red','green','pink','red'],求red出现的位置和次数 //思路是 先把第一个red的坐标找出来 然后遍历 每次查找的位置是上一个位置+1； var arr = ['red', 'blue', 'red', 'green', 'pink', 'red']; var index = arr.indexOf('red'); //0
JavaScript基础案例实现
左岸
10-02 578
1.去除一个数组里面重复的元素var arr1 = [1,2,2,2,3,3,3,4,5,6]; var arr2 = []; for(var i = 0, len = arr1.length;i<len;i++){ if(arr2.indexOf(arr1[i])<0) { arr2.push(arr1[i]); } } console.log(arr2);运行结果
JS入门小案例
含笑
09-05 2430
js计算指定日期第几天？ js计算阶乘 js求素数 js求斐波那契数
js基础案例商城
最新发布
05-25
好的，这里为您提供一个简单的JS基础案例商城： HTML代码： ``` <!DOCTYPE html> <title>JS基础案例商城 <h1>JS基础案例商城 商品列表 商品1 <span class="product-price">10元 加入购物车 ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值