JavaScript

最新推荐文章于 2021-10-06 08:40:07 发布
最新推荐文章于 2021-10-06 08:40:07 发布
阅读量123 收藏 2
点赞数
分类专栏： JavaScript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_40094312/article/details/83621904
版权

1.图片自动轮播

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script>
			var index=0;
			function changeImg(){
				//1.获得要切换图片的那个元素
				var img=document.getElementById("img1");
				
				//计算出当前要切换到第几张图片
				var curIndex=index%3+1;
				
				img.src="../img/"+curIndex+".jpg";
				index=index+1;
			}
			
			function init(){
				setInterval("changeImg()",1000);
			}
		</script>
	</head>
	<body onload="init()">
		<img src="../img/1.jpg" width="100%" id="img1"/>
	</body>
</html>

2.完成页面定时弹出广告

显示和隐藏：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script>
			function hideImg(){
				var img=document.getElementById("img1");
				img.style.display="none";
			}
			
			function showImg(){
				var img=document.getElementById("img1");
				img.style.display="block";
			}
		</script>
	</head>
	<body>
		<input type="button" value="显示" onclick="showImg()"/>
		<input type="button" value="隐藏" onclick="hideImg()"/><br />
		<img src="../img/1.jpg"  id="img1"/>
	</body>
</html>

定时器：setInterval：每隔多少毫秒执行一次函数

                setTimeout：多少毫秒之后执行一次函数

                clearInterval

                clearTimeout

显示广告：img.style.display = "block"

隐藏广告：img.style.display = "none"

定时弹出广告：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script>
			function hideAD(){
				var img = document.getElementById("img1");
				img.style.display="none";
			}
			
			function showAD(){
				//首先要获取要操作的img
				var img = document.getElementById("img1");
				//显示广告
				img.style.display="block";
				
				//再开启定时器，关闭广告
				setTimeout("hideAD()",3000);
			}
			
			function init(){
				setTimeout("showAD()",3000);
			}
		</script>
	</head>
	<body onload="init()">
		<img id="img1" src="../img/f001a62f-a49d-4a4d-b56f-2b6908a0002c_g.jpg" width="100%" style="display:none"/>
	</body>
</html>

 onfocus事件：获得焦点事件

onblur：失去焦点

onkeyup：按键抬起事件

