注册页面代码注解 ：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>注册页面</title>
<style>
body{
background: url("../img/register_bg.png")no-repeat;
}
.wai{
border: 7px #EEEEEE solid;
width: 900px;
height: 600px;
margin: auto;
margin-top: 75px;
background: white;
}
.first{
width:22%;
/*border: 1px solid red;*/
font-size: 20px;
margin-left: 18px;
margin-top: 13px;
float: left;
}
p{
color: orange;
margin: auto;
}
table{
width: 50%;
/*border: 1px solid red;*/
float: left;
margin-top: 28px;
margin-left:30px;
}
input[type]{
border:1px grey solid;
width: 190px;
height: 30px;
margin-top: 5px;
}
input[type="radio"]{
width: 17px;
}
#yan{
width:30%;
}
.last{
width: 20%;
/*border: 1px red solid;*/
float:right;
margin-top: 10px;
}
.erro{
color:red;
}
#td_sub{
padding-left: 150px;
}
</style>
</head>
<script>
window.onload=function () {
//1.给表单标签绑定事件，onsubmit 事件 是什么事件？
document.getElementById("form").onsubmit=function () {
//调用用户校验方法 chekUserName，调用密码校验方法chekPassWord。
//返回chekUserName ,chekPassWord.
//return chekuername && chekpassword;
return chekusername()&& chekpassword();
}
}
//校验用户名
function chekusername(){
//1.定义一个方法（函数）获取用户名的值
var username = document.getElementById("username").value;
//2.定义正则表达式,以单词字符开头，以单词字符结尾
var regusername = /^\w{6,12}$/;
//3.使用正则表达式来判断username的值是否符合规则
var flag = regusername.test(username);
//4.提示信息
var susername = document.getElementById("susername");
if(flag){
//1.提示对号图片
susername.innerHTML= "<img width='35' height='25' src='../img/gou.png' />"
}else{
//2.提示红色错误信息
susername.innerHTML= "格式不正确请重新输入"
}
return flag;
}
//校验密码
function chekpassword(){
//1.定义一个方法（函数）获取用户名的值
var password = document.getElementById("password").value
//2.定义正则表达式,以单词字符开头，以单词字符结尾
var regpassword = /^\w{6,12}$/;
//3.使用正则表达式来判断password的值是否符合规则
var flag = regpassword.test(password);
//4.提示信息
var spassword = document.getElementById("spassword");
if(flag){
//1.提示对号图片
spassword.innerHTML= "<img width='35' height='25' src='../img/gou.png' />"
}else{
//2.提示红色错误信息
spassword.innerHTML= "格式不正确请重新输入"
}
return flag;
}
</script>
<body>
<div class="wai">
<div class="first"> <p> 新用户注册 </p> <p><font color="#808080"> USER REGISTER</font> </p> </div>
<form action="#" id="form" method="get">
<table align="center">
<tr>
<td>
用户名：
</td>
<td>
<input type="text" name="uername" id="username" placeholder="请输入账号">
<!--加了一个id名称用来获取span 以及class样式，输入错误时候显示的内容-->
<span id="susername" class="erro"></span>
</td>
</tr>
<tr>
<td>
密码：
</td>
<td>
<input type="password" name="password" id="password" placeholder="请输入密码">
<!--加了一个id名称用来获取span 以及class样式，输入错误时候显示的内容-->
<span id="spassword" class="erro"></span>
</td>
</tr>
<tr>
<td>
Email：
</td>
<td>
<input type="text" name="email" placeholder="请输入邮箱">
</td>
</tr>
<tr>
<td>
姓名：
</td>
<td>
<input type="text" name="name" placeholder="请输入姓名">
</td>
</tr>
<tr>
<td>
手机号：
</td>
<td>
<input type="text" name="number" placeholder="请输入账号">
</td>
</tr>
<tr>
<td>
性别：
</td>
<td>
<input type="radio"name="gender" value="男">男
<input type="radio"name="gender" value="女">女
</td>
</tr>
<tr>
<td>
出生日期：
</td>
<td>
<input type="date">
</td>
</tr>
<tr>
<td>
验证码：
</td>
<td>
<input id="yan" type="text">
<img src="../img/verify_code.jpg" height="40" width="131">
</td>
</tr>
<tr>
<td id="td_sub" colspan="2">
<input type="submit" value="注册">
</td>
</tr>
</table>
</form>
<div class="last">
已有账号？ <a href="#"><font color="#ff1493">立即登陆</font></a>
</div>
</div>
</body>
</html>
轮播图 笔记代码注解：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>轮播图</title>
</head>
<style>
body{
background-image: url("img/banner_2.jpg");
}
</style>
<body id="img3">
<img id="img" src="img/banner_3.jpg" width="100%">
<!--<img id="img2" src="img/banner_2.jpg" width="100%">-->
<!--<img src="img/banner_1.jpg" width="100%">-->
<script>
// 分析：
// 1.在页面上使用img标签展示图片
// 2.定义一个方法，修改图片对象的链接/src属性
// 3.定义一个定时器，每隔3秒调用方法一次。
//
// 修改src属性
var num = 1;
function fun(){
//num++；让num循环起来 到4以上时改为1 1~3就循环起来了，加上重复定时器
num++;
//判断num 是否大于3
if(num>3){
num=1;
}
//获取img对象
var img = document.getElementById("img");
img.src="img/banner_"+num+".jpg";
}
function fun2() {
num++;
if(num>3){
num=1;
}
var img3 = document.getElementById("img3");
img3.src="img/banner_"+num+".jpg"
}
window 是JS 中的顶级对象
setInterval(fun,1000);
var h1= history;
alert(h1);
</script>
</body>
</html>
定时器的两种写法（代码）：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
第二类：
<input type="button" id="openwindow" value="打开新窗口" >
<input type="button" id="closewindow" value="关闭新窗口" >
定时器：
区别/用法
setTimeout（）：在指定的毫秒数
参数：
1.JS代码或者方法对象
2.毫秒值
clearTimeout（）：停止倒计时
setInterval（）：按照指定的周期，
clearInterval（）：清空周期性定时器
<script>
var win = document.getElementById("openwindow");
var win2 = document.getElementById("closewindow");
win.onclick=function(){
open("https://www.baidu.com");
}
var newwindow;
win2.onclick=function(){
newwindow=close("https://www.baidu.com");
}
一次性定时器,有返回值 编号
var d = setTimeout(fun,2000);
取消定时器
clearTimeout(d);
function fun() {
alert("bong");
}
循环定时器 ,返回值返回的唯一标识用来取消 重复定时器fun方法的引用（对象）
fun()先执行方法,不管其他的内容. fun;咱理解为当作参数使用,被一个操作执行之后 发生事情.
setInterval(fun2,1000);
//clearInterval(d);
function fun2() {
alert("bong");
}
</script>
</body>
</html>
|
|
收藏
淘帖
踩
