2018.7.6 js实现点击事件---点击小图出现大图---时间定时器----注册表单验证

时间：2023-01-22 13:45:32


<!DOCTYPE html>

<html lang="zh">

	<head>

		<meta charset="UTF-8" />

		<meta name="viewport" content="width=device-width, initial-scale=1.0" />

		<meta http-equiv="X-UA-Compatible" content="ie=edge" />

		<title>js页面加载</title>

		<script type="text/javascript">

			function f1() {

				var a = document.getElementById('user').value;

				alert(a);

			}

			//页面加载

			window.onload = function() {

				var a = document.getElementById('user').value;

				alert(a);

			}

			//多个函数的页面加载

			function f2() {

				alert("f2函数");

			}

			function f3() {

				alert("f3函数");

			}

			function f4() {

				alert("f4函数");

			}

			window.onload = function() {

				f2(),

					f3(),

					f4()

			}

			//实现3秒自动跳转

			function reflush() {

				var s = document.getElementById('s');

				//如何获取开始标签与结束标签的内容

				var num = s.innerHTML; //这个是string类型

				//转换类型

				num = parseInt(num);

				if(num > 0) {

					num--;

					//改变页面中数字的内容

					s.innerHTML = num;

				} else {

					//跳转

					location.href = "http://www.baidu.com";

					//停止定时器的执行

					clearInterval(interval);

				}

			}

			//系统函数

			//作用：每隔X时间，执行一次（循环执行）

			//第一个参数  存入要执行的函数

			//第二个参数   指定时间（毫秒）

			var interval = setInterval('reflush()', 1000);

			//时间定时器

			//作用是在指定时间后执行函数，只执行一次

			function timeo() {

				var now = new Date();

				var y = now.getFullYear();

				var m = now.getMonth() + 1;

				var d = now.getDate();

				var h = now.getHours();

				var mi = now.getMinutes();

				if(mi < 10) {

					mi = "0" + mi;

				}

				var ms = now.getSeconds();

				//alert(typeof ms);//数字类型

				if(ms < 10) {

					ms = "0" + ms;

				}

				var date = document.getElementById('dat');

				date.innerHTML = y + "年" + m + "月" + d + "日" + h + "时" + mi + "分" + ms + "秒";

			}

			//开始

			var interval;

			function start() {

				interval = setInterval('timeo()', 1000);

			}

			//结束

			function stop() {

				clearInterval(interval);

			}

			//鼠标移动

			function move() {

				var img1Obj = document.getElementById('img1');

				img1Obj.style.border = "1px solid red";

			}

			//鼠标移除

			function out() {

				var img1Obj = document.getElementById('img1');

				img1Obj.style.border = "0px";

			}

			//鼠标移动  传入对象

			function move(img1Obj, img_src) {

				//var img1Obj = document.getElementById('img1');

				img1Obj.style.border = "11px solid red";

				var other = document.getElementById('other');

				other.src = "img/" + img_src;

			}

			//鼠标移除   传入对象

			function out(img1Obj) {

				//var img1Obj = document.getElementById('img1');

				img1Obj.style.border = "13px solid blue";

			}

			//鼠标移动事件

			function imgMove(obj) {

				obj.style.border = "2px solid red";

				var big = document.getElementById('big');

				var id = obj.id;

				//alert(typeof id)

				switch(id) {

					case 'img1':

						big.src = "img/show1_big.jpg";

						break;

					case 'img2':

						big.src = "img/show2_big.jpg";

						break;

					case 'img3':

						big.src = "img/show3_big.jpg";

						break;

					case 'img4':

						big.src = "img/show4_big.jpg";

						break;

					case 'img5':

						big.src = "img/show5_big.jpg";

						break;

					default:

						break;

				}

			}

			//鼠标移除

			function imgOut(obj) {

				obj.style.border = "0px";

				//document.getElementById('o').style.display="none";

			}

			//键盘事件

			/*document.onkeydown = function(event) {

				//alert(event.keyCode);

				if(event.keyCode == 13) {

					//提交表单

					document.forms[0].submit();

				}

			}*/

			document.onkeydown = function(event){

				if(event.keyCode == 13) {

					//提交表单

					var flag = validate();

					if(flag!=false){

						document.forms[1].submit();

					}

				}

			}

			//表单的验证

			function validate() {

				//获取用户名

				var username = document.getElementById('username');

				//获取密码

				var pwd = document.getElementById('pwd');

				//获取确认密码

				var repwd = document.getElementById('repwd');

				//获取学历

				var study = document.getElementById('study');

				//获取年龄

				var age = document.getElementById('age');

				//获取备注

				var remark = document.getElementById('remark');

				//验证用户名不能为空

				if('' == username.value || null == username.value || '' == username.value.trim()) {

					//alert('用户名不能为空');

					var info = document.getElementById('use');

					info.innerHTML ="<font color='#F80851'>用户名不能为空</font>";

					username.focus();

					return false;

				}

				if('' == pwd.value || null == pwd.value || '' == pwd.value.trim()) {

					//alert('密码不能为空');

					var p = document.getElementById('use1');

					p.innerHTML = "密码不能为空";

					pwd.focus();

					return false;

				}

				if('' == repwd.value || null == repwd.value || '' == repwd.value.trim()) {

					//alert('确认密码不能为空');

					var p = document.getElementById('user');

					p.innerHTML = "确认密码不能为空";

					repwd.focus();

					return false;

				}

//				if(!(pwd.value.trim().equals(repwd.value.trim()))){

//					alert('密码与确认密码不一致');

//					return false;

//				}

				var sex = document.getElementsByName(sex);

				var n = 0;

				for(var i in sex){

					if(false == sex[i].checked) {

						n++;

				}

				}

				if (n == 2){

					alert('选择性别');

						return false;

				}

				if(selected.value == 0) {

					//alert('学历不能为空');

					var edu = document.getElementById('use3');

					edu.innerHTML = "学历不能为空";

					selected.focus();

					return false;

				}

				if('' == age.value || null == age.value || '' == age.value.trim()) {

					alert('年龄不能为空');

					age.focus();

					return false;

				}

				if('' == remark.value || null == remark.value || '' == remark.value.trim()) {

					alert('备注不能为空');

					remark.focus();

					return false;

				}

			}

			function n(){

				var u = document.getElementById('usename');

				if(u.value !=null){

					var c = document.getElementById('use');

					c.innerHTML ="aa";

				}

			}

		</script>

		<style type="text/css">

			button {

				border: none;

				outline: none;

				font-size: 17px;

				border-radius: 20px;

			}

			ul li {

				display: inline;

			}

			input {

				border-radius: 20px;

				outline: none;

				size: 3px;

			}

		</style>

	</head>

	<body>

		<input type="text" name="user" id="user" value="" />

		<br/>

		<input type="button" name="sub" id="sub" onclick="f1()" value="提交" />

		<br/>

		<span id="s" style="color: red; font-size: 20px;">10000</span>秒后自动跳转

		<hr />

		<!---->

		<h2>时间定时器</h2> 当前系统时间：

		<p id="dat" style="color: red; font-size: 30px;">

			<!--<span id="year"></span>年

		<span id="m"></span>月

		<span id="d"></span>日

		<span id="h"></span>时

		<span id="mi"></span>分

		<span id="ms"></span>秒-->

		</p>

		<button id="start" onclick="start()">开始</button><br /><br />

		<button id="stop" onclick="stop()">结束</button>

		<hr />

		<h2>鼠标滑动</h2>

		<div id="">

			<img src="img/alert_red.png" id="other" />

		</div>

		<div class="img">

			<img src="img/alert_blue.png" onmousemove="move(this,'alert_red.png')" onmouseout="out(this)" />

			<img src="img/alert_green.png" />

		</div>

		<p>结束</p>

		<hr />

		<h2>鼠标放在小图上显示大图片</h2>

		<div>

			<img src="img/show1_big.jpg" id="big" />

		</div>

		<div class="buy">

			<ul>

				<li>

					<img src="img/show1.jpg" id="img1" onmousemove="imgMove(this)" onmouseout="imgOut(this)" />

				</li>

				<li>

					<img src="img/show2.jpg" id="img2" onmousemove="imgMove(this)" onmouseout="imgOut(this)" />

				</li>

				<li>

					<img src="img/show3.jpg" id="img3" onmousemove="imgMove(this)" onmouseout="imgOut(this)" />

				</li>

				<li>

					<img src="img/show4.jpg" id="img4" onmousemove="imgMove(this)" onmouseout="imgOut(this)" />

				</li>

				<li>

					<img src="img/show5.jpg" id="img5" onmousemove="imgMove(this)" onmouseout="imgOut(this)" />

				</li>

			</ul>

		</div>

		<hr />

		<h2>键盘事件</h2>

		<div>

			<h2>按回车提交表单</h2>

			<form action="https://y.qq.com" method="post">

				用户名：<input type="text" name="uname" id="uname" value="" />

				<br /> 密&nbsp;&nbsp;&nbsp;&nbsp;码:

				<input type="password" name="upwd"   id="upwd" value="" />

				<br />

				<input type="submit" id="" name="" value="Submit" />

				<br />

				<input type="reset" value="reset" />

			</form>

		</div>

		<hr />

		<h2>表单验证</h2>

		<div align="center">

			<h1>用户注册信息</h1>

			<form action="https://www.baidu.com" method="get">

				<table align="center" border="2px" cellspacing="0" cellpadding="">

				<tr align="center">

					<td>用户名</td>

					<td>

						<input type="text" name="username" onblur="n()" id="username" value="" />

					</td>

					<td>

						<span id="use">

						</span>

					</td>

				</tr>

				<tr align="center">

					<td>密码</td>

					<td>

						<input type="password" onblur="if(this.value==''){this.value='我是默认值'}" name="pwd" id="pwd" value="" />

					</td>

					<td>

						<span id="use1">

						</span>

					</td>

				</tr>

				<tr align="center">

					<td>确认密码</td>

					<td><input type="password" name="repwd" id="repwd" value="" /></td>

					<td><span id="user">

					</span></td>

				</tr>

				<tr align="center">

					<td>年龄</td>

					<td>

						<input type="text" name="age" id="age" value="" />

					</td>

					<td>

						<span id="use2">

						</span>

					</td>

				</tr>

				<tr align="center">

					<td>性别</td>

					<td>

						<input type="radio" name="sex" id="sex" value="" />男

						<input type="radio" name="sex" id="sex" value="" />女

					</td>

				</tr>

				<tr>

					<td>学历</td>

					<td>

						<select name="study" id="selected">

							<option value="0">请选择</option>

							<option value="1">本科</option>

							<option value="2">专科</option>

							<option value="3">初中</option>

						</select>

					</td>

				</tr>

				<tr align="center">

					<td >备注</td>

					<td><textarea name="remark" id="remark" rows="15" cols="30"></textarea></td>

				</tr>

				<tr align="center">

					<td colspan="2"><input type="submit" id="submit" name="" value="注册" onclick="return validate()"/>

					<input type="reset" name="reset" id="" value="取消" /></td>

				<td>

						<span id="use3">

						</span>

					</td>

				</tr>

			</table>

			</form>

		</div>

	</body>

