web实验（3）
- 应用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;box-sizing: border-box;}form {position: absolute;left: 50%;transform: translate(-50%);}input {position: absolute;left: 351px;top: 218px;width: 100px;}textarea {border: 1px solid black;}ul {list-style: none;margin-top: 50px;}li {border-bottom: 2px solid black;padding: 10px;text-indent: 2em;}</style>
</head>
<body><form action=""><textarea name="" cols="60" rows="15" style="resize: none;" id="empty"></textarea><input type="button" value="提交"><ul></ul></form>
</body>
<script>var text = document.querySelector("textarea");var ul = document.querySelector("ul");var button = document.querySelector("input");button.onclick = function() {var li = document.createElement("li");li.innerHTML = text.value;ul.appendChild(li);document.getElementById('empty').value = "";}
</script>
</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 {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);height: 256.4px;}.head {margin: 0 auto;width: 600px;height: 40px;}span {float: left;width: 200px;height: 40px;text-align: center;background-color: #000;color: #fff;line-height: 40px;}.text {position: absolute;left: 50%;transform: translate(-50%);width: 600px;display: none;}p {width: 600px;text-indent: 2em;margin: 10px 0;border-bottom: 1px dashed #000;padding: 10px 0;}.active {display: block;}span.active {background-color: #aaa;}</style>
</head>
<body><div class="box"><div class="head"><span class="active">热门排行</span><span >美图速递</span><span >前沿科技</span></div><div id="text1" class="text active"><p>1</p><p>2</p><p>3</p><p>4</p></div><div id="text2" class="text"><p>5</p><p>6</p><p>7</p><p>8</p></div><div id="text3" class="text"><p>3</p><p>3</p><p>3</p><p>3</p></div></div>
</body><script>let spans = document.querySelectorAll("span");let texts = document.querySelectorAll(".text");for (let i = 0; i < spans.length; i ++) {spans[i].onmouseenter = function() {if (!spans[i].classList.contains('active')) {console.log(i);document.querySelector(".active").classList.remove("active");document.querySelector(".active").classList.remove("active");spans[i].classList.add("active");texts[i].classList.add("active");} }}</script>
</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>* {padding: 0;margin: 0;}.box {position: absolute;left: 50%;top: 50%;transform: translate(-50%, -50%);width: 600px;height: 445px;}.head {background-color: #0099cc;text-align: center;line-height: 55px;color: #fff;font-weight: bold;font-size: 34px;width: 600px;height: 55px;}input {display: block;padding: 20px;margin-left: 122px;width: 280px;}.myBody {width: 560px;height: 85px;background-color: #00ccff;padding: 20px 20px 0 20px;}.size {width: 320px;}p {color: red;font-size: 12px;text-align: start;margin-left: 125px;margin-top: 15px;}</style>
</head>
<body><form action=""><div class="box"><div class="head">注册</div><div class="myBody"><input type="text" placeholder="请输入您的用户名" id="name"><p id="p1"></p></div><div class="myBody"><input type="password" placeholder="请输入您的密码" id="pw"><p id="p2"></p></div><div class="myBody"><input type="button" value="提交" class="size"></div></div></form>
</body><script>let p1 = document.querySelector("#p1");let p2 = document.querySelector("#p2");let button = document.querySelector(".size");let name = document.querySelector("#name");let pw = document.querySelector("#pw");name.onblur = function() {let keycode = document.getElementById("name").value.charCodeAt(0);if (document.getElementById("name").value.length < 6 || document.getElementById("name").value.length > 18) {p1.innerText = "用户名必须为6到18位";} else if (keycode < 65 || (keycode > 90 && keycode < 97) || keycode > 122) {p1.innerText = "用户名必须以英文字母开头";} else {p1.innerText = "";}}pw.onblur = function() {if (document.getElementById("pw").value.length < 6) {p2.innerText = "密码长度不能小于6位";} else {p2.innerText = "";}}</script>
</html>