重点案例：
点击开始点名，框内的名字转动
点击结束点名，框内的转动停止，并出现一个随机的学生姓名
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
#name{
width: 300px;
height: 200px;
text-align: center;
line-height: 200px;
color: #FF0000;
font-weight: bold;
font-size: 40px;
border: 3px solid red;
}
</style>
</head>
<body>
<h2>上海全栈开发学院1910班点名表</h2>
<div id="name"></div>
<input type="button" id="begin" value="开始">
<input type="button" id="finish" value="结束">
<script src="js/jQuery.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
var timer=null;
$('#begin').click(function(){
var studentInfo=['张燕','张三','李四','王五','马云','马化腾','雷军']
timer=setInterval(function(){
var x = Math.floor(Math.random() * 1000 % studentInfo.length);
var str=studentInfo[x];
$('#name').html(str);
},500);
});
$('#finish').click(function(){
clearInterval(timer)
})
</script>
</body>
</html>
题目一：用JS正则验证以下表单数据的有效性
注意：在表单中增加一个真实姓名的文本框，验证2-3位汉字
题目二：用JS实现全选/全不选
（表格）
（点击最上面的复选框实现全选，取消的话就是全不选）
使用所学的JS技术实现全选/全不选
在表格下方增加三个按钮：全选、全不选、反选，点击可以实现三个功能
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <title></title> | |
| <style type="text/css"> | |
| th { | |
| background-color: cornflowerblue; | |
| } | |
| tr { | |
| text-align: center; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <table border="1" width="300px"> | |
| <tr> | |
| <th><input type="checkbox"></th> | |
| <th>菜名</th> | |
| <th>饭店</th> | |
| </tr> | |
| <tr> | |
| <td><input type="checkbox"></td> | |
| <td>红烧肉</td> | |
| <td>家里蹲</td> | |
| </tr> | |
| <tr> | |
| <td><input type="checkbox"></td> | |
| <td>西红柿鸡蛋</td> | |
| <td>家里蹲</td> | |
| </tr> | |
| <tr> | |
| <td><input type="checkbox"></td> | |
| <td>红烧狮子头</td> | |
| <td>家里蹲</td> | |
| </tr> | |
| <tr> | |
| <td><input type="checkbox"></td> | |
| <td>日式肥牛</td> | |
| <td>家里蹲</td> | |
| </tr> | |
| </table> | |
| <input type="button" value="全选" id="quanxuan"> | |
| <input type="button" value="取消全选" id="but"> | |
| <input type="button" value="取反" id="but4"> | |
| <script>document.write('<script src="//' + (location.host || 'localhost').split(':')[0] + ':35929/livereload.js?snipver=1"></' + 'script>')</script><script>document.addEventListener('LiveReloadDisconnect', function() { setTimeout(function() { window.location.reload(); }, 500); })</script></body> | |
| </html> | |
| <script src="js/jQuery.js" type="text/javascript" charset="utf-8"></script> | |
| <script type="text/javascript"> | |
| $('#but').click(function() { | |
| var ck = $('input') | |
| for (var i = 0; i < ck.length; i++) { | |
| ck[i].checked = false; | |
| } | |
| }) | |
| $('#but4').click(function() { | |
| var ss = document.getElementsByTagName('input'); | |
| for (var i = 0; i < ss.length; i++) { | |
| if (ss[i].checked == true) { | |
| ss[i].checked = false; | |
| } else { | |
| ss[i].checked = true; | |
| } | |
| } | |
| }); | |
| $('#quanxuan').click(function() { | |
| var ck = $('input') | |
| for (var i = 0; i < ck.length; i++) { | |
| ck[i].checked = true; | |
| } | |
| }) | |
| </script> | |
题目三：实现轮播图
小伙伴们，掌握了JavaScript的语法、流程控制语句、内置对象以及DOM和BOM的知识，运用所学知识完成如下图所示的交互效果——轮播图
-
- 网页整体要求：
- 要求页面整洁、美观，与提供的页面效果图、结构保持一致，文字和背景的颜色不统一要求
- 要求HTML代码、CSS代码、JavaScript代码书写、命名符合规范，在代码中添加必要的注释
- 网页文件夹管理，图片、样式表、脚本等资料独立文件夹
- 样式具体要求：
- 网页分为以下两个部分：切换项标题和切换项内容
- 高度和宽度固定，内容在页面居中显示
- 字体及颜色表：
- 网页字体： Microsoft YaHei
- 网页颜色：
- 选项卡文字在垂直和水平方向均是居中显示，文字大小是22px
- 脚本要求：（15分）
- 图片每1秒钟切换1次
- 当鼠标停留在整个切换页上时，图片不进行轮播
- 当点击切换页的选项上时，出现该选项的对应图片
<!DOCTYPE html>
<html>
<head lang="zh-CN">
<meta charset="UTF-8">
<title>6-2 作业题</title>
<script type="text/javascript" src="./js/6-2.js"></script>
<link rel="stylesheet" href="./css/6-2.css" type="text/css" />
<style type="text/css">
* {
margin: 0;
padding: 0;
font-size: 22px;
font-family: "Microsoft YaHei"serif;
}
#main {
width: 1200px;
height: auto;
margin: 20px auto;
}
/* 文字部分 */
.font-div {
width: 100%;
height: 46px;
}
.font-div a div {
float: left;
width: 25%;
height: 46px;
box-sizing: border-box;
text-align: center;
line-height: 46px;
color: #666;
}
.change {
font-weight: bold;
border: 1px solid #ffcc00;
border-radius: 0.5em;
background: #ffcc00;
}
/* 图片部分 */
.pic-div{
width:100%;
height:460px;
background-color:green;
}
.pic{
width:100%;
height:100%;
display:none;
}
.active{
display:block;
}
.pic1{
background: url(images/天天_03.jpg) repeat fixed center;
}
.pic2{
background: url(images/天天_07.jpg) repeat fixed center;
}
.pic3{
background: url(images/天天_22.jpg) repeat fixed center;
}
.pic4{
background:url(images/天天_22.jpg) no-repeat;
}
</style>
</head>
<body>
<div id="main">
<!-- 文字部分 -->
<div id="font-div" class="font-div">
<a href="#">
<div class="font change">首页</div>
</a>
<a href="#">
<div class="font">点击看看</div>
</a>
<a href="#">
<div class="font">会自动的</div>
</a>
<a href="#">
<div class="font">我的网站</div>
</a>
</div>
<!-- 轮播图片 -->
<div id="pic-div" class="pic-div">
<a href="#">
<div class="pic pic1 active"></div>
</a>
<a href="#">
<div class="pic pic2"></div>
</a>
<a href="#">
<div class="pic pic3"></div>
</a>
<a href="#">
<div class="pic pic4"></div>
</a>
</div>
</div>
</body>
</html>
<script src="js/jQuery.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
window.onload = function() {
function byId(id) {
return typeof(id) === "string" ? document.getElementById(id) : id;
}
// 定义图片元素集合
var pics = document.getElementsByClassName("pic"),
len = pics.length,
index = 0,
timer = null,
main = byId("main");
// 定义文字元素集合
var fonts = document.getElementsByClassName("font");
//图片切换，以index值为切入点
function picChange() {
for (var i = 0; i < len; i++) {
pics[i].style.display = "none";
}
pics[index].style.display = "block";
}
// 文字切换
function fontChange() {
for (var i = 0; i < len; i++) {
fonts[i].className = "font";
}
fonts[index].className = "font change";
}
// 图片、文字自动切换
function auto() {
timer = setInterval(function() {
index++;
if (index >= len) {
index = 0;
}
picChange();
fontChange()
}, 1000)
}
main.onmouseover = function() {
if (timer) {
clearInterval(timer);
}
}
main.onmouseout = function() {
auto();
}
// 鼠标点击文字变色，图片更换
for (var i = 0; i < len; i++) {
fonts[i].setAttribute("data_index", i);
fonts[i].onclick = function() {
index = this.getAttribute("data_index");
picChange();
for (var j = 0; j < len; j++) {
fonts[j].className = "font";
}
this.className = "font change";
}
}
auto();
}
</script>
题目四：练习字符串截取以及替换
用户输入登录的邮箱，对邮箱进行解析，解析出邮箱的用户名和邮箱的域名，效果如下图所示：
-
- 第一步：页面弹出输入框，提示用户输入登录邮箱
- 第二步：对用户输入的邮箱进行分析，现获取到登录邮箱最前面的名字，再获取到邮箱最后面的域名
- 第三步：得到之后将结果显示在页面上
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>解析邮箱的用户名和域名</title>
</head>
<body>
<script>
var a=prompt("请输入登录邮箱");
var b=a.indexOf("@");
var c=a.lastIndexOf(".");
document.write("邮箱的用户名是："+a.substring(0,b)+"<br/>");
document.write("登录的邮箱域名是："+a.substring(b+1,c)+"邮箱");
</script>
</body>
</html>
小伙伴们，我们学习了字符串的replace方法，根据效果图，来完成代码！ 要求：当用户在弹出的输入框中输入手机号码后，将手机号码的前7位转化为*号
效果图如下：
-
- 第一步：页面弹出输入框，使用户输入手机号
- 第二步：对用户的手机号码进行转换，将号码的前7位数字替换成7个”*”号，并输出在页面上
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
</body>
</html>
<script type="text/javascript">
var input = prompt("请输入手机号码：");
for (var i=0;i<7;i++)
{
input=input.replace(input[i],"*");
}
document.write("电话号码为：",input);
</script>
题目五：上个月第二周周考真题
图一（4399小游戏官网注册）
图二（图片切换
图三（全选&取消全选）
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
* {
padding: 0;
margin: 0 auto;
}
</style>
</head>
<body>
<p>
<div style="width: 500px;height: 350px;border: 2px solid #000000;">
<div style="width: 500px;height: 300px;float: left;border-bottom: 1px solid #000000;float: left;">
<img src="images/天天_03.jpg" alt="" style="width: 100%;height: 100%;" id="image">
</div>
<div style="height:50px">
<div style="width: 20%;float: left;height: 100%;">
<img src="images/天天_07.jpg" alt="" style="width:100%;height:100%" class="danji">
</div>
<div style="width: 20%;float: left;height: 100%;">
<img src="images/天天_09.jpg" alt="" style="width:100%;height:100%" class="danji">
</div>
<div style="width: 20%;float: left;height: 100%;">
<img src="images/天天_12.jpg" alt="" style="width:100%;height:100%" class="danji">
</div>
<div style="width: 20%;float: left;height: 100%;">
<img src="images/天天_14.jpg" alt="" style="width:100%;height:100%" class="danji">
</div>
<div style="width: 20%;float: left;height: 100%;">
<img src="images/天天_19.jpg" alt="" style="width:100%;height:100%" class="danji">
</div>
</div>
</div>
</div>
</body>
</html>
<script src="js/jQuery.js"></script>
<script>
$(".danji").click(function() {
var src = $(this).attr('src')
$("#image").attr("src", src);
})
$("#right").click(function() {
var image = $("#image").attr('src')
var data1 = [];
$(".danji").each(function() {
data1.push($(this).attr('src'));
});
if (right != '') {
$("#image").attr('src', you)
} else {
$()
}
})
</script>
案例一：4399小游戏账号注册（70分）
生活中当我们想成为某些网站的用户时，需要注册来完成此需求，在注册时涉及到信息合法性验证的问题，即用户名，密码，手机号，邮箱等信息，不能是用户任意输入的内容，而是要经过一定的规则校验，符合规则可以注册，不符合则注册不通过，下面请使用本周所学的JS正则以及JS基础知识来完成4399用户注册页面中所需的功能点，具体需求如下
- 实现表单页面布局及样式美化，表单元素之外的内容可忽略不计（5分）
- 实现用户名内容校验（10分）
- 对用户名文本框绑定对应事件，要求在该文本框失去焦点时，触发内容验证（2分）
- 每次失焦时都能正确获取到用户输入的信息（3分）
- 对用户输入的用户名信息进行检测，要求：3-20位字符，由数字，字母下划线组成（2分）
- 对检测的结果进行展示，正确在用户名文本框后显示√，错误显示‘3-20位字符，由数字，字母下划线组成‘（3分）
- 实现密码&确认密码内容校验（15分）
- 对密码文本框绑定对应事件，要求在该文本框失去焦点时，触发内容验证（2分）
- 每次失焦时都能正确获取到用户输入的信息（3分）
- 对用户输入的密码信息进行检测，要求：必须以字母开头，6-20位任意字符（2分）
- 对检测的结果进行展示，正确在密码文本框后显示√，错误显示‘必须以字母开头，6-20位任意字符’（3分）
- 确认密码文本框绑定对应事件，要求在该文本框失去焦点时，触发内容验证（2分）
- 验证确认密码和密码是否一致（2分）
- 对检测的结果进行展示，正确在确认密码文本框后显示√，错误显示‘密码和确认密码保持一致‘（1分）
- 实现QQ号内容校验（10分）
- 对QQ号所在的文本框绑定对应事件，要求在该文本框失去焦点时，触发内容验证（2分）
- 每次失焦时正确获取用户输入的信息（3分）
- 对用户输入的QQ号进行检测，要求：5-11位存数字，不能是0开头（2分）
- 对检测的结果进行展示，正确在QQ号文本框后显示√，错误显示‘5-11位存数字，不能是0开头‘（3分）
- 实现姓名内容校验（10分）
- 对姓名所在的文本框绑定对应事件，要求在该文本框失去焦点时，触发内容验证（2分）
- 每次失焦时正确获取用户输入的信息（3分）
- 对用户输入的姓名进行检测，要求：2-8位汉字（2分）
- 对检测的结果进行展示，正确在姓名文本框后显示√，错误显示‘2-8位汉字‘（3分）
- 实现身份证内容校验（10分）
- 对身份证所在的文本框绑定对应事件，要求在该文本框失去焦点时，触发内容验证（2分）
- 每次失焦时正确获取用户输入的信息（3分）
- 对用户输入的身份证号进行检测，要求：身份证号(15位、18位数字)，最后一位是校验位，可能为数字或字符X（2分）
- 对检测的结果进行展示，正确在身份证文本框后显示√，错误显示‘请输入正确格式‘（3分）
- 实现提交功能（10分）
- 提交按钮绑定对应事件，用于表单提交前的检测（2分）
- 以上所有文本内容验证均通过，则可以提交至success.html页面（3分）
- success.html页面键入内容为：表单数据检测通过！（5分）
案例二：图片切换（15分）
我们在浏览电商类网站商品详情时，会见到如图二效果，下方是该商品的系列图（小图），上方是该小图的对应大图显示，点击对应的小图片，大图片也可以跟随改变，供查阅信息体验度更好，在百度上进行搜索图片时，也有此功能的出现，现在请使用所学过的JS或者JQ完成该功能，具体需求如下
- 展示如图二所示的页面布局及样式，只需要实现大图以及下方列表下图区域内容布局即可，无关元素可忽略（5分）
- 元素绑定事件（5分）
- 选中下方小图区域中的每个元素（1分）
- 搭建循环体，用于绑定事件（2分）
- 每个元素绑定点击事件（2分）
- 实现小图切换，大图跟随切换效果（5分）
案例三：全选&取消全选操作（15分）
- 展示如图三所示的页面布局及样式，只需要实现全选按钮及各个复选框和数据内容展示即可，无关元素可忽略（5分）
- 全选&取消全选（10分）
- 全选按钮绑定事件（2分）
- 点击全选，执行全选功能，且文案内容改为取消全选（4分）
- 点击取消全选，执行取消全选功能，且文案内容改为全选（4分）
673
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
