<!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>