JavaScript应用举例

最新推荐文章于 2023-12-02 22:06:52 发布
最新推荐文章于 2023-12-02 22:06:52 发布
阅读量309 收藏 1
点赞数
分类专栏： Java Web JavaScript 文章标签： JavaScript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Levana1994/article/details/90149074
版权

JavaScript应用

文章目录

一.省市联动

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>省市联动</title>
</head>
<body>
<select name="province" id="province" onchange="changeCity()">
    <option value="">--选择省--</option>
    <option value="0">广东省</option>
    <option value="1">广西省</option>
    <option value="2">山东省</option>
    <option value="3">山西省</option>
</select>
<select name="city" id="city">
    <option value="">--选择市--</option>
</select>
<!--
要求：
    当省的选项变化时，在市里显示对应的省
分析：
    什么时候：省的选项变化时，onchange事件监听
    做什么事：得到省的值，找到省对应的各个市，把市插入到市的下拉框里
        获取省下拉框的值：省标签对象.value  广东0， 广西1，山东2，山西3
        找到省对应的市（数组）：cities[省的值]
        遍历每个市：
            创建一个option标签：document.createElement("")   : <option></option>
            设置option的标签体：市的名称
            设置option的value值：市的名称
            插入到dom树：插入到city里边
-->
<script>
    var cities = [
        ["广州市","深圳市","惠州市"], //cities[0]广东省
        ["桂林市","柳州市","南宁市"], //cities[1]广西省
        ["济南市","烟台市","秦皇岛"], //cities[2]山东省
        ["太原市","阳泉市","大同市"]  //cities[3]山西省
    ];

    function changeCity() {
        var city = document.getElementById("city");
        //把city里的选项清除，只保留一个提示选项
        city.innerHTML = "<option value=\"\">--选择市--</option>";

        //获取省下拉框的值：省标签对象.value  广东0， 广西1，山东2，山西3
        var pro = document.getElementById("province").value;
        //找到省对应的市（数组）：cities[省的值]
        var myCities = cities[pro];
        //遍历每个市：
        for (var i = 0; i < myCities.length; i++) {
            var cityName = myCities[i];
            //创建一个option标签：document.createElement("")   : <option></option>
            var opt = document.createElement("option");
            //设置option的标签体：市的名称
            opt.innerHTML = cityName;
            //设置option的value值：市的名称
            opt.value = cityName;
            //插入到dom树：插入到city里边
            city.appendChild(opt);
        }
    }
</script>
</body>
</html>

二. 隔行换色

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        table {
            width: 500px;
            margin: 0 auto;
            border-collapse: collapse;
        }

        td, th {
            border: 1px solid blue;
            text-align: center;
        }

    </style>
</head>
<body>
<table>
    <tr>
        <th>学号</th>
        <th>姓名</th>
        <th>年龄</th>
    </tr>
    <tr>
        <td>1</td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td>2</td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td>3</td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td>4</td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td>5</td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td>6</td>
        <td></td>
        <td></td>
    </tr>
</table>
<!--
要求：1~6行，要求奇数行和偶数行分别设置不同的背景色
    1. 奇数行设置背景颜色
    2. 偶数行设置背景颜色
分析：
    获取到奇数行，偶数行    %2 结果是0，说明是偶数；否则是奇数
    分别设置不同背景颜色

    获取所有的行
    循环遍历：索引%2判断奇偶
        奇数行：设置背景颜色
        偶数行：设置背景颜色
-->
<script>
    //获取所有的行
    var rows = document.getElementsByTagName("tr");
    //循环遍历：索引%2判断奇偶
    for (var i = 1; i < rows.length; i++) {
        if (i % 2 === 0) {//偶数行
            rows[i].style.backgroundColor = "lightblue";
        }else{//奇数行
            rows[i].style.backgroundColor = "lightgreen";
        }
    }
</script>
</body>
</html>

三.全选全消

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        table {
            width: 500px;
            margin: 0 auto;
            border-collapse: collapse;
        }

        td, th {
            border: 1px solid blue;
            text-align: center;
        }

    </style>
