实验3
一.网页1
1.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>Document</title>
<link rel="stylesheet" href="./css1.css">
</head>
<div id="div1">
<textarea name="" id="textarea1" cols="" rows="10"></textarea>
<button id="btn1" onclick="show();">提交</button>
<ul id="ul1"></ul>
<script src="./js1.js"></script>
</div>
<body>
</body>
</html>
2.css
#textarea1 {
width: 400px;
height: 200px;
}
#div1 {
width: 420px;
height: 500px;
margin: auto;
}
#btn1 {
width: 100px;
height: 30px;
margin-left: 308px;
}
#li1 {
width: 415px;
list-style-type: none;
border-bottom: 2px solid black;
text-indent: 1em;
position: relative;
right: 42px;
}
3.js
function show() {
var textObj = document.getElementById('textarea1');
var text = textObj.value;
var ulObj = document.getElementById('ul1');
ulObj.innerHTML += "<li id='li1'>" + text + "</li>";
}
界面展示:
二.网页2
1.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>Document</title>
<link rel="stylesheet" href="./css2.css">
</head>
<body>
<div class="div1">
<div class="div2">
<ul>
<li class="li1">热门排行</li>
<li>美图速递</li>
<li>前沿科技</li>
</ul>
</div>
<div class="tab_con">
<div class="item" style="display: block;">
<ul>
<li>陈柘屹</li>
<li> 这些高压线不能碰</li>
<li>实施新课程使用新教材</li>
<li>个税法修正案草案将二审 起征点会否超5000元?</li>
</ul>
</div>
<div class="item">
<ul>
<li>鹅教官、羊陪练......这所中学养的动物成了"网红"</li>
<li>最伤身体的10个生活习惯,一定要避开</li>
<li>12岁孩子带着父亲去西藏 吃住行自己拿主意</li>
<li>16岁男孩暑假干了俩月工地,练出满身肌肉,只为赚学费</li>
</ul>
</div>
<div class="item">
<ul>
<li>敬请期待</li>
</ul>
</div>
</div>
</div>
<script src="./js2.js"></script>
</body>
</html>
2.css
* {
margin: 0;
padding: 0;
}
body {
background: rgb(230, 226, 226);
}
li {
list-style-type: none;
}
.div1 {
width: 700px;
margin: 200px auto;
}
.div2 {
height: 39px;
width: 514px;
border: 1px solid #ccc;
background-color: #000;
}
.div2 li {
display: inline-block;
height: 39px;
width: 168px;
line-height: 39px;
padding: 0;
text-align: center;
cursor: pointer;
color: #FFF
}
.div2 .li1 {
background-color: #aaa;
}
.item ul {
background: #fff;
}
.item ul li {
text-indent: 1em;
font-size: 18px;
height: 30px;
border-bottom: 1px dotted #aaa;
}
.item {
width: 516px;
display: none;
}
3.js
function valName() {
var name = document.getElementById("username").value;
var pwd = document.getElementById("userpwd").value;
var judgename = document.getElementById("judgeusername");
var judgepwd = document.getElementById("judgeuserpwd");
var userNameLength = name.length;
var pwdlength = pwd.length;
var keycode = name.charCodeAt(0);
if (userNameLength < 6 || userNameLength > 18) {
judgename.innerHTML = "用户名长度必须为6到18位!";
} else {
judgename.innerHTML = "";
}
if (keycode < 65 || (keycode > 90 && keycode < 97) || keycode > 122) {
judgename.innerHTML = "用户名必须以英文字母开头!";
} else {
}
if (pwdlength < 6) {
judgepwd.innerHTML = "密码长度不能小于6位!";
} else {
judgepwd.innerHTML = "";
}
}
function login() {
alert("提交成功!");
}
界面展示:
三.网页3
1.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>Document</title>
<link rel="stylesheet" href="./css3.css">
</head>
<body>
<div id="div1">
<div id="div2">
注册
</div>
<div id="div3">
<input class="input01" type="text" id="username" onchange="valName();" placeholder="请输入您的用户名">
<div class="div01" id="judgeusername"></div>
<input class="input01" type="password" id="userpwd" onchange="valName();" placeholder="请输入您的密码">
<div class="div01" id="judgeuserpwd"></div>
<button id="btn1" onclick="login();">
提交
</button>
</div>
</div>
<script src="./js3.js"></script>
</body>
</html>
2.css
#div1 {
width: 500px;
height: 400px;
margin: 100px auto;
}
#div2 {
font-size: 25px;
font-weight: bold;
color: #FFF;
text-align: center;
padding: 5px 0;
width: 500px;
height: 40px;
background: rgb(35, 140, 201);
}
#div3 {
width: 500px;
height: 330px;
background: rgb(60, 194, 235);
}
#btn1 {
height: 50px;
width: 355px;
margin-top: 0px;
margin-left: 70px;
color: #FFF;
background: rgb(35, 140, 201);
border: 1px solid #aaa;
position: relative;
top: 40px;
}
.input01 {
text-indent: 1em;
height: 50px;
width: 350px;
margin-left: 70px;
margin-top: 0px;
position: relative;
top: 40px;
}
.div01 {
height: 50px;
width: 300px;
margin-left: 70px;
margin-top: 0px;
line-height: 50px;
position: relative;
top: 40px;
color: red;
}
3.js
function valName() {
var name = document.getElementById("username").value;
var pwd = document.getElementById("userpwd").value;
var judgename = document.getElementById("judgeusername");
var judgepwd = document.getElementById("judgeuserpwd");
var userNameLength = name.length;
var pwdlength = pwd.length;
var keycode = name.charCodeAt(0);
if (userNameLength < 6 || userNameLength > 18) {
judgename.innerHTML = "用户名长度必须为6到18位!";
} else {
judgename.innerHTML = "";
}
if (keycode < 65 || (keycode > 90 && keycode < 97) || keycode > 122) {
judgename.innerHTML = "用户名必须以英文字母开头!";
} else {
}
if (pwdlength < 6) {
judgepwd.innerHTML = "密码长度不能小于6位!";
} else {
judgepwd.innerHTML = "";
}
}
function login() {
alert("提交成功!");
}
界面展示: