HTML：它是整个网站的骨架
CSS：它是对整个网站骨架的内容进行美化
JavaScript：它能够让整个页面具有动态效果
js：运行在客户端的脚本语言
ECMAScript:它是整个JavaScript的核心，包含基本语法、变量、关键字、保留字、数据类型、
语句、函数等等。
DOM：文档对象模型，包含整个html页面的内容
BOM：浏览器对象模型，包含整个浏览器相关的内容
1、ECMAScript：
1、变量：只能用var定义；
2、数据类型：原始数据类型（undefined / null / string / number / boolean）；
3、函数：有命名称，匿名.
2、BOM对象：
window : alert() , prompt() , confirm() , setInterval() , clearInterval() , setTimeout() , clearTimeout() ;
history : go(参数) , back() , foward() ;
location : herf属性.
3、事件：
onfocus() 元素获得焦点；
onblur() 元素失去焦点；
onload() 某个页面或图像被完成加载，此事件只能写一次并且放到body标签中；
onsubmit() 提交按钮被点击，此事件写在form标签中，必须有返回值；
onclick() 鼠标点击某个对象；
ondblclick() 鼠标双击某个图像；
onmouseover() 鼠标被移到某元素之上；
onmouseout() 鼠标从某个元素移开；
onchange() 当用户改变这个内容的时候使用（二级联动）;
获取元素：
doucument.getElementById ( "id" );
获取元素里面的值：
document.getElementById ( "id" ).value;
向页面输出：
弹窗：alert();
像浏览器中写入内容：document.write (内容);
向页面指定位置写入内容：innerHMTM
对文本框和按钮添加事件：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,intial-scale=1">
<title>注册网页</title>
<style type="text/css">
body {
width: 1200px;
height: 1200px;
margin: 0 auto;
border: 1px solid lightsalmon;
background-color: azure;
}
.dd1 {
height: 60px;
border: 1px solid pink;
float: left;
/*设置向左浮动*/
}
.dd2 {
width: 1200px;
height: 60px;
background-color: black;
border: 1px solid palevioletred;
}
table tr {
height: 10px;
}
a {
text-decoration: none;
}
/* 清除浮动 */
#clear {
clear: both;
}
</style>
<script>
/*校验输入信息不能为空*/
function checkForm(){
/*用户名*/
var uname = document.getElementById("username").value;
if(uname == ""){
alert("用户名不能为空");
return false;
}
/*密码*/
var upass = document.getElementById("password").value;
if(upass == ""){
alert("密码不能为空");
return false;
}
/*确认密码*/
var urepass = document.getElementById("repassword").value;
if(urepass != upass){
alert("两次密码不一致！");
return false;
}
/*Email*/
var uemail = document.getElementById("email").value;
if(uemail == ""){
alert("邮箱不能为空");
return false;
}
/*姓名*/
var uname = document.getElementById("name").value;
if(uname == ""){
alert("姓名不能为空");
return false;
}
/*出生日期*/
var udate = document.getElementById("date").value;
if(udate == ""){
alert("出生日期不能为空");
return false;
}
/*验证码*/
var ucheck = document.getElementById("checkcode").value;
if(ucheck == ""){
alert("验证码不能为空");
return false;
}
}
</script>
</head>
<body>
<!--第一层-->
<div>
<div class="dd1">
<img src="tb1.png" width="398px" height="60px" />
</div>
<div class="dd1">
<img src="tb2.png" width="398px" height="60px" />
</div>
<div class="dd1">
<img src="tb3.png" width="398px" height="60px" />
</div>
</div>
<!-- 清除浮动 -->
<div id="clear"></div>
<!--第二层-->
<div class="dd2">
<p>
<a href="#"><font color="white" size="5px"> 首页 </font></a>
<a href="#"><font color="white" size="3px">手机数码</font></a>
<a href="#"><font color="white" size="3px">电脑办公</font></a>
<a href="#"><font color="white" size="3px">鞋靴箱包</font></a>
<a href="#"><font color="white" size="3px">家用电器</font></a>
</p>
</div>
<!--第三层-->
<div >
<br /><br/>
<form action="#" method="get" name="regform" onsubmit="return checkForm()">
<table border="1px" align="center" cellspacing="0px" cellpadding="0px" width="700px" height="500px">
<tr>
<td colspan="2">会员注册 USER REGISTER</td>
</tr>
<tr>
<td>用户名</td>
<td><input type="text" id="username" name="username" /></td>
</tr>
<tr>
<td>密码</td>
<td>
<input type="password" id="password" name="password"/>
</td>
</tr>
<tr>
<td>确认密码</td>
<td>
<input type="password" id="repassword" name="repassword"/>
</td>
</tr>
<tr>
<td>Email</td>
<td>
<input type="email" id="email" name="email"/>
</td>
</tr>
<tr>
<td>姓名</td>
<td>
<input type="text" id="name" name="name"/>
</td>
</tr>
<tr>
<td>性别</td>
<td>
<input type="radio" value="男" name="sex" checked="checked"/>男
<input type="radio" value="女" name="sex"/>女
</td>
</tr>
<tr>
<td>出生日期</td>
<td>
<input type="text" id="date" name="date"/>
</td>
</tr>
<tr>
<td>验证码</td>
<td>
<input type="text" id="checkcode" name="checkcode">
<img src="4.jpg" height="35px" width="80px"/>
</td>
</tr>
<tr>
<td colspan="2" align="center">
<input type="reset" value="重置" />
<input type="submit" value="注册"/>
</td>
</tr>
</table>
</form>
</div>
</body>
</html>效果：
图片的切换：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>切换图片</title>
<style>
div {
border: 1px solid black;
width: 500px;
height: 350px;
margin: auto;
text-align: center;
}
</style>
<script>
var i=1;
function changeImg(){
i++;
// 获取图片位置并设置src属性
document.getElementById("img1").src="tbb"+i+".jpg";
if(i==3){ //如果到最后一张了，就返回到第一张
i=0;
}
}
</script>
</head>
<body>
<div>
<input type="button" value="下一张" onclick="changeImg()"/>
<img src="tbb1.jpg" width="100%" height="100%" id="img1"/>
</div>
</body>
</html>图片轮播：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>切换图片</title>
<style>
div {
border: 1px solid black;
width: 500px;
height: 350px;
margin: auto;
text-align: center;
}
</style>
<script>
function init() {
setInterval("changeImg()",2000); //设置轮播图显示的定时操作
}
var i=0;
function changeImg() {
i++;
document.getElementById("img1").src="tbb"+i+".jpg";
if(i==3){
i=0;
}
}
</script>
</head>
<body onload="init()">
<div>
<img src="tbb1.jpg" width="100%" height="100%" id="img1"/>
</div>
</body>
</html>效果：
改进用户注册页面：
鼠标放在输入框上提示输入的提示信息，输入完毕自动校验，如果输入为空也会在输入框后面提示
效果：
实现：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,intial-scale=1">
<title>注册网页</title>
<style type="text/css">
body {
width: 1200px;
height: 1200px;
margin: 0 auto;
border: 1px solid lightsalmon;
background-color: azure;
}
.dd1 {
height: 60px;
border: 1px solid pink;
float: left;
/*设置向左浮动*/
}
.dd2 {
width: 1200px;
height: 60px;
background-color: black;
border: 1px solid palevioletred;
}
table tr {
height: 10px;
}
a {
text-decoration: none;
}
/* 清除浮动 */
#clear {
clear: both;
}
</style>
<!-- <script>
/*校验输入信息不能为空*/
function checkForm(){
/*用户名*/
var uname = document.getElementById("username").value;
if(uname == ""){
alert("用户名不能为空");
return false;
}
/*密码*/
var upass = document.getElementById("password").value;
if(upass == ""){
alert("密码不能为空");
return false;
}
/*确认密码*/
var urepass = document.getElementById("repassword").value;
if(urepass != upass){
alert("两次密码不一致！");
return false;
}
/*Email*/
var uemail = document.getElementById("email").value;
if(uemail == ""){
alert("邮箱不能为空");
return false;
}
/*姓名*/
var uname = document.getElementById("name").value;
if(uname == ""){
alert("姓名不能为空");
return false;
}
/*出生日期*/
var udate = document.getElementById("date").value;
if(udate == ""){
alert("出生日期不能为空");
return false;
}
/*验证码*/
var ucheck = document.getElementById("checkcode").value;
if(ucheck == ""){
alert("验证码不能为空");
return false;
}
}
</script> -->
<script>
//当光标放到输入框上显示提示信息
function showTips(id,info) {
document.getElementById(id+"span").innerHTML="<font color='gray'>"+info+"</font>";
}
//校验信息
function check(id,info) {
//先获取输入框的内容
var uvalue = document.getElementById(id).value;
//进行校验
if(uvalue == ""){
document.getElementById(id+"span").innerHTML="<font color='red'>"+info+"</font>";
}else {
document.getElementById(id+"span").innerHTML="";
}
}
</script>
</head>
<body>
<!--第一层-->
<div>
<div class="dd1">
<img src="tb1.png" width="398px" height="60px" />
</div>
<div class="dd1">
<img src="tb2.png" width="398px" height="60px" />
</div>
<div class="dd1">
<img src="tb3.png" width="398px" height="60px" />
</div>
</div>
<!-- 清除浮动 -->
<div id="clear"></div>
<!--第二层-->
<div class="dd2">
<p>
<a href="#"><font color="white" size="5px"> 首页 </font></a>
<a href="#"><font color="white" size="3px">手机数码</font></a>
<a href="#"><font color="white" size="3px">电脑办公</font></a>
<a href="#"><font color="white" size="3px">鞋靴箱包</font></a>
<a href="#"><font color="white" size="3px">家用电器</font></a>
</p>
</div>
<!--第三层-->
<div >
<br /><br/>
<form action="#" method="get" name="regform" onsubmit="return checkForm()">
<table border="1px" align="center" cellspacing="0px" cellpadding="0px" width="700px" height="500px">
<tr>
<td colspan="2">会员注册 USER REGISTER</td>
</tr>
<tr>
<td><font color="red"> * </font>用户名</td>
<td>
<input type="text" id="username" name="username"
onfocus="showTips('username','用户名必填！')"
onblur="check('username','用户名不能为空!')"/>
<span id="usernamespan"></span>
</td>
</tr>
<tr>
<td><font color="red"> * </font>密码</td>
<td>
<input type="password" id="password" name="password"
onfocus="showTips('password','密码必填！') "
onblur="check('password','密码不能为空！')"/>
<span id="passwordspan"></span>
</td>
</tr>
<tr>
<td><font color="red"> * </font>确认密码</td>
<td>
<input type="password" id="repassword" name="repassword"
onfocus="showTips('repassword','确认密码必填！')"
onblur="check('repassword','确认密码不能为空!')"/>
<span id="repasswordspan"></span>
</td>
</tr>
<tr>
<td><font color="grey"> * </font>Email</td>
<td>
<input type="email" id="email" name="email"/>
</td>
</tr>
<tr>
<td><font color="red"> * </font>姓名</td>
<td>
<input type="text" id="name" name="name"
onfocus="showTips('name','姓名必填！')"
onblur="check('name','姓名不能为空')"/>
<span id="namespan"></span>
</td>
</tr>
<tr>
<td><font color="red"> * </font>性别</td>
<td>
<input type="radio" value="男" name="sex" checked="checked"/>男
<input type="radio" value="女" name="sex"/>女
</td>
</tr>
<tr>
<td><font color="grey"> * </font>出生日期</td>
<td>
<input type="text" id="date" name="date"/>
</td>
</tr>
<tr>
<td><font color="red"> * </font>验证码</td>
<td>
<input type="text" id="checkcode" name="checkcode"
onfocus="showTips('checkcode','验证码必填')"
onblur="check('checkcode','验证码不能为空')">
<img src="4.jpg" height="35px" width="80px"/>
<span id="checkcodespan"></span>
</td>
</tr>
<tr>
<td colspan="2" align="center">
<input type="reset" value="重置" />
<input type="submit" value="注册"/>
</td>
</tr>
</table>
</form>
</div>
</body>
</html>
5380
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