简单的页面校验：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script>
			/*
			 	1.确定事件：onfocus
			 	2.事件要驱动函数
			 	3.函数：修改span的内容
			 */
			function showTips(){
				var span=document.getElementById("span_username");
				span.innerHTML="<font color='red' size='2'>用户名长度不能小于6位</font>";
				
			}
			
			/*
			 	校验用户名：
			 	1.事件：onblur 失去焦点
			 	2.函数：checkUsername()
			 	3.函数去显示校验结果
			 */
			function checkUsername(){
				//获取用户输入的内容
				var uValue=document.getElementById("username").value;
				//对输入的内容进行校验
				//获得要显示结果的span
				var span=document.getElementById("span_username");
				if(uValue.length<6){
					span.innerHTML = "<font color='red' size='2'>对不起，用户名太短</font>";
				}
				else{
					span.innerHTML = "<font color='red' size='2'>恭喜您，用户名可用</font>";
				}
			}
		</script>
	</head>
	<body>
		<form action="../01-自动轮播图片/图片自动轮播.html">
			用户名：<input type="text" id="username" onfocus="showTips()" onblur="checkUsername()" onkeyup="checkUsername()"/><span id="span_username"></span><br />
			密码：<input type="password" id="password"/><br />
			确认密码：<input type="password" id="repassword" /><br />
			邮箱：<input type="text" id="email"/><br />
			手机号：<input type="text" id="text"/>
		</form>
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<!--
        	作者：offline
        	时间：2018-11-02
        	描述：引入外部的js文件
        -->
        <script type="text/javascript" src="../js/regutils.js" ></script>
		<script>
			/*
			 	1.确定事件：onfocus
			 	2.事件要驱动函数
			 	3.函数：修改span的内容
			 */
			function showTips(spanID,msg){
				var span=document.getElementById(spanID);
				span.innerHTML=msg;
				
			}
			
			/*
			 	校验用户名：
			 	1.事件：onblur 失去焦点
			 	2.函数：checkUsername()
			 	3.函数去显示校验结果
			 */
			function checkUsername(){
				//获取用户输入的内容
				var uValue=document.getElementById("username").value;
				//对输入的内容进行校验
				//获得要显示结果的span
				var span=document.getElementById("span_username");
				if(uValue.length<6){
					span.innerHTML = "<font color='red' size='2'>对不起，用户名太短</font>";
					return false;
				}
				else{
					span.innerHTML = "<font color='red' size='2'>恭喜您，用户名可用</font>";
					return true;
				}
			} 
			
			/*
			 *   密码校验
			 
			 */
			function checkPassword(){
				//获取密码输入
				var uPass=document.getElementById("password").value;
				
				var span=document.getElementById("span_password");
			
				//对密码输入进行校验
				if(uPass.length<6){
					span.innerHTML="<font color='red' size='2'>对不起，密码太短</font>";
					return false;
				}
				else
				{
					span.innerHTML="<font color='red' size='2'>恭喜您，可用</font>";
					return true;
				}
			}
			
			/*
			 * 确认密码校验
			 */
			function checkRePassword(){
				//获取密码输入
				var uPass=document.getElementById("password").value;
				
				//获取确认密码输入
				var uRePass = document.getElementById("repassword").value;
				
				var span=document.getElementById("span_repassword");
			
				//对密码输入进行校验
				if(uPass != uRePass){
					span.innerHTML="<font color='red' size='2'>对不起，两次密码不一致</font>";
					return false;
				}
				else
				{
					span.innerHTML="";
					return true;
				}
			}
			
			/*
			 * 校验邮箱
			 */
			function checkMail(){
				var umail = document.getElementById("email").value;
				
				var flag = checkEmail(umail);
				
				var span=document.getElementById("span_email");
			
				//对邮箱输入进行校验
				if(flag){
					span.innerHTML="<font color='red' size='2'>恭喜您，可用</font>";
					return true;
				}
				else
				{
					span.innerHTML="<font color='red' size='2'>对不起，邮箱格式貌似有问题</font>";
					return false;
				}
			}
			
			function checkForm(){
				var flag = checkUsername() && checkPassword() && checkRePassword() && checkMail();
				return flag;
				
			}
		</script>
	</head>
	<body>
		<form action="../01-自动轮播图片/图片自动轮播.html" onsubmit="return checkForm()">
			用户名：<input type="text" id="username" onfocus="showTips('span_username','用户名长度不能小于6')" onblur="checkUsername()" onkeyup="checkUsername()"/><span id="span_username"></span><br />
			密码：<input type="password" id="password" onfocus="showTips('span_password','密码长度不能小于6')" onblur="checkPassword()" onkeyup="checkPassword()"/><span id="span_password"></span><br />
			确认密码：<input type="password" id="repassword" onfocus="showTips('span_repassword','两次密码必须一致')" onblur="checkRePassword()" onkeyup="checkRePassword()"/><span id="span_repassword"></span><br />
			邮箱：<input type="text" id="email" onfocus="showTips('span_email','邮箱格式必须正确')" onblur="checkMail()"/><span id="span_email"></span><br />
			手机号：<input type="text" id="text"/><br />
			
			<input type="submit" value="提交" />
		</form>
	</body>
</html>

表格隔行换色：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script>
			function init()
			{
				//得到表格
				var tab=document.getElementById("tab");
				//得到表格中每一行
				var rows=tab.rows;
				for(var i=1;i<rows.length;i++)
				{
					var row=rows[i];
					if(i%2==0)
					{
						row.bgColor="yellow";
					}
					else
					{
						row.bgColor="red";
					}
				}
			}
		</script>
	</head>
	<body onload="init()">
		<table border="1px" width="600px" id="tab">
			<tr>
				<td>
					<input type="checkbox" />
				</td>
				<td>分类ID</td>
				<td>分类名称</td>
				<td>分类商品</td>
				<td>分类描述</td>
				<td>操作</td>
			</tr>
			<tr>
				<td>
					<input type="checkbox" />
				</td>
				<td>1</td>
				<td>手机数码</td>
				<td>华为，小米，尼康</td>
				<td>黑马数码产品质量最好</td>
				<td>
					<a href="#">修改</a>|<a href="#">删除</a>
				</td>
			</tr>
			<tr>
				<td>
					<input type="checkbox" />
				</td>
				<td>2</td>
				<td>冰箱彩电</td>
				<td>海尔，TCL，康佳</td>
				<td>支持</td>
				<td>
					<a href="#">修改</a>|<a href="#">删除</a>
				</td>
			</tr>
			<tr>
				<td>
					<input type="checkbox" />
				</td>
				<td>3</td>
				<td>电脑办公</td>
				<td>联想，小米</td>
				<td>笔记本特卖</td>
				<td>
					<a href="#">修改</a>|<a href="#">删除</a>
				</td>
			</tr>
			<tr>
				<td>
					<input type="checkbox" />
				</td>
				<td>4</td>
				<td>馋嘴零食</td>
				<td>辣条，麻花，黄瓜</td>
				<td>年货</td>
				<td><a href="#">修改</a>|<a href="#">删除</a></td>
			</tr>
			<tr>
				<td>
					<input type="checkbox" />
				</td>
				<td>5</td>
				<td>床上用品/td>
				<td>床单，被套</td>
				<td>都是被单</td>
				<td><a href="#">修改</a>|<a href="#">删除</a></td>
			</tr>
		</table>
	</body>
