- 应用JavaScript编写留言的功能,在文本中输入文字提交后,在下方进行显示。
提示:可将下方内容以列表体现,提交时动态创建列表的项。可使用以下两种方式之一的方法:
- 使用CreateElenment动态创建li标签及li中的文本
- 在列表标签ul或者ol对象上设置InnerHtml
列表对象.innerHTML += "<li>文本内容</li>"
<!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>
<style>
* {
margin: 0;
padding: 0;
}
textarea {
resize: none;
}
#btn {
width: 100px;
margin-left: 282px;
}
li {
list-style: none;
border-bottom: 1px solid #000;
width: 382px;
padding-top: 10px;
text-indent: 20px;
}
</style>
</head>
<body>
<div>
<textarea name="" id="text" cols="50" rows="10"></textarea>
</div>
<input type="button" value="提交" id="btn">
<ul></ul>
<script>
let btn = document.getElementById("btn")
btn.onclick = function() {
let textValue = document.getElementsByTagName("textarea")[0].value
let ulValue = document.getElementsByTagName("ul")[0]
//使用innerHTML
ulValue.innerHTML += "<li>" + textValue + "</li>"
//使用createElement
// let li = document.createElement("li")
// let liText = document.createTextNode(textValue)
// li.appendChild(liText)
// ulValue.appendChild(li)
}
</script>
</body>
</html>
2.设计一个选项卡功能,当鼠标移动至某一选项卡时出现切换。
提示:
- 选项卡可采用三个行内元素,为选中背景色#000,选中背景色#aaa
- 选项卡内容可采用三个不同列表
- 针对选项卡和选项内容定义两组不同样式。选项卡未选中背景色#000,选中背景色#aaa;文本颜色#fff;;选项内容未选中不显示display:none,选中显示display:block。
- 通过JavaScript动态设置样式,页面对象.classname=“class样式选择器”
如mydiv. className = "selectSpanStyle"
- 鼠标移至选项卡设置onmouseenter事件
如:mySpan.onmouseenter = function(){
…………
}
<!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>
<style>
* {
margin: 0;
padding: 0;
}
.box {
width: 600px;
height: 400px;
margin: 0 auto;
}
.title {
width: 200px;
height: 40px;
float: left;
background-color: #000;
color: #fff;
text-align: center;
line-height: 40px;
}
.title:hover {
background-color: #aaa;
}
#content {
width: 600px;
margin-top: 20px;
}
li {
list-style-type: none;
border-bottom: 1px dashed #aaa;
line-height: 40px;
}
#two {
display: none;
}
#three {
display: none;
}
</style>
</head>
<body>
<div class="box">
<div class="title" onmouseenter=show1()>热门排行</div>
<div class="title" onmouseenter=show2()>美图速递</div>
<div class="title" onmouseenter=show3()>前沿科技</div>
<div id="content">
<ul id="one">
<li>建设工作5周年座谈会</li>
<li>这些高压线不能碰</li>
<li>高中2019年球季起分步实施新课程使用新课程</li>
<li>起征点会否超5000元</li>
</ul>
<ul id="two">
<li>鹅教官、羊陪练......这所中学养的动物成了“网红”</li>
<li>最伤身体的10个生活习惯,一定要避开</li>
<li>12岁孩子带着父亲去西藏 吃住行自己拿主意</li>
<li>16岁男孩暑假干了两月工地,练出满身肌肉,只为赚学费</li>
</ul>
<ul id="three">
<li>前沿科技1</li>
<li>前沿科技2</li>
<li>前沿科技3</li>
<li>前沿科技4</li>
</ul>
</div>
</div>
<script>
let one = document.getElementById("one")
let two = document.getElementById("two")
let three = document.getElementById("three")
function show1() {
one.style.display = "block";
two.style.display = "none";
three.style.display = "none";
}
function show2() {
one.style.display = "none";
two.style.display = "block";
three.style.display = "none";
}
function show3() {
one.style.display = "none";
two.style.display = "none";
three.style.display = "block";
}
</script>
</body>
</html>
3.设计如下表单,并进行数据验证。
提示:
- 输入元素取值可通过var name =document.getElementsById(“元素id”).value;
- 判断长度name.length
- 是否英文字符开头
- 首字母是大小写字符,获取输入的字符对应的编码
var keycode=name.charCodeAt(0);
if(keycode <65||( keycode >90&& keycode <97)|| keycode >122){
不是英文字符
}
<!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>
<style>
* {
margin: 0;
padding: 0;
}
form {
width: 450px;
height: 400px;
margin: 0 auto;
text-align: center;
background-color: #00CCFF;
}
.title {
height: 50px;
background-color: #0099CC;
color: white;
text-align: center;
font-size: 20px;
font-weight: bold;
line-height: 40px;
}
li {
list-style: none;
width: 350px;
height: 50px;
margin: 0 auto;
}
input {
width: 350px;
height: 50px;
text-indent: 20px;
border: 0;
}
#nameErr,
#pwdErr {
color: red;
text-align: left;
line-height: 50px;
}
#submit {
background-color: #0099CC;
color: #fff;
font-weight: bold;
}
</style>
</head>
<body>
<form action="">
<div class="title">注册</div>
<ul>
<li></li>
<li><input type="text" placeholder="请输入您的用户名" id="uname"></li>
<li id="nameErr"></li>
<li><input type="password" placeholder="请输入您的密码" id="pwd"></li>
<li id="pwdErr"></li>
<li><input type="button" id="submit" value="提交"></li>
</ul>
</form>
<script>
let submit = document.getElementById("submit")
submit.onclick = function () {
let uname = document.getElementById("uname").value
let pwd = document.getElementById("pwd").value
let nameErr = document.getElementById("nameErr")
let pwdErr = document.getElementById("pwdErr")
if (uname.length < 6 || uname.length > 18) {
nameErr.innerHTML = "用户名长度必须为6到18位!"
}
if (pwd.length < 6) {
pwdErr.innerHTML = "密码长度不能小于6位!"
}
if (!isE(uname)) {
nameErr.innerHTML = "用户名必须以英文字母开头!"
}
function isE(str) {
let keycode = str.charCodeAt(0)
if (keycode < 65 || (keycode > 90 && keycode < 97) || keycode > 122) {
return false
}
return true
}
}
</script>
</body>
</html>