- 应用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>
</head>
<style>
*{
margin: 0px;
padding: 0px;
}
div{
width: 500px;
height: auto;
margin: 0 auto;
}
textarea{
width: 500px;
margin: 100px 0px auto;
}
input{
margin: 0px;
height: 30px;
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;
}
</style>
<body>
<div>
<textarea id="texts" cols="60" rows="10" style="resize: none;"></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>
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>
</head>
<style>
*{
margin: 0px;
padding: 0px;
}
div{
width: 450px;
margin: 150px auto;
}
span{
float: left;
text-align: center;
width: 150px;
height: 30px;
padding-top: 8px;
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: 40px;
}
</style>
<body>
<div>
<span id="s1" onmouseover="show(1)">热门排行</span>
<span id="s2" onmouseover="show(2)">美图速递</span>
<span id="s3" onmouseover="show(3)">前沿科技</span>
<ul id="news1">
<li>11111111111111111111111111111111111111111</li>
<li>11111111111111111111111111111111111111111</li>
<li>11111111111111111111111111111111111111111</li>
<li>11111111111111111111111111111111111111111</li>
</ul>
<ul id="news2">
<li>鹅教官、羊陪练……这所中学养的动物成了“网红”</li>
<li>最伤身体的10个生活习惯,一定要避开</li>
<li>12岁孩子带着父亲去西藏 吃住行自己拿主意</li>
<li>16岁男孩暑假干了俩月工地,练出满身肌肉,只为赚学费</li>
</ul>
<ul id="news3">
<li>前沿科技111</li>
<li>前沿科技222</li>
<li>前沿科技333</li>
<li>前沿科技444</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>
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>
</head>
<style>
* {
margin: 0;
padding: 0;
}
form {
width: 500px;
margin: 100px auto;
background-color: #00ccff;
}
.box {
box-sizing: border-box;
width: 500px;
height: 350px;
padding: 30px 100px;
}
.zhuce {
width: 500px;
height: 50px;
background-color: #0099cc;
color: #fff;
font-size: 20px;
text-align: center;
line-height: 50px;
font-weight: bold;
}
input {
box-sizing: border-box;
width: 300px;
height: 50px;
outline: none;
font-size: 18px;
padding-left: 10px;
}
button {
width: 300px;
height: 50px;
background: #0099cc;
border: none;
color: #fff;
font-size: 20px;
font-weight: bold;
}
div {
height: 60px;
color: red;
font-size: 16px;
line-height: 60px;
}
</style>
<body>
<form>
<div class="zhuce">注册</div>
<div class="box">
<input type="text" id="idnm" placeholder="请输入您的用户名">
<div class="message1"></div>
<input type="password" id="pwd" placeholder="请输入您的密码">
<div class="message2"></div>
<button>提交</button>
</div>
</form>
<script>
var idnm = document.getElementById('idnm');
var pwd = document.getElementById('pwd');
var message1 = document.querySelector('.message1');
var message2 = document.querySelector('.message2');
idnm.onblur = function () {
var keycode = idnm.value.charCodeAt(0);
if (this.value.length < 6 || this.value.length > 18) {
message1.innerHTML = '用户名长度必须为6~18位!';
} else if (keycode < 65 || (keycode > 90 && keycode < 97) || keycode > 122) {
message1.innerHTML = '用户名必须以英文字母开头!';
} else {
message1.innerHTML = ' '
}
}
pwd.onblur = function () {
if (this.value.length < 6 || this.value.length > 18) {
message2.innerHTML = '密码长度不能小于6位!';
} else {
message2.innerHTML = ' '
}
}
</script>
</body>
</html>