</html>

表格全选和不选：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script>
			function init()
			{
				//得到表格
				var tab=document.getElementById("tab");
				//得到表格中每一行
				var rows=tab.rows;
				for(var i=1;i<rows.length;i++)
				{
					var row=rows[i];
					if(i%2==0)
					{
						row.bgColor="yellow";
					}
					else
					{
						row.bgColor="red";
					}
				}
			}
			
			function checkAll(){
				//获得当前第一个checkbox状态 
				var check1=document.getElementById("check1");
				//得到当前checked状态
				var checked=check1.checked;
				//获得所有分类项的checkbox
				//var checks=document.getElementsByTagName("input");
				var checks = document.getElementsByName("checkone");
				//alert(checks.length);
				for(var i=0;i<checks.length;i++)
				{
					//修改每一个checkbox的状态
					var checkone = checks[i];
					checkone.checked = checked;
				}
			}
		</script>
	</head>
	<body onload="init()">
		<table border="1px" width="600px" id="tab">
			<tr>
				<td>
					<input type="checkbox" onclick="checkAll()" id="check1"/>
				</td>
				<td>分类ID</td>
				<td>分类名称</td>
				<td>分类商品</td>
				<td>分类描述</td>
				<td>操作</td>
			</tr>
			<tr>
				<td>
					<input type="checkbox" name="checkone"/>
				</td>
				<td>1</td>
				<td>手机数码</td>
				<td>华为，小米，尼康</td>
				<td>黑马数码产品质量最好</td>
				<td>
					<a href="#">修改</a>|<a href="#">删除</a>
				</td>
			</tr>
			<tr>
				<td>
					<input type="checkbox" name="checkone"/>
				</td>
				<td>2</td>
				<td>冰箱彩电</td>
				<td>海尔，TCL，康佳</td>
				<td>支持</td>
				<td>
					<a href="#">修改</a>|<a href="#">删除</a>
				</td>
			</tr>
			<tr>
				<td>
					<input type="checkbox" name="checkone"/>
				</td>
				<td>3</td>
				<td>电脑办公</td>
				<td>联想，小米</td>
				<td>笔记本特卖</td>
				<td>
					<a href="#">修改</a>|<a href="#">删除</a>
				</td>
			</tr>
			<tr>
				<td>
					<input type="checkbox" name="checkone"/>
				</td>
				<td>4</td>
				<td>馋嘴零食</td>
				<td>辣条，麻花，黄瓜</td>
				<td>年货</td>
				<td><a href="#">修改</a>|<a href="#">删除</a></td>
			</tr>
			<tr>
				<td>
					<input type="checkbox" name="checkone"/>
				</td>
				<td>5</td>
				<td>床上用品/td>
				<td>床单，被套</td>
				<td>都是被单</td>
				<td><a href="#">修改</a>|<a href="#">删除</a></td>
			</tr>
		</table>
	</body>
</html>

 