</head>
<body>
<table>
    <tr>
        <th style="width:100px;">
            <input type="checkbox" id="checkall" title="全选/全消" onclick="check()" />
            <input type="button" value="反选" onclick="inverse()">
        </th>
        <th>学号</th>
        <th>姓名</th>
        <th>年龄</th>
    </tr>
    <tr>
        <td>
            <input type="checkbox" class="item"/>
        </td>
        <td>1</td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td>
            <input type="checkbox" class="item"/>
        </td>
        <td>2</td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td>
            <input type="checkbox" class="item"/>
        </td>
        <td>3</td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td>
            <input type="checkbox" class="item"/>
        </td>
        <td>4</td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td>
            <input type="checkbox" class="item"/>
        </td>
        <td>5</td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td>
            <input type="checkbox" class="item"/>
        </td>
        <td>6</td>
        <td></td>
        <td></td>
    </tr>
</table>

<!--
全选全消需求：
    点击checkall的时候，如果checkall是选中状态，所有的item都设置为选中状态；
    点击checkall的时候，如果checkall是未选中状态，所有的item都设置为未选中状态；
分析：
    什么时候：点击checkall的时候，使用事件onclick监听
    做什么：
        获取到checkall的选中状态：checked属性值
        获取所有的item
        循环遍历每个item，设置选中状态为：checkall的选中状态

反选要求：
    点击“反选”按钮时，要求所有的item选中状态，取反
分析：
    什么时候：点击“反选”按钮时：使用事件onclick监听
    做什么：
        获取所有的item
        循环遍历，每个item的选中状态值（checked属性值），取出，取反，设置回去
-->
<script>
    function check() {
        //获取到checkall的选中状态：checked属性值
        var checked = document.getElementById("checkall").checked;
        //获取所有的item
        var items = document.getElementsByClassName("item");
        //循环遍历每个item，设置选中状态为：checkall的选中状态
        for (var i = 0; i < items.length; i++) {
            items[i].checked = checked;
        }
    }

    function inverse() {
        //获取所有的item
        var items = document.getElementsByClassName("item");
        for (var i = 0; i < items.length; i++) {
            //取出checked属性值，取反再设置回去
            //items[i].checked = !items[i].checked;

            //让js代码模拟点击操作，把每个item都点一遍
            items[i].click();
        }
    }
</script>
</body>
</html>

四.电子时钟

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>电子时钟</title>
</head>
<body>
<!--
要求：
    页面有个h1 标签，在标签里要实时显示当前时间
分析：
    1. 打开页面时，h1里显示当前时间：
        通过js代码，得到当前时间，显示到h1标签里
    2. 点击“开始”按钮，时间开始走
        每秒钟，显示一次当前时间。定时器
    3. 点击“暂停”按钮，时间暂停
        清除定时器
-->
<input type="button" value="开始" id="startBtn" onclick="start()">
<input type="button" value="暂停" id="stopBtn" onclick="stop()">
<h1 id="clock"></h1>

<script>
    var clock = document.getElementById("clock");
    //1. 打开页面时，h1里显示当前时间：
    clock.innerHTML = new Date().toLocaleString();
    //页面一打开，就开始走
    start();

    var timer;
    function start() {
        //每秒钟，显示一次当前时间。定时器
        timer = setInterval(function () {
            clock.innerHTML = new Date().toLocaleString();
        }, 1000);
        //开启定时器之后，设置“开始”按钮为禁用状态  disabled
        document.getElementById("startBtn").disabled = true;
    }

    function stop() {
        clearInterval(timer);
        //暂停之后，再设置“开始”按钮为可用状态
        document.getElementById("startBtn").disabled = false;
    }
</script>
</body>
</html>

