web实验三

最新推荐文章于 2024-07-24 23:00:08 发布

于鱼123

最新推荐文章于 2024-07-24 23:00:08 发布

阅读量234

点赞数

文章标签：前端 javascript css

本文链接：https://blog.csdn.net/m0_61530475/article/details/130326454

版权

一、实验目标

本实验目标为，掌握JavaScript的基本用法、调试、页面元素操作以及页面数据验证的验证。支撑专业核心能力的培养。

二、实验要求

掌握JavaScript的编写要求
熟悉应用浏览器进行脚本调试
JavaScript对DOM对象的操作

三、实验内容

CSS内联样式、嵌入样式、外部样式定义与使用；

通用选择器、类型选择器、类选择器、Id选择器的使用；

Css盒子模型样式；

Div+css布局；

四、主要仪器设备

硬件： PC电脑

软件： Visual Studio Code/WebStorm/HBuilder

五、考核方式及要求

提交实验报告、源代码

六、实验内容和步骤

1、修改实验2布局，在注册按钮上方增加一个异常信息区域（将样式置为隐藏display: none），在发送验证码链接位置处增加一个验证码输入框（将样式置为隐藏display: none）；异常区域和验证码输入框布局的设计在“网页设计图.jpg”中。

(1) 通过CSS默认隐藏元素直接为元素添加一个隐藏的样式即可

(2) 通过JavaScript代码隐藏/显示元素（原理：通过JavaScript修改元素的display行内样式）

隐藏元素：document.getElementById("元素ID").style.display="none";

显示元素：document.getElementById("元素ID").style.display="block";

2、规范文本框类型：用户框（type="text"），手机号框（type="tel"），密码框（type="password"），验证码框（type="number"）

更多HTML5文本框类型参见：HTML 5 <input> type 属性

3、编写源生JavaScript代码，实现以下功能：

(1) 点击“发送验证码”链接后（onClick事件），执行验证，如果验证通过，则隐藏链接并显示验证码输入框（本应先通过AJAX向服务器提交手机号申请发送短信，待服务器成功接到请求后再显示验证码输入框，这里将此AJAX过程省略掉）；如果验证不通过，则在异常信息区域显示错误信息；

(2) 点击“注册”按钮后（onClick事件），执行验证，如果验证未通过则显示异常信息区域，并显示错误信息，如果全部信息验证通过，则弹出对话框“已提交注册信息”；

(3) 文本框或密码框有文本改动后（onChange事件），检查是否有异常信息区域，有则隐藏；

(4) 手机号文本框有文本改动后（onChange事件），检查是否有验证码输入框，有则还原为“发送验证码”链接。

表1 异常信息表

动作	条件	异常信息
点击注册	用户名为空	用户名不能为空
	手机号为空	手机号不能为空
	手机号不符合规则（正则表达式验证）	手机号不正确
	密码为空	密码不能为空
	确认密码为空	确认密码不能为空
	密码和确认密码不相等	两次输入密码不一致
	验证码为空	验证码不能为空
	验证码不等于123456	验证码不正确
点击发送验证码	手机号为空	手机号不能为空
点击发送验证码	手机号不符合规则（正则表达式验证）	手机号不正确

4、注意：文本框和密码框中，文字的颜色为黑色，设计图中显示的是默认的占位符的颜色，将文本框的placeholder属性值设置为图中的文字即可看到效果。

七、布局强化练习（选做）

新增网页news.html，仿造实验2中的设计方式，按照设计图“网页设计图_列表页.jpg”设计一个新闻列表页面，具体的新闻标题和新闻图片记录在了文件“新闻列表.txt”中。

注册完成后，跳转到news.html即可，跳转的代码为：

window.location.href="news.html"

要求：

按设计图设计网页，且新闻条目可以上下滑动查看；
参考文档“使用手机调试前端网页.docx”，在手机上显示网页。

代码

<!DOCTYPE html>

<head>

function setRootFontSize(){

var rootHtml = document.documentElement;

var rem = rootHtml.clientWidth / (1080 / 100); //1080为设计图px宽度

rootHtml.style.fontSize = rem + "px";

}

setRootFontSize(); //网页首次载入时执行一次

window.addEventListener("resize", setRootFontSize, false); //网页大小改变时执行

window.addEventListener("orientationchange", setRootFontSize, false); //横屏切换时执行

</script>

</head>

<body>

</div>

<li>

<div class="l1_content">天价锂矿争夺大戏落幕！宁德时代截胡成功，豪掷超60亿控股斯S诺威矿业</div>

</li>

<li>

<div class="l2_content">茅台再上新，惊蛰节气酒发布！夏系列也在酝酿中……</div>

</li>

<li>

<div class="l3_content">超300万人围观！张兰淘宝首秀赢“麻”了？</div>

</li>

<li>

<div class="l4_content">开发供应链、收购美工厂，富士康紧锣密鼓拓展电动车业务</div>

</li>

<li>

