JavaScript下拉列表和周期函数实现网页时间刷新和时间暂停-----JavaScript

已于 2023-11-10 23:27:20 修改
阅读量47 收藏
点赞数 1
分类专栏： 前端 文章标签： javascript ecmascript react.js node.js js vue.js 前端
于 2023-11-09 16:03:05 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2201_75960169/article/details/134314118
版权 
<!DOCTYPE html>
<!-- 这是HTML的注释 -->
<html lang="en" id="myHtml">
	<head>
		<!-- 这里不是设置了编码,而是告诉浏览器,用什么编码方式打开文件避免乱码 -->
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>HtmlAll</title>
		<style type="text/css">
			span
			{
				color: red;
				font-size: 12px;
			}
		</style>
	</head>
	<body>
		<!-- JS包括三大块
		dom指的是文档对象模型,对网页中的节点进行增删改查的过程
		bom浏览器对象模型(关闭浏览器窗口,打开一个浏览器窗口,后退前进,浏览器地址栏上的地址)
		ecmascript是JS的核心语法ES标准
		bom的顶级对象是window(浏览器窗口),dom的顶级对象是document(HTML文档) -->
		<!-- 实际上bom是包含dom的 -->
		<!-- bom和DOM是包含关系 -->
		<script type="text/javascript">
			window.onload = function()
			{
				var UF = document.getElementById("usernameError");
				//通过浏览器窗体获取了html元素
				document.getElementById("btn").onclick = function()
				{
					alert(btn);
				}
				document.getElementById("get").onclick = function()
				{
					alert(document.getElementById("txt").value);
					document.getElementById("nwx").value = "jack";
				}
				var un = document.getElementById("username");
				un.onblur = function()
				{
					username = un.value;
					username = username.trim();
					if(username)
					{
						//代表非空
						if(username.length < 6 || username.length > 14)
						{
							//用户名长度非法
							UF.innerText = "用户名必须在6到14之间";
						}
						else
						{
							//用户名长度合法
							//判断是否有非法字符
							var regExp = /^[A-Za-z0-9]+$/;
							if(regExp.test(username))
							{
								//合法
							}
							else
							{
								//不合法
								UF.innerText = "用户名只能由数字和字母组成";
							}
						}
					}
					else
					{
						//代表空
						//提示信息
						UF.innerText = "用户名不能为空";
					}
				}
				un.onfocus = function()
				{			
					//这里要先检测再清空,这样就可以判断内容是否为空格组成用于清理
					if(UF.innerText != "")
					{
						//清空空格内容
						un.value = "";
					}
					//清空提示信息
					UF.innerText = "";
				}
				document.getElementById("pwd2").onblur = function()
				{
					var pwd1 = document.getElementById("pwd1").value;
					var pwd2 = document.getElementById("pwd2").value;
					if(pwd1 != pwd2)
					{
						//密码错误的提示标签提示错误
						document.getElementById("pwdError").innerText = "两次输入的密码不一致";
					}
					if(pwd1 === "" || pwd2 === "")
					{
						document.getElementById("pwdError").innerText = "密码不能为空";
					}
				}
				document.getElementById("pwd2").onfocus = function()
				{
					if(document.getElementById("pwdError").innerText != "")
					{
						document.getElementById("pwdError").innerText = "";
					}
				}
				document.getElementById("email").onblur = function()
				{
					var email = document.getElementById("email").value;
					var emailRegExp = /^[A-Za-z0-9]+([-._][A-Za-z0-9]+)*@[A-Za-z0-9]+(-[A-Za-z0-9]+)*(\.[A-Za-z]{2,6}|[A-Za-z]{2,4}\.[A-Za-z]{2,3})$/;
					if(emailRegExp.test(email))
					{
						
					}
					else
					{
						//没过
						document.getElementById("emailnameError").innerText = "必须输入一个邮箱";
					}
				}
				document.getElementById("email").onfocus = function()
				{
					if(document.getElementById("emailnameError").innerText != "")
					{
						document.getElementById("emailnameError").innerText = "";
					}
				}
				document.getElementById("myForm").onsubmit = function()
				{
					
				}
				document.getElementById("update").onclick = function()
				{
					document.getElementById("username").onblur();
					document.getElementById("pwd2").onblur();
					document.getElementById("email").onblur();
					var emailnameError = document.getElementById("emailnameError").innerText;
					var emailnameError = document.getElementById("pwdError").innerText;
					if(UF.innerText === "" && emailnameError === "" && pwdError === "")
					{
						document.getElementById("myForm").submit();
					}
					else
					{
						alert("输入信息有误");
					}
				}
				var aihaos = document.getElementsByName("aihao");
				document.getElementById("firstCheck").onclick = function()
				{
					var flag = document.getElementById("firstCheck");					
					// if(flag.checked)
					// {
					// 	//全选
					// 	//返回的是多个对象
					// 	for(var i = 0;i < aihaos.length;i++)
					// 	{
					// 		aihaos[i].checked = true;
					// 	}
					// }
					// else
					// {
					// 	//取消全选
					// 	//返回的是多个对象
					// 	for(var i = 0;i < aihaos.length;i++)
					// 	{
					// 		aihaos[i].checked = false;
					// 	}
					// }
					//简便写法
					for(var i = 0;i < aihaos.length;i++)
					{
						aihaos[i].checked = flag.checked;
					}
				}
				for(var i = 0;i < aihaos.length;i++)
				{
					aihaos[i].onclick = function()
					{
						var count = 0;
						//总选中量和被选中量相同,全选打勾
						for(var i = 0;i < aihaos.length;i++)
						{
							if(aihaos[i].checked)
							{
								count++;
							}
						}
						//简便写法
						document.getElementById("firstCheck").checked = (count == aihaos.length);
						// if(count == aihaos.length)
						// {
						// 	document.getElementById("firstCheck").checked = true;
						// }
						// else
						// {
						// 	document.getElementById("firstCheck").checked = false;
						// }
					}
				}
				document.getElementById("provinceList").onchange = function()
				{
					alert(document.getElementById("provinceList").value);
				}
				var code;
				document.getElementById("GetTime").onclick = function()
				{
					code = window.setInterval(displayTime,100);
				}
				function displayTime()
				{
					//获取系统当前时间
					var Time = new Date();
					//通过日期Date对象获取年月日
					var year = Time.getFullYear();
					//获取月份,但是是0到11,所以要加1
					var month = Time.getMonth();
					//获取的一周的第几天
					var day = Time.getDate();
					//怎么获取毫秒数
					var times = Time.getTime();
					//转换本地语言的日期格式
					Time = Time.toLocaleString();
					document.getElementById("TimeDiv").innerText = Time;
				}
				document.getElementById("World!").onclick = function()
				{
					window.clearInterval(code);
				}
			}
		</script>
		<input type="button" id="btn" value="hello"/>
		<input type="text" id="txt"/>
		<input type="button" id="get" value="获取文本的value"/>
		<input type="text" id="nwx"/>
		<input type="text" value="哈哈哈哈哈哈哈哈哈" onblur="alert(this.value)"/>
		<div>
			<table>
				<form id="myForm" action="http://www.baidu.com">
					<tr>
						<th>
							用户名:
						</th>
						<th>
							<input type="text" id="username"/>
							
						</th>
						<th>
							<span id="usernameError"></span>
						</th>
					</tr>
					<tr>
						<th>
							密码:
						</th>
						<th>
							<input id="pwd1" type="text"/>
						</th>
					</tr>
					<tr>
						<th>
							确认密码:
						</th>
						<th>
							<input id="pwd2" type="text"/>
						</th>
						<th>
							<span id="pwdError"></span>
						</th>
					</tr>
					<tr>
						<th>
							邮箱:
						</th>
						<th>
							<input id="email" type="email"/>							
						</th>
						<th>
							<span id="emailnameError"></span>
						</th>
					</tr>
					<tr>
						<th>
							注册或重置
						</th>
						<th>
							<input id="update" type="button" value="注册"/>
							<input type="reset" value="重置"/>
						</th>
					</tr>
				</form>
			</table>
		</div>
		<div>
			<table>
				<form>
					<tr>
						<th>
							<th>
								<input type="checkbox" name="aihao"/>抽烟
							</th>
							<th>
								<input type="checkbox" name="aihao"/>喝酒
							</th>
							<th>
								<input type="checkbox" name="aihao"/>烫头
							</th>
						</th>
					</tr>
					<tr>
						<th>
							<th>
								<input type="checkbox" id="firstCheck"/>全选
							</th>
						</th>
					</tr>
				</form>
			</table>
		</div>
		<div>
			<select id="provinceList">
				<option selected>请选择省份</option>
				<option value="河北省">河北省</option>
				<option value="河南省">河南省</option>
				<option value="山东省">山东省</option>
				<option value="山西省">山西省</option>
				<option value="陕西省">陕西省</option>
			</select>
			<input type="button" value="获取时间" id="GetTime"/>
			<input type="button" value="扎瓦鲁多" id="World!"/>
		</div>
		<div id="TimeDiv"></div>
	</body>