五.表单校验

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8"/>
        <title>验证注册页面</title>
        <style type="text/css">
			body {
				margin: 0;
				padding: 0;
				font-size: 12px;
				line-height: 20px;
			}
			.main {
				width: 525px;
				margin-left: auto;
				margin-right: auto;
			}
			.hr_1 {
				font-size: 14px;
				font-weight: bold;
				color: #3275c3;
				height: 35px;
				border-bottom-width: 2px;
				border-bottom-style: solid;
				border-bottom-color: #3275c3;
				vertical-align: bottom;
				padding-left: 12px;
			}
			.left {
				text-align: right;
				width: 80px;
				height: 25px;
				padding-right: 5px;
			}
			.center {
				width: 280px;
			}
			.in {
				width: 130px;
				height: 16px;
				border: solid 1px #79abea;
			}

			.red {
				color: #cc0000;
				font-weight: bold;
			}

			div {
				color: #F00;
			}
        </style>
        <script type="text/javascript">
        </script>
    </head>

    <body>
        <form action="#" method="get" id="myform" onsubmit="return checkForm()">
            <table class="main" border="0" cellspacing="0" cellpadding="0">
                <tr>
                    <td><img src="img/logo.jpg" alt="logo" /><img src="img/banner.jpg" alt="banner" /></td>
                </tr>
                <tr>
                    <td class="hr_1">新用户注册</td>
                </tr>
                <tr>
                    <td style="height:10px;"></td>
                </tr>
                <tr>
                    <td>
                    <table width="100%" border="0" cellspacing="0" cellpadding="0">
                        <tr>
                            <!-- 不能为空， 输入长度必须介于 5 和 10 之间 -->
                            <td class="left">用户名：</td>
                            <td class="center">
                                <!--每个input都隐含有value属性，默认值是：""-->
								<input id="user" name="user" type="text" class="in"/>
                            </td>
                        </tr>
                        <tr>
                             <!-- 不能为空， 输入长度大于6个字符 -->
                            <td class="left">密码：</td>
                            <td class="center">
								<input id="pwd" name="pwd" type="password" class="in" />
                            </td>
                        </tr>
                        <tr>
                            <!-- 不能为空， 与密码相同 -->
                            <td class="left">确认密码：</td>
                            <td class="center">
								<input id="repwd" name="repwd" type="password" class="in"/>
                            </td>
                        </tr>
                        <tr>
                            <!-- 不能为空， 邮箱格式要正确：下节课使用正则表达式校验 -->
                            <td class="left">电子邮箱：</td>
                            <td class="center">
								<input id="email" name="email" type="text" class="in"/>
                            </td>
                        </tr>
                        <tr>
                             <!-- 不能为空，1开头，11位全是数字：下节课使用正则表达式校验 -->
                            <td class="left">手机号码：</td>
                            <td class="center">
								<input id="mobile" name="mobile" type="text" class="in"/>
                            </td>
                        </tr>
                        <tr>
                            <!-- 不能为空， 要正确的日期格式 -->
                            <td class="left">生日：</td>
                            <td class="center">
								<input id="birth" name="birth" type="date" class="in"/>
                            </td>
                        </tr>
                        <tr>
                            <td class="left">&nbsp;</td>
                            <td class="center">
								<input name="" type="image" src="img/register.jpg" />
                            </td>
                        </tr>
                    </table></td>
                </tr>
            </table>
        </form>

    <!--
    要求：当表单被提交时，要校验每个表单项的值是否符合要求。
          如果符合，就允许提交
          如果不符合，就阻止提交，并弹窗提示错误原因

    分析：
        监听提交事件：onsubmit
        监听到提交事件之后，要有能力阻止提交的继续执行：οnsubmit="return false"
        需要校验表单项数据，如果不符合时，再阻止提交
    -->
        <script>
            function checkForm(){
                //校验表单项的数据，如果不符合要求，就return false
                //1. 校验用户名：
                var userInput = document.getElementById("user");
                var userValue = userInput.value;
                if (userValue === "") {
                    //1.1 如果为空，弹窗提示，return false
                    alert("用户名不能为空");
                    return false;
                }else if(userValue.length < 5){
                    alert("用户名最少5位");
                    return false;
                }else if(userValue.length > 10){
                    alert("用户名最多10位");
                    return false;
                }

                //2. 校验邮箱：不能为空，格式必须正确
                //2.1 获取邮箱标签对象
                var emailInput = document.getElementById("email");
                //2.2 获取邮箱的值
                var emailValue = emailInput.value;
                //2.3 判断是否为空：如果为空，就提示并不允许提交
                if (emailValue === "") {
                    alert("邮箱不能为空");
                    return false;
                }
                //2.4 判断是否格式正确：如果不正确，就提示并不允许提交
                var reg = /^\w+@\w+(.[a-zA-Z]{2,3}){1,2}$/;
                if (!reg.test(emailValue)) {
                    alert("邮箱格式不正确");
                    return false;
                }

                return true;
            }
        </script>
    </body>