Fly_mx
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
javascript
02-10
javascript官方文档，web前端师的权威文档，web前端的
JavaScript JavaScript JavaScript
06-26
JavaScript JavaScript JavaScript
JS
hss950910的博客
08-13 462
# 今日任务 ###  使用JS完成页面定时弹出广告 ### 使用JS完成表单的校验 ### 使用JS完成表格的隔行换色 ### 使用JS完成复选框的全选效果 ### 使用JS完成省市的联动效果 ### JS控制下拉列表左右选择 ### 教学导航 1. 掌握JS中的BOM对象 2. 掌握JS中的常用事件 3. 掌握JS中的常用DOM操作 4. 了解JS中的内置对象 上一次内容进...
（肆）JS表单校验（鼠标聚焦和失去焦点判断）
Cherry_King的博客
08-28 2844
1. onfocus：当用户鼠标移动到输入框中时候, 请给用户一个提示。 2. onblur：当用户鼠标移开时候, 校验一下用户输入。 3. onkeyup：当用户按键输入抬起的时候, 校验一下用户输入。
JS-简单表单校验
qq_43078445的博客
04-27 169
目录： 效果截图： 代码： 表单校验.html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <!-- 引入外部的js文件 --> <script type="text/javascri...
javascript百炼成仙 第一章 掌握JavaScript基础01 初入宗门
热门推荐
java小白翻身
10-06 17万+
乐阳村，处于脚本大陆东部的边缘地带，民风淳朴，村名日出而作，日落而息。这一日清晨，所有村民来到村庄的门口，正在为一个十五六岁的少年送别。只见那少年虽然身体瘦弱，可是目中绽放出异彩，身躯虽不壮实，倒也挺拔。 “叶小凡，你是我们全村人的骄傲，百年来唯一一个具备修行JavaScript甲等资质的孩子！马上会有千鹤派的大人来接你，今后你一定要认真修行，给我们全村的人争光！” 他叫叶小凡，几天前通过了修行资质的检验，符合修行JavaScript的资质。 “千鹤派！”叶小凡眼前一亮，语气中伴随着激动，两眼放光。千鹤派，
JavaScript基础大总结
Augenstern_QXL的博客
07-31 13万+
✍初始JavaScirpt JavaScript 是世界上最流行的语言之一，是一种运行在客户端的脚本语言 （Script 是脚本的意思） 脚本语言：不需要编译，运行过程中由 js 解释器( js 引擎）逐行来进行解释并执行 现在也可以基于 Node.js 技术进行服务器端编程 ????浏览器执行JS简介 浏览器分成两部分：渲染引擎和 JS 引擎 渲染引擎：用来解析HTML与CSS，俗称内核，比如 chrome 浏览器的 blink ，老版本的 webkit JS 引擎：也称为 JS 解释器。 用来读
JavaScript实例大全
12-19
这个压缩包“JavaScript实例大全”显然是一份集合了多种JavaScript相关资源的宝典，包括“JavaScript网页设计300例”、“javascript源码大全”以及“jquery 1.7 中文 api 修正版”。 首先，“JavaScript网页设计300...
JAVASCRIPT HashTable
10-31
JAVASCRIPT HashTable
JavaScript语言精粹
09-27
JavaScript 曾是“世界上最被误解的语言”，因为它担负太多的特性，包括糟糕的交互和失败的设计，但随着Ajax 的到来，JavaScript“从最受误解的编程语言演变为最流行的语言”，这除了幸运之外，也证明了它其实是一门...
注册信息的校验
云飞扬°的博客
05-16 973
注册信息的校验 步骤： 确认事件 事件触发函数 函数操作元素 例如：校验用户名 1. 当用户鼠标移动到输入框中时候, 请给用户一个提示 事件: 焦点事件 onfocus ...
Web前端-JS
weixin_34279184的博客
08-17 230
2019独角兽企业重金招聘Python工程师标准>>> ...
ubuntu20.04安装教程.docx
07-09
安装 Ubuntu 20.04（Focal Fossa）的步骤如下所示。确保在开始安装之前备份重要数据，以防万一。 1. 下载 Ubuntu 20.04 镜像文件 访问 Ubuntu 官网（https://ubuntu.com/download/desktop）下载 Ubuntu 20.04 的镜像文件。根据你的计算机架构选择合适的版本（通常是 64 位的）。 2. 制作启动盘 你可以使用以下两种方法制作 Ubuntu 的启动盘： 使用 Rufus 制作启动盘（适用于 Windows）： 下载并安装 Rufus。 插入空白 USB 驱动器。 打开 Rufus，选择你下载的 Ubuntu 镜像文件。 点击 "开始" 制作启动盘。 使用 Etcher 制作启动盘（跨平台）： 下载并安装 Etcher。 打开 Etcher，选择 Ubuntu 镜像文件和你的 USB 驱动器。 点击 "Flash!" 制作启动盘。 3. 安装 Ubuntu 20.04 制作完成后，将 USB 启动盘插入到需要安装 Ubuntu 的计算机上，然后按照以下步骤进行安装： 启动计算机：在 BIOS 设置
贵阳市建筑物矢量数据（Shp格式+带高度）.txt
最新发布
07-09
因文件较多，数据存放网盘，txt文件内包含下载链接及提取码，永久有效。失效会第一时间进行补充。
学校安全责任追究制度.docx
07-09
学校安全责任追究制度
述职报告（08）PPT模板.pptx
07-09
述职报告（08）PPT模板.pptx

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值