</html>

<!DOCTYPE html>
<!-- 这是HTML的注释 -->
<html lang="en" id="myHtml">
    <head>
        <!-- 这里不是设置了编码,而是告诉浏览器,用什么编码方式打开文件避免乱码 -->
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>HtmlAll</title>
        <style type="text/css">
            span
            {
                color: red;
                font-size: 12px;
            }
        </style>
    </head>
    <body>
        <!-- JS包括三大块
        dom指的是文档对象模型,对网页中的节点进行增删改查的过程
        bom浏览器对象模型(关闭浏览器窗口,打开一个浏览器窗口,后退前进,浏览器地址栏上的地址)
        ecmascript是JS的核心语法ES标准
        bom的顶级对象是window(浏览器窗口),dom的顶级对象是document(HTML文档) -->
        <!-- 实际上bom是包含dom的 -->
        <!-- bom和DOM是包含关系 -->
        <script type="text/javascript">
            window.onload = function()
            {
                var UF = document.getElementById("usernameError");
                //通过浏览器窗体获取了html元素
                document.getElementById("btn").onclick = function()
                {
                    alert(btn);
                }
                document.getElementById("get").onclick = function()
                {
                    alert(document.getElementById("txt").value);
                    document.getElementById("nwx").value = "jack";
                }
                var un = document.getElementById("username");
                un.onblur = function()
                {
                    username = un.value;
                    username = username.trim();
                    if(username)
                    {
                        //代表非空
                        if(username.length < 6 || username.length > 14)
                        {
                            //用户名长度非法
                            UF.innerText = "用户名必须在6到14之间";
                        }
                        else
                        {
                            //用户名长度合法
                            //判断是否有非法字符
                            var regExp = /^[A-Za-z0-9]+$/;
                            if(regExp.test(username))
                            {
                                //合法
                            }
                            else
                            {
                                //不合法
                                UF.innerText = "用户名只能由数字和字母组成";
                            }
                        }
                    }
                    else
                    {
                        //代表空
                        //提示信息
                        UF.innerText = "用户名不能为空";
                    }
                }
                un.onfocus = function()
                {            
                    //这里要先检测再清空,这样就可以判断内容是否为空格组成用于清理
                    if(UF.innerText != "")
                    {
                        //清空空格内容
                        un.value = "";
                    }
                    //清空提示信息
                    UF.innerText = "";
                }
                document.getElementById("pwd2").onblur = function()
                {
                    var pwd1 = document.getElementById("pwd1").value;
                    var pwd2 = document.getElementById("pwd2").value;
                    if(pwd1 != pwd2)
                    {
                        //密码错误的提示标签提示错误
                        document.getElementById("pwdError").innerText = "两次输入的密码不一致";
                    }
                    if(pwd1 === "" || pwd2 === "")
                    {
                        document.getElementById("pwdError").innerText = "密码不能为空";
                    }
                }
                document.getElementById("pwd2").onfocus = function()
                {
                    if(document.getElementById("pwdError").innerText != "")
                    {
                        document.getElementById("pwdError").innerText = "";
                    }
                }
                document.getElementById("email").onblur = function()
                {
                    var email = document.getElementById("email").value;
                    var emailRegExp = /^[A-Za-z0-9]+([-._][A-Za-z0-9]+)*@[A-Za-z0-9]+(-[A-Za-z0-9]+)*(\.[A-Za-z]{2,6}|[A-Za-z]{2,4}\.[A-Za-z]{2,3})$/;
                    if(emailRegExp.test(email))
                    {
                        
                    }
                    else
                    {
                        //没过
                        document.getElementById("emailnameError").innerText = "必须输入一个邮箱";
                    }
                }
                document.getElementById("email").onfocus = function()
                {
                    if(document.getElementById("emailnameError").innerText != "")
                    {
                        document.getElementById("emailnameError").innerText = "";
                    }
                }
                document.getElementById("myForm").onsubmit = function()
                {
                    
                }
                document.getElementById("update").onclick = function()
                {
                    document.getElementById("username").onblur();
                    document.getElementById("pwd2").onblur();
                    document.getElementById("email").onblur();
                    var emailnameError = document.getElementById("emailnameError").innerText;
                    var emailnameError = document.getElementById("pwdError").innerText;
                    if(UF.innerText === "" && emailnameError === "" && pwdError === "")
                    {
                        document.getElementById("myForm").submit();
                    }
                    else
                    {
                        alert("输入信息有误");
                    }
                }
                var aihaos = document.getElementsByName("aihao");
                document.getElementById("firstCheck").onclick = function()
                {
                    var flag = document.getElementById("firstCheck");                    
                    // if(flag.checked)
                    // {
                    //     //全选
                    //     //返回的是多个对象
                    //     for(var i = 0;i < aihaos.length;i++)
                    //     {
                    //         aihaos[i].checked = true;
                    //     }
                    // }
                    // else
                    // {
                    //     //取消全选
                    //     //返回的是多个对象
                    //     for(var i = 0;i < aihaos.length;i++)
                    //     {
                    //         aihaos[i].checked = false;
                    //     }
                    // }
                    //简便写法
                    for(var i = 0;i < aihaos.length;i++)
                    {
                        aihaos[i].checked = flag.checked;
                    }
                }
                for(var i = 0;i < aihaos.length;i++)
                {
                    aihaos[i].onclick = function()
                    {
                        var count = 0;
                        //总选中量和被选中量相同,全选打勾
                        for(var i = 0;i < aihaos.length;i++)
                        {
                            if(aihaos[i].checked)
                            {
                                count++;
                            }
                        }
                        //简便写法
                        document.getElementById("firstCheck").checked = (count == aihaos.length);
                        // if(count == aihaos.length)
                        // {
                        //     document.getElementById("firstCheck").checked = true;
                        // }
                        // else
                        // {
                        //     document.getElementById("firstCheck").checked = false;
                        // }
                    }
                }
                document.getElementById("provinceList").onchange = function()
                {
                    alert(document.getElementById("provinceList").value);
                }
                var code;
                document.getElementById("GetTime").onclick = function()
                {
                    code = window.setInterval(displayTime,100);
                }
                function displayTime()
                {
                    //获取系统当前时间
                    var Time = new Date();
                    //通过日期Date对象获取年月日
                    var year = Time.getFullYear();
                    //获取月份,但是是0到11,所以要加1
                    var month = Time.getMonth();
                    //获取的一周的第几天
                    var day = Time.getDate();
                    //怎么获取毫秒数
                    var times = Time.getTime();
                    //转换本地语言的日期格式
                    Time = Time.toLocaleString();
                    document.getElementById("TimeDiv").innerText = Time;
                }
                document.getElementById("World!").onclick = function()
                {
                    window.clearInterval(code);
                }
            }
        </script>
        <input type="button" id="btn" value="hello"/>
        <input type="text" id="txt"/>
        <input type="button" id="get" value="获取文本的value"/>
        <input type="text" id="nwx"/>
        <input type="text" value="哈哈哈哈哈哈哈哈哈" οnblur="alert(this.value)"/>
        <div>
            <table>
                <form id="myForm" action="http://www.baidu.com">
                    <tr>
                        <th>
                            用户名:
                        </th>
                        <th>
                            <input type="text" id="username"/>
                            
                        </th>
                        <th>
                            <span id="usernameError"></span>
                        </th>
                    </tr>
                    <tr>
                        <th>
                            密码:
                        </th>
                        <th>
                            <input id="pwd1" type="text"/>
                        </th>
                    </tr>
                    <tr>
                        <th>
                            确认密码:
                        </th>
                        <th>
                            <input id="pwd2" type="text"/>
                        </th>
                        <th>
                            <span id="pwdError"></span>
                        </th>
                    </tr>
                    <tr>
                        <th>
                            邮箱:
                        </th>
                        <th>
                            <input id="email" type="email"/>                            
                        </th>
                        <th>
                            <span id="emailnameError"></span>
                        </th>
                    </tr>
                    <tr>
                        <th>
                            注册或重置
                        </th>
                        <th>
                            <input id="update" type="button" value="注册"/>
                            <input type="reset" value="重置"/>
                        </th>
                    </tr>
                </form>
            </table>
        </div>
        <div>
            <table>
                <form>
                    <tr>
                        <th>
                            <th>
                                <input type="checkbox" name="aihao"/>抽烟
                            </th>
                            <th>
                                <input type="checkbox" name="aihao"/>喝酒
                            </th>
                            <th>
                                <input type="checkbox" name="aihao"/>烫头
                            </th>
                        </th>
                    </tr>
                    <tr>
                        <th>
                            <th>
                                <input type="checkbox" id="firstCheck"/>全选
                            </th>
                        </th>
                    </tr>
                </form>
            </table>
        </div>
        <div>
            <select id="provinceList">
                <option selected>请选择省份</option>
                <option value="河北省">河北省</option>
                <option value="河南省">河南省</option>
                <option value="山东省">山东省</option>
                <option value="山西省">山西省</option>
                <option value="陕西省">陕西省</option>
            </select>
            <input type="button" value="获取时间" id="GetTime"/>
            <input type="button" value="扎瓦鲁多" id="World!"/>
        </div>
        <div id="TimeDiv"></div>
    </body>
</html>

旧约Alatus
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值