</html>

2018.7.6 js实现点击事件---点击小图出现大图---时间定时器----注册表单验证的更多相关文章

  1. 模拟js中注册表单验证

    示例1 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8 ...

  2. ajax和servlet交互，表单日历插件，表单验证，form&period;js

    我的index.jsp <body> <a>点我获取数据</a> <table border=1px> <tr> <td>ID& ...

  3. JS简单表单验证

    这里我是写了一个简单的注册表单验证功能,亲测有效,一起来看看吧! 首先我的HTML代码是这样的: class大家可以忽略一下,这里我项目使用的是bootstrap的样式. 输入用户名和密码用的是正则表 ...

  4. JS判定注册表单的几个方式 及 Ajax进行用户名存在判定

    最近感觉不赶紧把代码逻辑记一下梳理一下,再做的时候就容易进入"逻辑误区". 有个表单,简单点. <!DOCTYPE html> <!-- 注册表单验证,用户名格式 ...

  5. JS组件系列——Form表单验证神器： BootstrapValidator

    前言:做Web开发的我们,表单验证是再常见不过的需求了.友好的错误提示能增加用户体验.博主搜索bootstrap表单验证,搜到的结果大部分都是文中的主题:bootstrapvalidator.今天就来 ...

  6. bootstrapValidator&period;js，最好用的bootstrap表单验证插件

    前言:做Web开发的我们,表单验证是再常见不过的需求了.友好的错误提示能增加用户体验.博主搜索bootstrap表单验证,搜到的结果大部分都是文中的主题:bootstrapvalidator.今天就来 ...

  7. js函数、表单验证

    惊天bug!!!在script里面只要有一点点错误,就都不执行了!!!所以每写一个方法,就跑一下,因为这个书写疏忽导致的bug不可估量!!! [笑哭,所以我才这么讨厌js么,后来真心的是一点都不想再看 ...

  8. Js表单验证控件-02 Ajax验证

    在<Js表单验证控件(使用方便,无需编码)-01使用说明>中,写了Verify.js验证控件的基本用法,基本可以满足大多数验证需求,如果涉及服务端的验证,则可以通过Ajax. Ajax验证 ...

  9. 自制&OpenCurlyDoubleQuote;低奢内”CSS3注册表单，包含JS验证哦。请别嫌弃&comma;好吗？。

    要求 必备知识 基本了解CSS语法,初步了解CSS3语法知识.和JS/JQuery基本语法. 开发环境 Adobe Dreamweaver CS6 演示地址 演示地址 预览截图(抬抬你的鼠标就可以看到 ...

随机推荐

  1. ABP使用及框架解析系列 - &lbrack;Unit of Work part&period;1-概念及使用&rsqb;

    前言 ABP ABP是“ASP.NET Boilerplate Project”的简称. ABP的官方网站:http://www.aspnetboilerplate.com ABP在Github上的开 ...

  2. JAVA - 多线程的同步

    多线程的同步 1. 锁对象. 应用场景:当某个数据可能被其他线程修改时,给涉及到数据的方法上锁,保证同一时刻只有拥有这个锁的线程能访问该数据,其他要调用这个方法的线程被阻塞.注意:必须是不同线程访问同 ...

  3. unity3d从入门到精通要掌握什么内容

    Unity3d就业方向广.游戏行业占据了65%的比例,也有虚拟现实,增强现实等方向,就业前景火爆.可以从事的岗位:游戏开发工程师.移动应用开发工程师.游戏场景设计师.游戏特效设计师.VR开发工程师.A ...

  4. 软件开发者路线图梗概&amp&semi;书摘chapter2

    空杯心态:放下对技能水平的自鸣得意 1.入门语言:学习一门语言,从实际问题入手→形成反馈回路 构建学习沙箱 利用实际代码,进行学习测试 学习一门语言:与精通该语言的专家一起工作,即找人指导 阅读他人的 ...

  5. Git神器使用相关

    感谢 感谢作者的网站,本文所有的知识可以在上述网站了解到,讲的非常详细,感谢.(https://www.liaoxuefeng.com/wiki/0013739516305929606dd183612 ...

  6. python3用BeautifulSoup用limit来获取指定数量的a标签

    # -*- coding:utf-8 -*- #python 2.7 #XiaoDeng #http://tieba.baidu.com/p/2460150866 #标签操作 from bs4 imp ...

  7. WIN10系统如何关闭用户账户控制

    在底部搜索框中输入UAC,打开用户账户控制设置   更改为从不通知即可

  8. Python【OS】模块

    import osprint(os.getcwd())#取当前工作目录#os.chmod("day6-os模块.py",2)#给文件/目录加权限,对Windows的下面不好使(1. ...

  9. Delphi Code Editor 之 几个特性&lpar;转）

    Delphi Code Editor有几个特性在编写大规模代码时非常有用.下面分别进行介绍: 原地址:http://www.cnblogs.com/pchmonster/category/343330 ...

  10. 可跨平台C&plus;&plus;开源图形图像框架&colon;openFrameworks

    博客参考:https://www.hahack.com/codes/openframeworks-intro/#%E4%BB%80%E4%B9%88%E6%98%AF-openframeworks 和 ...

相关文章