实验目的
- 掌握JavaScript的编写要求
- 熟悉应用浏览器进行脚本调试
- JavaScript对DOM对象的操作
实验内容
- 应用JavaScript编写留言的功能,在文本中输入文字提交后,在下方进行显示。
提示:可将下方内容以列表体现,提交时动态创建列表的项。可使用以下两种方式之一的方法
1)使用CreateElenment动态创建li标签及li中的文本
2)在列表标签ul或者ol对象上设置InnerHtml列表对象
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>实验3-1</title>
<link rel="stylesheet" href="Ex3-css1.css">
</head>
<body>
<div>
<textarea id="texts" cols="60" rows="10"></textarea>
<input type="button" id="btn" value="提交" onclick="myClick()" >
<ul id="ull"></ul>
</div>
<script language="javascript">
function myClick(){
var text=document.getElementById("texts").value;
var newNode1=document.createElement("li");
var newText1=document.createTextNode(text);
newNode1.appendChild(newText1);
document.getElementById("ull").appendChild(newNode1);
};
</script>
</body>
</html>
CSS:
*{
margin: 0px;
padding: 0px;
}
div{
width: 500px;
height: auto;
margin: 0 auto;
}
textarea{
width: 500px;
margin: 100px 0px auto;
}
input{
margin: 0px;
width: 100px;
float: right;
}
ul{
margin-top: 50px;
list-style-type: none;
}
li{
padding-top: 10px;
padding-bottom: 10px;
border-bottom: 1px solid black;
width: 500px;
text-indent: 20px;
}
- 设计一个选项卡功能,当鼠标移动至某一选项卡时出现切换。
提示:
1)选项卡可采用三个行内元素,为选中背景色#000,选中背景色#aaa
2)选项卡内容可采用三个不同列表
3)针对选项卡和选项内容定义两组不同样式。选项卡未选中背景色#000,选中背景色#aaa;文本颜色#fff;;选项内容未选中不显示display:none,选中显示display:block。
4)通过JavaScript动态设置样式,页面对象.classname=“class样式选择器”
如mydiv. className = “selectSpanStyle”
5)鼠标移至选项卡设置onmouseenter事件
如:mySpan.onmouseenter = function(){
…………
}
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>实验3-2</title>
<link rel="stylesheet" href="Ex3-css2.css">
</head>
<body>
<div>
<span id="sp1" onmouseover="show(1)">热门排行</span>
<span id="sp2" onmouseover="show(2)">美图速递</span>
<span id="sp3" onmouseover="show(3)">前沿科技</span>
<ul id="news1">
<li>热门排行1</li>
<li>热门排行2</li>
<li>热门排行3</li>
<li>热门排行4</li>
</ul>
<ul id="news2">
<li>美图速递1</li>
<li>美图速递2</li>
<li>美图速递3</li>
<li>美图速递4</li>
</ul>
<ul id="news3">
<li>前沿科技1</li>
<li>前沿科技2</li>
<li>前沿科技3</li>
<li>前沿科技4</li>
</ul>
</div>
<script>
function show(num){
var news1=document.getElementById("news1");
var news2=document.getElementById("news2");
var news3=document.getElementById("news3");
if(num==1){
news1.style.display="block";
news2.style.display="none";
news3.style.display="none";
}
else if(num==2){
news1.style.display="none";
news2.style.display="block";
news3.style.display="none";
}
else if(num==3){
news1.style.display="none";
news2.style.display="none";
news3.style.display="block";
}
}
</script>
</body>
</html>
CSS:
*{
margin: 0px;
padding: 0px;
}
div{
width: 450px;
margin: 150px auto;
}
span{
float: left;
text-align: center;
width: 150px;
background: #000;
color: #fff;
}
span:hover{
background: #aaa;
}
ul{
list-style-type: none;
}
li{
text-indent: 20px;
border-bottom: 0.5px dashed gray;
line-height: 30px;
}
- 设计如下表单,并进行数据验证。
提示:
1)输入元素取值可通过var name =document.getElementsById(“元素id”).value;
2)判断长度name.length
3)是否英文字符开头
4)首字母是大小写字符,获取输入的字符对应的编码
var keycode=name.charCodeAt(0);
if(keycode <65||( keycode >90&& keycode <97)|| keycode >122){
不是英文字符
}
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>实验3-3</title>
<link rel="stylesheet" href="Ex3-css3.css">
</head>
<body>
<form class="form">
<div class="div1">注册</div>
<div class="div2">
<input id="username" type="text" name="UserName" maxlength="10" placeholder="请输入您的用户名" onkeydown="username()"><br>
<span id="span_name1"></span><br>
<input id="userpsd" type="password" name="UserPsd" maxlength="16" placeholder="请输入您的密码" onkeydown="userpsd()"><br>
<span id="span_name2"></span><br>
<input type="button" name="Submit" id="submit" value="提交">
</div>
</form>
<script>
function username(){
// var input=document.getElementsByTagName("input")[0];
// var input1=input.getElementById("username");
var name=document.getElementById("username").value;
var span_name1=document.getElementById("span_name1");
var keycode=name.charCodeAt(0);
if(name==null){
span_name1.style.display="block";
span_name1.innerHTML="用户名长度必须为6到18位!";
}
if(keycode <65||( keycode >90&& keycode <97)|| keycode >122){
span_name1.style.display="block";
span_name1.innerHTML="用户名长度必须英文字母开头!";
}else{
if(name.length<6||name.length>18){
span_name1.style.display="block";
span_name1.innerHTML="用户名长度必须为6到18位!";
}else{
span_name1.style.display="none";
}
}
};
function userpsd(){
// var input=document.getElementsByTagName("input")[1];
// var input2=document.getElementById("userpsd");
var userpsd=document.getElementById("userpsd").value;
var span_name2=document.getElementById("span_name2");
if(userpsd.length<6||userpsd==null){
span_name2.style.display="block";
span_name2.innerHTML="密码长度不能小于6位!";
}else if(userpsd.length>16){
span_name2.style.display="block";
span_name2.innerHTML="密码长度不能大于16位!";
}else{
span_name2.style.display="none";
}
};
</script>
</body>
</html>
CSS:
*{
margin: 0px;
padding: 0px;
}
form{
width: 500px;
height: 350px;
margin: 150px auto;
background:rgb(0, 204, 255);
}
.div1{
font-size: 30px;
color: white;
font-weight: bold;
text-align: center;
height: 50px;
background: rgb(0, 153, 254);
}
.div2{
position: relative;
background:rgb(0, 204, 255);
font-size: 0px;
}
#username{
display: block;
margin: 0px auto;
margin-top: 30px;
width: 300px;
line-height: 40px;
text-indent: 10px;
}
#userpsd{
display: block;
margin: 40px auto;
width: 300px;
line-height: 40px;
text-indent: 10px;
}
#submit{
display: block;
margin: 0px auto;
width: 280px;
height: 50px;
color: white;
font-weight: bold;
text-align: center;
background: rgb(0, 153, 254);
}
#span_name1{
position: absolute;
margin-left: 100px;
margin-top: 10px;
display: block;
height: 10px;
font-size: 13px;
color: red;
}
#span_name2{
position: absolute;
margin-left: 100px;
margin-top: -30px;
display: block;
height: 10px;
font-size: 13px;
color: red;
}
写在最后
仅对个人实验做一次记录,文中不足、错误之处欢迎指正;
创作不易,点个赞吧!