</html>
Levana。
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JavaScript 经典实例盘点（收藏向）
Silvia
07-03 1万+
快捷目录一、跨 浏 览 器 事 件跨浏览器添加事件跨浏览器移除事件跨浏览器阻止默认行为跨浏览器获取目标对象跨浏览器获取滚动条位置跨浏览器获取可视窗口大小二、js 对 象 冒 充三、js异步加载和同步加载四、js获取屏幕坐标五、PageX和clientX六、js 拖 拽 效 果七、js获取图片原始大小尺寸八、js循环遍历数组九、阻止表单重复提交十、字 符 串 部 分十一、Number和Math部分十二、数 组 部 分十三、Date日期时间部分十四、正 则 部 分十五、js判断传入参数是否为质数十六、js判断字
JavaScript 实例
z_once的博客
02-25 1349
JavaScript 是属于 HTML 和 Web 的编程语言。 编程令计算机完成您需要它们做的工作。 JavaScript 很容易学习。 本教程涵盖 JavaScript 基础和高级教程。
25 道神奇的 javascript 示例
weixin_45242865的博客
08-22 5539
前言 JavaScript 是一种很好的语言。它有一个简单的语法，庞大的生态系统，以及最重要， 最伟大的社区。同时，我们都知道，JavaScript 是一个非常有趣又充满戏法的语言。 他们中的有些可以迅速将我们的日常工作变成地狱，有些可以让我们大声笑起来。 背景 这些示例的主要目的是收集一些疯狂的例子，并解释它们如何工作.如果您是初学者，您可 以阅读此文章来深入了解 JavaScript。我希望这个文章会激励你花更多时间阅读规范。 如果您是专业开发人员，您可以将这些示例视为您公司新手访问问题和测验的重要资
javascript的61个实例
Just Do It
11-19 1582
今天看了看博客，正好学习到js这一块，就把这篇
javascript的常用例子,javascript的用法
阿发狗伪原创
12-02 82
提高代码的复用性，降低程序维护的难度。
简单的javascript例子,javascript案例大全
神经网络爱好者
12-02 262
这篇文章主要介绍了简单的javascript例子，具有一定借鉴价值，需要的朋友可以参考下。希望大家阅读完这篇文章后大有收获，下面让小编带着大家一起了解一下。
JavaScript的综合应用案例
TrineaShao' Blog
01-05 1237
实现以上功能： 1、文字的填充、form表单数据 2、改变颜色、改变宽高、隐藏内容、显示内容、恢复 3、代码如下 &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;style样式&lt;/title&am
JavaScript应用实例集合
07-01
这个"JavaScript应用实例集合"很可能是包含了多个JavaScript的实际应用案例，旨在帮助开发者更好地理解和掌握JavaScript的核心特性和常见用法。让我们深入探讨一下JavaScript的一些关键知识点。 1. **基础语法**：...
JavaScript应用实例
12-01
JavaScript应用的两种用法：1.直接加入网页 2.引用方式
JavaScript应用实例ABC.pdf
最新发布
01-03
JavaScript 应用实例 ABC.pdf 本文档主要介绍了 JavaScript 的应用实例，展示了如何使用 JavaScript 实现日期和星期显示、跳转菜单的设计等功能。 一、日期和星期显示 通过以下代码，我们可以在网页上显示当前...
JavaScript队列的应用实例详解【经典数据结构】
10-20
主要介绍了JavaScript队列的应用,简单讲述了队列的概念并结合实例形式分析了基于javascript队列排队问题解决方法,需要的朋友可以参考下
300个JavaScript应用实例
06-10
300个JavaScript应用实例 300个JavaScript应用实例
javascript例子javascript例子
08-19
相当好的javascript例子，共有320c例子
JavaScript 实例应用
06-07
介绍一些常用的JavaScript脚本
300个JavaScript小例子
03-31
300个JavaScript小例子300个JavaScript小例子300个JavaScript小例子
javascript应用程序经典实例
07-22
资源名称：Javaｓｃｒｉｐｔ应用程序经典实例   内容简介： 懂得Javaｓｃｒｉｐｔ语法是一回事，能够创建有用的应用程序就是另一回事了。虽然市面上有成打的Javaｓｃｒｉｐｔ图书教你怎么做，但实际上...
JavaScript应用实例-bmob用户验证demo.js
12-09
JavaScript应用实例-bmob用户验证demo.js
20个JavaScript开发案列（一）
终成大师的博客
02-17 4903
20个JavaScript开发案列（一）
Javascript实例
index0000001的博客
06-24 1352
javascript实例

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值