<div class="l5_content">成本攀升、增长乏力，低价白酒老村长，会走上高端涨价之路吗？</div>

</li>

<li>

<div class="l6_content">A股女大佬，你只知道董明珠？316个女董事长14个90后，最小才24岁</div>

</li>

<li>

<div class="l7_content">数字经济概念满屏飘红！怎么布局？</div>

</li>

<li>

<div class="l8_content">中国金融监管体系大变革！机构改革六大举措释放了什么信号</div>

</li>

<li>

<div class="l9_content">百亿补贴终燃“战火”：京东补贴遭拼多多狙击，阿里承压？</div>

</li>

<li>

<div class="l10_content">21万汽车降价9万！“史上最强补贴”来袭？这一车企强势涨停！影响有多大</div>

</li>

</ul>

</div>

</div>

</div>

</body>

</html>

css文件

body{

margin: 0rem;

background-color: #f0f0f0;

}

#top{

background-color: #e66c06;

height: 1.31rem;

}

.top_left{

height: 1.31rem;

width: 1.48rem;

background-size: 1.17rem 0.98rem;

background-repeat: no-repeat;

background-position: 0.34rem 0.15rem;

float: left;

/* background-color: black; */

}

.top_right1{

width: 1.05rem;

height: 1.31rem;

background-size: .55rem .55rem;

background-repeat: no-repeat;

float: right;

/* background-color: black; */

background-position: 0rem 0.36rem;

}

.top_right2{

width:.55rem;

height: 1.31rem;

background-size: 0.55rem 0.55rem;

background-repeat: no-repeat;

/* background-color: blue; */

float: right;

background-position: 0rem 0.36rem;

padding-right: .27rem;

}

.top_center{

height:1.31rem;

margin: 0rem 1.86rem 0rem 1.48rem;

}

#find{

height: .67rem;

width: 5.71rem;

margin: .28rem .49rem .36rem .41rem;

font-size: .29rem;

line-height: .29rem;

vertical-align: middle;

border-radius:.5rem;

border: 0;

outline: none;

padding-left: .76rem;

background-size: .37rem .37rem;

background-repeat: no-repeat;

background-position: .21rem .16rem;

}

#content ul{

margin: 0rem;

background-color: #f0f0f0;

}

#content ul li{

height: 1.94rem;

margin: .15rem .15rem .22rem .15rem;

/* background-color: aqua; */

clear: both;

background-color: #FFFFFF;

border-radius: .5rem;

}

.picture1,.picture2,.picture3,.picture4,.picture5,.picture6,.picture7,.picture8,.picture9,.picture10{

width: 2.24rem;

height: 1.50rem;

float: right;

padding: .22rem .22rem .22rem .60rem;

}

.l1_content,.l2_content,.l3_content,.l4_content,.l5_content,.l6_content,.l7_content,.l8_content,.l9_content,.l10_content{

font-size: .35rem;

padding-top: .32rem;

padding-left: .30rem;

margin-right: 2.46rem;

color: #222222;

}

.l1_bottom_left,.l2_bottom_left,.l3_bottom_left,.l4_bottom_left,.l5_bottom_left,.l6_bottom_left,.l7_bottom_left,.l8_bottom_left,.l9_bottom_left,.l10_bottom_left{

font-size: .30rem;

padding: .21rem 0rem .34rem .32rem;

color: #6e6e6e;

float: left;

}

.l1_bottom_right,.l2_bottom_right,.l3_bottom_right,.l4_bottom_right,.l5_bottom_right,.l6_bottom_right,.l7_bottom_right,.l8_bottom_right,.l9_bottom_right,.l10_bottom_right{

font-size: .30rem;

padding: .21rem 0rem .34rem 0rem;

/* margin-right: 2.46rem; */

float: right;

color: #6e6e6e;

}

#bottom{

width: 100%;

background-color: #e66c06;

position: fixed;

bottom: 0rem;

margin: 0rem;

clear: both;

}

.bottom_left{

height: 1.46rem;

float: left;

background-color: #ffffff;

width: 1.19rem;

margin: 0rem 0rem .2rem .28rem;

}

.picture{

position: relative;

width: 0.64rem;

padding: .17rem .29rem .5rem .26rem;

}

.bottom_left p{

position: absolute;

font-size: .32rem;

color: #e66c06;

top: .64rem;

left: .52rem;

}

.bottom_right{

height: 1.46rem;

width: 1.26rem;

background-size: .64rem .64rem;

background-repeat: no-repeat;

float: right;

background-position: .0rem .17rem;

}

.bottom_right p{

height: .32rem;

font-size: .32rem;

line-height: .32rem;

color: #ffffff;

padding: 1.0rem 0rem .27rem 0rem;

margin: 0rem;

}

于鱼123

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
web实验三

2023年03月08日 01:02</div><div class="l2_bottom_right">2023年03月07日 00:02</div><div class="l3_bottom_right">2023年03月07日 00:02</div><div class="l4_bottom_right">2023年03月07日 06:38
复制链接

扫一扫