900字范文 > 经典案例重点案例：点名表 JS正则验证全选全不选反选点击可以实现三个功能轮

经典案例重点案例：点名表 JS正则验证全选全不选反选点击可以实现三个功能轮

时间：2021-03-04 22:34:50

重点案例：

点击开始点名，框内的名字转动

点击结束点名，框内的转动停止，并出现一个随机的学生姓名

<!DOCTYPE html>

<html>

<head>

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

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技术实现全选/全不选

在表格下方增加三个按钮：全选、全不选、反选，点击可以实现三个功能

题目三：实现轮播图

小伙伴们，掌握了JavaScript的语法、流程控制语句、内置对象以及DOM和BOM的知识，运用所学知识完成如下图所示的交互效果——轮播图

网页整体要求：要求页面整洁、美观，与提供的页面效果图、结构保持一致，文字和背景的颜色不统一要求要求HTML代码、CSS代码、JavaScript代码书写、命名符合规范，在代码中添加必要的注释网页文件夹管理，图片、样式表、脚本等资料独立文件夹样式具体要求：网页分为以下两个部分：切换项标题和切换项内容高度和宽度固定，内容在页面居中显示字体及颜色表：网页字体： Microsoft YaHei网页颜色：选项卡文字在垂直和水平方向均是居中显示，文字大小是22px脚本要求：（15分）图片每1秒钟切换1次当鼠标停留在整个切换页上时，图片不进行轮播当点击切换页的选项上时，出现该选项的对应图片

<!DOCTYPE html>

<html>

* {

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>

</a>

</a>

</a>

</a>

</div>

</a>

</a>

</a>

</a>

</div>

</body>

</html>

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>

<title>解析邮箱的用户名和域名</title>

</head>

<body>

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>

</head>

<body>

</body>

</html>

var input = prompt("请输入手机号码：");

for (var i=0;i<7;i++)

{

input=input.replace(input[i],"*");

}

document.write("电话号码为：",input);

</script>

题目五：上个月第二周周考真题

图一（4399小游戏官网注册）

图二（图片切换

图三（全选&取消全选）

<!doctype html>

<html>

<head>

* {

padding: 0;

margin: 0 auto;

}

</style>

</head>

<body>

<p>

</div>

</div>

</div>

</div>

</div>

</div>

</body>

</html>

$(".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分）

经典案例重点案例：点名表 JS正则验证全选全不选反选点击可以实现三个功能轮播图字符串截取以及替换图片切换

本内容不代表本网观点和政治立场，如有侵犯你的权益请联系我们处理。

网友评论

网友评论仅供其表达个人看法，并不表明网站立场。