JavaScript小程序

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

1、注册表单校验

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>表单校验</title>
	</head>
	<script>
		function infoCheck(id,info){
			document.getElementById(id+"Span").innerHTML="<font color='burlywood'>"+info+"</font>";
		}
		function nullCheck(id,info){
			var val = document.getElementById(id).value;
			if(val == ""){
				document.getElementById(id+"Span").innerHTML="<font color='red'>"+info+"</font>";
			}else{
				document.getElementById(id+"Span").innerHTML="<font color='green'>√</font>";
			}
		}
		function notEquCheck(id,pwd,info,info1){
			var val = document.getElementById(id).value;
			var val1 = document.getElementById(pwd).value;
			if(val == ""){
				document.getElementById(id+"Span").innerHTML="<font color='red'>"+info+"</font>";
			}else if(val != val1){
				document.getElementById(id+"Span").innerHTML="<font color='red'>"+info1+"</font>";
			}else{
				document.getElementById(id+"Span").innerHTML="<font color='green'>√</font>";
			}
		}
		function emailCheck(id,info,info1){
			var val = document.getElementById(id).value;
			if(val == ""){
				document.getElementById(id+"Span").innerHTML="<font color='red'>"+info+"</font>";
			}else if(!/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/.test(val)){
				document.getElementById(id+"Span").innerHTML="<font color='red'>"+info1+"</font>";
			}else{
				document.getElementById(id+"Span").innerHTML="<font color='green'>√</font>";
			}
		}
	</script>
	<body>
		
		<form action="#" method="get" οnsubmit="return checkForm()">
			<table border="1px" width="600px" height="400px" align="center" cellspacing="0px" cellpadding="1px">
			<tr>
				<td width="130px">用户名</td>
				<td>
					<input type="text" name="userName" size="40" id="userName" οnfοcus="infoCheck(this.id,'用户名必填！')" 
						οnblur="nullCheck(this.id,'用户名不能为空！')"/>
					<span id="userNameSpan"></span>
				</td>
			</tr>
			<tr>
				<td>密码</td>
				<td>
					<input type="password" name="password" size="40" id="password" οnfοcus="infoCheck(this.id,'密码必填！')" 
						οnblur="nullCheck(this.id,'密码不能为空！')"/>
					<span id="passwordSpan"></span>
				</td>
			</tr>
			<tr>
				<td>确认密码</td>
				<td>
					<input type="password" name="rePassword" size="40" id="rePassword" οnfοcus="infoCheck(this.id,'密码必填！')" 
						οnblur="notEquCheck(this.id,'password','确认密码不能为空！','两次密码不一致！')"/>
					<span id="rePasswordSpan"></span>
				</td>
			</tr>
			<tr>
				<td>姓名</td>
				<td>
					<input type="text" name="uName" size="40" id="uName"/>
				</td>
			</tr>
			<tr>
				<td>性别</td>
				<td>
					<input type="radio" name="sex" value="男" checked="checked" />男     
					<input type="radio" name="sex" value="女" />女
				</td>
			</tr>
			<tr>
				<td>出生日期</td>
				<td>
					<input type="text" name="startDate" size="40" id="startDate"/>
				</td>
			</tr>
			<tr>
				<td>邮箱</td>
				<td>
					<input type="text" name="email" size="40" id="email" οnfοcus="infoCheck(this.id,'邮箱必填！')" 
						οnblur="emailCheck(this.id,'邮箱不能为空！','邮箱不合法！')"/>
					<span id="emailSpan"></span>					
				</td>
			</tr>
			<tr>
				<td colspan="2" align="center">
					<input type="submit" value=" 注 册 " />
				</td>
			</tr>
		</table>
		</form>
		
		
	</body>
</html>

2、定时轮播图

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>定时轮播图</title>
	</head>
	<script>
		var count = 1;
		function nextImg(){
			count ++;
			document.getElementById("img").src="../img/"+count+".jpg";
			if(count == 3){
				count = 0;
			}
		}
		function init(){
			setInterval("nextImg()",3000);
		}
	</script>
	<body οnlοad="init()">
		<img src="../img/1.jpg" id="img" height="600px" width="1000px" align="center"/>
		<input type="button" value="下一页" οnclick="nextImg()"/>
	</body>
</html>

3、定时弹出并隐藏广告

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>定时弹出并隐藏广告</title>
	</head>
	<script>
		function init(){
			bFlag = setInterval("dis_block()",3000);
		}
		function dis_block(){
			document.getElementById("img").style.display="block";
			clearInterval(bFlag);
			nFlag = setInterval("dis_none()",3000);
		}
		function dis_none(){
			document.getElementById("img").style.display="none";
			clearInterval(nFlag);
		}
	</script>
	<body οnlοad="init()">
		<img src="../img/f001a62f-a49d-4a4d-b56f-2b6908a0002c_g.jpg" id="img" style="display: none;"/>
		<img src="../img/1.jpg" />
	</body>
</html>

