2018.7.6 js实现点击事件---点击小图出现大图---时间定时器----注册表单验证
<!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 /> 密 码:
<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实现点击事件---点击小图出现大图---时间定时器----注册表单验证的更多相关文章
- 模拟js中注册表单验证
示例1 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8 ...
- ajax和servlet交互，表单日历插件，表单验证，form.js
我的index.jsp <body> <a>点我获取数据</a> <table border=1px> <tr> <td>ID& ...
- JS简单表单验证
这里我是写了一个简单的注册表单验证功能,亲测有效,一起来看看吧! 首先我的HTML代码是这样的: class大家可以忽略一下,这里我项目使用的是bootstrap的样式. 输入用户名和密码用的是正则表 ...
- JS判定注册表单的几个方式 及 Ajax进行用户名存在判定
最近感觉不赶紧把代码逻辑记一下梳理一下,再做的时候就容易进入"逻辑误区". 有个表单,简单点. <!DOCTYPE html> <!-- 注册表单验证,用户名格式 ...
- JS组件系列——Form表单验证神器： BootstrapValidator
前言:做Web开发的我们,表单验证是再常见不过的需求了.友好的错误提示能增加用户体验.博主搜索bootstrap表单验证,搜到的结果大部分都是文中的主题:bootstrapvalidator.今天就来 ...
- bootstrapValidator.js，最好用的bootstrap表单验证插件
前言:做Web开发的我们,表单验证是再常见不过的需求了.友好的错误提示能增加用户体验.博主搜索bootstrap表单验证,搜到的结果大部分都是文中的主题:bootstrapvalidator.今天就来 ...
- js函数、表单验证
惊天bug!!!在script里面只要有一点点错误,就都不执行了!!!所以每写一个方法,就跑一下,因为这个书写疏忽导致的bug不可估量!!! [笑哭,所以我才这么讨厌js么,后来真心的是一点都不想再看 ...
- Js表单验证控件-02 Ajax验证
在<Js表单验证控件(使用方便,无需编码)-01使用说明>中,写了Verify.js验证控件的基本用法,基本可以满足大多数验证需求,如果涉及服务端的验证,则可以通过Ajax. Ajax验证 ...
- 自制“低奢内”CSS3注册表单，包含JS验证哦。请别嫌弃,好吗？。
要求 必备知识 基本了解CSS语法,初步了解CSS3语法知识.和JS/JQuery基本语法. 开发环境 Adobe Dreamweaver CS6 演示地址 演示地址 预览截图(抬抬你的鼠标就可以看到 ...
随机推荐
- vue中组件传值方式汇总
在应用复杂时,推荐使用vue官网推荐的vuex,以下讨论简单SPA中的组件间传值. 一.路由传值 路由对象如下图所示: 在跳转页面的时候,在js代码中的操作如下,在标签中使用<router-li ...
- Vue.js-----轻量高效的MVVM框架（十一、使用slot分发内容）
#单个slot html: <h3>#单个slot</h3> <!-- 定义child01模板 --> <template id="child01& ...
- 关系型数据库---MySQL---事务
1.概述 1.1 事务:在对业务相关的一系列数据进行操作时,需要保证数据操作的完整性(要么全部成功.要么全部失败): 1.2 MySQL中支持事务的存储引擎是:Innodb: 1.3 事务用来管理in ...
- Linux文件操作常用选项
常用选项 选项 功能 -a 查看隐藏文件 -l 列表方式查看 -h 人性化显示 * 通配符,忽略多个字符匹配 ? 通配符,忽略一个字符匹配 [Num1-Num2] 通配符,查看从Num1到Num2的匹 ...
- Ubuntu14.04-PXE搭建
什么是PXE? PXE(Pre-boot Execution Environment,预启动执行环境)是由Intel公司开发的最新技术,工作于Client/Server的网络模式,支持工作站通过网络从 ...
- php高级教程
PHP - 多维数组 多维数组指的是包含一个或多个数组的数组. 注释:数组的维度指示您需要选择元素的索引数. 对于二维数组,您需要两个索引来选取元素 对于三维数组,您需要三个索引来选取元素 PHP - ...
- Qt 串口连接
Qt 串口连接 使用 Qt 开发上位机程序时,经常需要用到串口,在 Qt 中访问串口比较简单,因为 Qt 已经提供了 QSerialPort 和 QSerialPortInfo 这两个类用于访问串口. ...
- Access 2010入门、语文
Access2010入门 数据管理库是按照数据结构来组织,存储和管理数据的仓库. 最早出现的数据库是网状DBMS 1970年,EFCodd博士提出关系模型的概念,提出关系模型的理论基础. SQL语言功 ...
- [Java][Liferay] 解决在Linux系统中liferay-ext项目无法卸载的问题
今天遇到liferay-ext无法卸载,log中显示卸载了,但是在App Manager中依然可以看到安装过的ext,其中一个原因是webapps下面的**-ext文件夹的权限只有root才能修改,将 ...
- centos系统安装mysql
方式一. 通过yum install mysql-server安装mysql服务器.chkconfig mysqld on设置开机启动,并service mysqld start启动mysql服务,并 ...