通过前面七天的学习，我学习了HTML+CSS的基础知识、JavaScript的基础知识，还做了一些题目（虽然很少吧）现在来做一个题目和知识点的总结
js中严格区分大小写。
js代码可以下载标签onclick属性中，当点击时才执行。在超链接的href属性中也可以添加js代码，同样的，点击时执行。
js的数据类型有六种，其中String，Number，Boolean，Null和Undefined是基本数据类型，Object是引用数据类型。
可以用用typeof来确定并返回字面量的类型。
全局环境（最外层的环境）和局部环境（函数体内的环境），没有块级作用域。访问全局变量时要用window.变量。
引用类型有：Object，Array，Date，RegExp，Function。
题目总结：
涉及到的函数：
getElementById() 方法可返回对拥有指定 ID 的第一个对象的引用。
innerHTML 属性设置或返回元素的 inner HTML。
setInterval() 方法可按照指定的周期（以毫秒计）来调用函数或计算表达式。用该方法可以做定时器。
setInterval() 方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。
在图片自动切换的题目中我的代码如下：
<script>
var n=0;
var timeInterval = 100;
var arr = new Array();
arr[0] = "img/2.png";
arr[1] = "img/3.png";
arr[2] = "img/4.png";
arr[3] = "img/5.png";
arr[4] = "img/6.png";
arr[5] = "img/7.png";
arr[6] = "img/8.png";
arr[7] = "img/9.png";
arr[8] = "img/10.png";
setInterval(changeImg,timeInterval);
function changeImg(){
var myImg=document.getElementById("myImg");
if(n==arr.length-1){
n=0;
}else{
n+=1;
}
myImg.src=arr[n];
}
</script>
为了实现图片切换，我将所有图片的名字都存放到Array数组中，然后通过changImg()方法来进行对数组下标的切换。用setInterval()设置changeImg方法的执行时间。得以实现了图片切换的效果。
下面是实现表单验证的题目的完整代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>注册页面</title>
<style>
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
body {
padding-top: 25px;
}
.rg_center {
float: left;
}
.td_left {
width: 100px;
text-align: right;
height: 45px;
}
.td_right {
padding-left: 50px;
}
#username, #password, #email, #name, #tel, #birthday, #checkcode {
width: 251px;
height: 32px;
border: 1px solid #A6A6A6;
/*设置边框圆角*/
border-radius: 5px;
padding-left: 10px;
}
#checkcode {
width: 110px;
}
#img_check {
height: 32px;
vertical-align: middle;
}
#sunbtn {
padding-left: 150px;
}
</style>
</head>
<body>
<div class="rg_layout">
<div class="rg_form">
<!--定义表单 form-->
<form method="get" id="form1">
<table>
<tr>
<td class="td_left"><label for="username">用户名</label></td>
<td class="td_right">
<input type="text" name="username" id="username" placeholder="请输入用户名">
<span id="user_name"></span>
</td>
</tr>
<tr>
<td class="td_left"><label for="password">密码</label></td>
<td class="td_right">
<input type="password" name="password" id="password" placeholder="请输入密码">
<span id="password_1"></span>
</td>
</tr>
<tr>
<td class="td_left"><label for="email">Email</label></td>
<td class="td_right">
<input type="email" name="email" id="email" placeholder="请输入邮箱">
<span id="email_1"></span>
</td>
</tr>
<tr>
<td class="td_left"><label for="tel">手机号</label></td>
<td class="td_right">
<input type="text" name="tel" id="tel" placeholder="请输入手机号">
<span id="tel_1"></span>
</td>
</tr>
<tr>
<td class="td_left"><label>性别</label></td>
<td class="td_right">
<input type="radio" name="gender" value="male" checked> 男
<input type="radio" name="gender" value="female"> 女
</td>
</tr>
<tr>
<td colspan="2" id="sunbtn"><input type="submit" id="btn_sub" value="注册"></td>
</tr>
</table>
</form>
</div>
</div>
<script>
window.onload = function () {
document.getElementById("username").onblur = checkUsername;
document.getElementById("password").onblur = checkPassword;
document.getElementById("email").onblur = checkEmail;
document.getElementById("tel").onblur = checkTel;
document.getElementById("form1").onsubmit = function () {
return checkUsername() && checkPassword() && checkEmail() && checkTel();
}
};
//校验username
function checkUsername() {
var username = document.getElementById("username").value;
var reg = /^\w{3,12}$/;//^表示以什么开始（起始符），\w表示字母、数字、下划线，$是结束符
var flag = reg.test(username);
var user_name = document.getElementById("user_name");
if (flag){
user_name.innerHTML = "<img height='25' width='35' src='img/gou.png' />"
}else {
user_name.innerHTML = "<font color='red'>用户名格式不正确</font>"
}
return flag;
};
//校验password
function checkPassword(){
var password = document.getElementById("password").value;
var reg = /^\w{3,12}$/;
var flag = reg.test(password);
var pass_word = document.getElementById("password_1");
if (flag){
pass_word.innerHTML = "<img height='25' width='35' src='img/gou.png' />"
}else {
pass_word.innerHTML = "<font color='red'>密码格式不正确</font>"
}
return flag;
};
//校验email
function checkEmail(){
var email = document.getElementById("email").value;
var reg = /^\w{3,13}@\w{1,3}.\w{2,3}$/;
var flag = reg.test(email);
var email_1 = document.getElementById("email_1");
if (flag){
email_1.innerHTML = "<img height='25' width='35' src='img/gou.png' />"
}else {
email_1.innerHTML = "<font color='red'>邮箱格式不正确</font>"
}
return flag;
};
//校验手机号
function checkTel(){
var tel = document.getElementById("tel").value;
var reg = /^1[3456789]\d{9}$/;
var flag = reg.test(tel);
var tel_1 = document.getElementById("tel_1");
if (flag){
tel_1.innerHTML = "<img height='25' width='35' src='img/gou.png' />"
}else {
tel_1.innerHTML = "<font color='red'>手机号格式不正确</font>"
}
return flag;
};
</script>
</body>
</html>
主要看script标签中的代码，通过读取每一项的Id来获取用户在表单中输入的信息，并能实现动态验证。变量reg中的/^表示以什么开始（起始符），\w表示字母、数字、下划线，$是结束符。
1167
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