4、隔行换色

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>隔行换色</title>
	</head>
	<script>
		function init(){
			var tbl = document.getElementById("tbl");
			var len = tbl.tBodies[0].rows.length;
			for (var i = 0;i < len;i ++) {
				if(i%2 == 0){
					tbl.tBodies[0].rows[i].style.background="burlywood";
				}else{
					tbl.tBodies[0].rows[i].style.background="aquamarine";
				}
			}
		}
	</script>
	<body οnlοad="init()">
		<table border="1px" align="center" width="500px" height="300px" cellspacing="0px" id="tbl">
			<thead>
				<tr>
					<th>编号</th>
					<th>姓名</th>
					<th>性别</th>
				</tr>
			</thead>
			<tbody>
				<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>
			</tbody>
		</table>
	</body>
</html>

5、行-高亮显示

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>行-高亮显示</title>
	</head>
	<script>
		function overColor(id,flag){
			if(flag == 'over'){
				document.getElementById(id).style.background="antiquewhite";
			}else{
				document.getElementById(id).style.background="white";
			}
		}
	</script>
	<body>
		<table border="1px" align="center" width="500px" height="300px" cellspacing="0px" id="tbl">
			<thead>
				<tr>
					<th>编号</th>
					<th>姓名</th>
					<th>性别</th>
				</tr>
			</thead>
			<tbody>
				<tr οnmοuseοver="overColor(this.id,'over')" id="tr1" οnmοuseοut="overColor(this.id,'out')">
					<td>1</td>
					<td>张三</td>
					<td>男</td>
				</tr>
				<tr οnmοuseοver="overColor(this.id,'over')" id="tr2" οnmοuseοut="overColor(this.id,'out')">
					<td>2</td>
					<td>李四</td>
					<td>男</td>
				</tr>
				<tr οnmοuseοver="overColor(this.id,'over')" id="tr3" οnmοuseοut="overColor(this.id,'out')">
					<td>3</td>
					<td>王五</td>
					<td>男</td>
				</tr>
				<tr οnmοuseοver="overColor(this.id,'over')" id="tr4" οnmοuseοut="overColor(this.id,'out')">
					<td>4</td>
					<td>刘红</td>
					<td>女</td>
				</tr>
			</tbody>
		</table>
	</body>
</html>

6、全选-全不选

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>全选-全不选</title>
	</head>
	<script>
		function checkAll(){
			var checkAllBtn = document.getElementById("checkAllBtn").checked;
			var checkbtn = document.getElementsByName("checkbtn");
			for (var i = 0;i<checkbtn.length;i++) {
				if(checkAllBtn==true){
					checkbtn[i].checked=true;
				}else{
					checkbtn[i].checked=false;
				}
			}
			
		}
	</script>
	<body>
		<table border="1px" align="center" width="500px" height="300px" cellspacing="0px">
			<thead>
				<tr>
					<th><input type="checkbox" id="checkAllBtn" οnclick="checkAll()"/></th>
					<th>编号</th>
					<th>姓名</th>
					<th>性别</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td><input type="checkbox" name="checkbtn" /></td>
					<td>1</td>
					<td>张三</td>
					<td>男</td>
				</tr>
				<tr>
					<td><input type="checkbox" name="checkbtn" /></td>
					<td>2</td>
					<td>李四</td>
					<td>男</td>
				</tr>
				<tr>
					<td><input type="checkbox" name="checkbtn" /></td>
					<td>3</td>
					<td>王五</td>
					<td>男</td>
				</tr>
				<tr>
					<td><input type="checkbox" name="checkbtn" /></td>
					<td>4</td>
					<td>刘红</td>
					<td>女</td>
				</tr>
			</tbody>
		</table>
	</body>
</html>

7、省市二级联动

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>省市二级联动</title>
	</head>
	<script>
		
		var cities = new Array(5);
		cities[0] = new Array("海淀区","昌平区","朝阳区");
		cities[1] = new Array("黄浦区","卢湾区","长宁区");
		cities[2] = new Array("和平区","河东区","河西区");
		cities[3] = new Array("哈尔滨市","齐齐哈尔市","鸡西市");
		
		function changeCity(val){
			var city = document.getElementById("city");
			city.length=0;
			for (var i=0;i<cities[val].length;i++) {
				var textNode = document.createTextNode(cities[val][i]);
				var Ele = document.createElement("option");
				Ele.appendChild(textNode);
				city.appendChild(Ele);
			}
		}
	</script>
	<body>
		<select οnchange="changeCity(this.value)">
			<option>--请选择--</option>
			<option value="0">北京</option>
			<option value="1">上海</option>
			<option value="2">天津</option>
			<option value="3">黑龙江</option>
		</select>
		<select id="city"></select>
	</body>
</html>

冰零0o
关注
专栏目录
微信小程序中的JavaScript 简明介绍
m0_58859743的博客
07-12 7507
小程序的主要开发语言是 JavaScript ，开发者使用 JavaScript 来开发业务逻辑以及调用小程序的 API 来完成业务需求。 主要介绍JavaScript在小程序中的特点。
JavaScript小程序源码
05-27
JavaScript小程序源码主要涉及到的是使用JavaScript语言开发微信小程序的应用，其中包含了2048小游戏的实现。微信小程序是一种轻量级的应用开发平台，它允许开发者使用JavaScript、WXML（微信小程序标记语言）和WXSS...
javascript小程序
qq_17080419的博客
10-12 293
轮播图的实现 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ margin: 0; padding: 0; } ...
【微信小程序实战教程】之微信小程序中的 JavaScript
最新发布
柯晓楠
08-06 1787
小程序的开发框架被称为MINA框架，其框架结构如图1所示。图1 MINA框架结构通过上面的框架结构图，我们可以看到小程序的MINA框架有三个部分组成，首先是View视图层，其次是App Service逻辑层和Native系统层。小程序中所有的页面都在View视图层中，每个页面由WXML文件和WXSS文件来搭建页面视图的结构和展现样式。App Service逻辑层是由App Service线程来加载、运行的，其生命周期常驻内存。
js的14个小程序
07-15
三级联动，图片背景，弹出对话框，弹出注册登陆窗口。 图片布局，下拉菜单的选择，已及各种控件的应用。
JavaScript开发课程设计校园新闻微信小程序源代码.zip
06-08
JavaScript开发课程设计校园新闻微信小程序源代码，JavaScript开发课程设计校园新闻微信小程序源代码JavaScript开发课程设计校园新闻微信小程序源代码JavaScript开发课程设计校园新闻微信小程序源代码JavaScript开发...
自编JAVASCRIPT小程序.pdf
07-01
JAVASCRIPT小程序开发涉及多个方面的知识点，从标题和描述来看，本文涉及了小程序的开发、运行以及运行平台的选择，并且提到了如何将程序最小化至系统托盘等技术要点。以下将分别详细阐述这些方面的知识点。 首先，...
自编JAVASCRIPT小程序.zip
10-16
在提供的压缩包“自编JAVASCRIPT小程序.zip”中，包含了一个名为“自编JAVASCRIPT小程序.pdf”的文件，这很可能是对一个或多个JavaScript程序的详细解释或教程。 JavaScript的核心知识点包括以下几个方面： 1. **...
javascript第一个小程序
魏小魏
05-12 4247
恶搞小程序 javascript小程序
JS小程序示例
09-25
包含各种基础的JS示例，包括浮动窗口、省市级联、页面传参等各种基础JS功能
javascript小程序 实例
06-23
javascript 实例 javascript小程序 实例
八种常用JavaScript小程序集锦
10-31
JavaScript是一种扩展到HTML的脚本设计语言，它使网页开发者可以更有效地控制页面，并能对用户触发事件作出即时响应，诸如单击鼠标、表单操作等。这些都不需要客户机与服务器的交互通信，既为用户提供了更快速的操作，又减小了服务器端的负担。 JavaScript不能脱离HTML而独立存在，只有在支持JavaScript的浏览器中，它才能作为HTML页面的一部分起作用。只要您发挥想像力，就可以创建各种各样的JavaScript嵌入应用，下面就向大家介绍八种常用的JavaScript脚本程序，别看它们个头小，作用可不小。
javascript简单例子程序
04-30
一些Javascript的例子程序，包括动态显示文字，变色文字，跑马灯，动态时钟，日期时间显示等。
基于JavaScript实现简单的随机抽奖小程序
10-23
为了使抽奖程序能够无需配置平台直接可以在任何一台机器上运行，开发工具和编译运行工具也能够尽可能简单（诸如text文本即可编辑，window系统自带的浏览器即可编译运行的情况），决定尝试使用javascript来做
有趣的JavaScript小程序
aidiao7379的博客
04-06 233
1 <!doctype html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="Generator" content="EditPlus®"> 6 <meta name="Author" con...
一个简单有用的JavaScript CRACK程序的解决技术关键点
赵亮的博客专栏(theforever，碧海情天)
01-20 1450
一个简单有用的JavaScript CRACK程序的解决技术关键点(转载请注明来自“碧海情天－赵亮”的博客 blog.csdn.net/theforever)　　背景：涉及稍微敏感的问题，不便细说来龙，只能详讲去脉。现状就是，有一个外部网站，在其首页里有部分新资源的展示（资源种类暂且也可以抽象化概括），可以通过搜索框或者栏目列表来得到更多或更准确的资源列表，点击资源会出现资源信息页，在信息页里选择观看，才会出现资源的播放显示页。　　现在的问题是：在找到资源列表后，需要打开两个页面才能看到资源。同时，由于这个
简单的JavaScript小程序
07-11
当然，下面是一个简单的JavaScript小程序示例，它会在控制台输出“Hello, World!”： ```javascript console.log("Hello, World!"); ``` 你可以将上述代码保存为一个`.js`文件，然后在浏览器的开发者工具控制台中...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值