switch语句
switch语句的case只能为整数,以下给出一个范围的判断例子:
// switch练习:大于60分为合格;否则为不合格。
var score = prompt("请输入学生成绩:");
switch (parseInt(score/10)) {
case (10):
case (9):
case (8):
case (7):
case (6):
console.log("成绩合格。");
break;
case (5):
case (4):
case (3):
case (2):
case (1):
case (0):
console.log("成绩不合格");
}
正则表达式练习
<script type="text/javascript">
var exp1 = new RegExp("a","i");
console.log(exp1.test("bc"));
var exp2 = /a/i;//与构造器等价
console.log(exp2.test("bc"));
var exp3 = /a[de]c/;
console.log(exp3.test("awvaec"));
var exp4 = /\W/;
console.log(exp4.test("asdf"))
//邮箱:xxx.xxx@xx.xx.xx
var mailExp = /^\w{3,}(\.\w+)*@[A-z0-9]+(\.([A-z]){2,10}){1,2}$/;
console.log(mailExp.test("llyt.ds@fiberhomr.com"))
</script>
DOM增删改练习
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>元素节点增删改练习</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
#outer{
width: 72px;
margin: 40px auto;
padding: auto;
}
</style>
<script type="text/javascript">
window.onload = function(){
//添加新元素“广州”
myClick("btn01",function(){
//主要练习新元素生成(包括li标签节点(createElement)、文本节点(createTextNode)),节点添加(appendChild)
var newLi = document.createElement("li");
var newText = document.createTextNode("广州");
newLi.appendChild(newText);
var city = document.getElementById("city");
city.appendChild(newLi);
})
//将“广州”添加到北京前面:练习insertBefore
myClick("btn02",function(){
var newLi = document.createElement("li");
var text = document.createTextNode("广州");
newLi.appendChild(text);
var cities = document.getElementById("city");
var bj = document.getElementById("bj");
cities.insertBefore(newLi,bj);
})
//使用广州替换北京:练习replaceChild
myClick("btn03",function(){
var newLi = document.createElement("li");
var newText = document.createTextNode("广州");
newLi.appendChild(newText);
var cities = document.getElementById("city");
var bj = document.getElementById("bj");
//格式:(替换所属对象).replaceChild(新节点,原节点)
cities.replaceChild(newLi,bj);
})
//删除某一节点
myClick("btn04",function(){
//对于不支持remove的浏览器,需要找到其父节点才能删除。
//parent.removeChild(child);
var bj = document.getElementById("bj");
bj.remove();
})
}
function myClick(idStr , fun) {
var btn = document.getElementById(idStr);
btn.onclick = fun;
}
</script>
</head>
<body>
<div id = "total">
<div class="inner">
<p>
你最喜欢哪座城市?
</p>
<ur id="city">
<li id="bj">北京</li>
<li>上海</li>
<li>东京</li>
<li>首尔</li>
</ur>
</div>
<div id="btnList">
<div>
<button id="btn01">创建一个广州节点,添加到#city下</button>
</div>
<div>
<button id="btn02">将广州节点插入到#bj前面</button>
</div>
<div>
<button id="btn03">使用广州替换#bj</button>
</div>
<div>
<button id="btn04">删除#bj节点</button>
</div>
<div>
<button id="btn05">设置#bj内的HTML代码</button>
</div>
</div>
</div>
</body>
</html>
全选练习
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>图片切换练习</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
#outer{
width: 72px;
margin: 40px auto;
padding: auto;
}
</style>
<script type="text/javascript">
//实现全选、全不选、反选、提交功能
window.onload = function(){
//全选
var checkedAllBox = document.getElementById("checkedAllBtn");
checkedAllBox.onclick = function(){
//获取四个选项,并将其checked设置为true
var items = document.getElementsByName("items");
for(var i = 0; i < items.length; i++) {
items[i].checked = true;
}
}
//全不选,其逻辑与全选一致
var checkedNoBox = document.getElementById("checkedNoBtn");
checkedNoBox.onclick = function(){
//获取四个选项,并将其checked设置为false
var items = document.getElementsByName("items");
for(var i = 0; i < items.length; i++) {
items[i].checked = false;
}
}
//反选
var checkedRevBox = document.getElementById("checkedRevBtn");
checkedRevBox.onclick = function(){
//获取四个选项,并将其checked设置为相反
var items = document.getElementsByName("items");
for(var i = 0; i < items.length; i++) {
// console.log(items[i].checked);
items[i].checked = !items[i].checked;
// if(items[i].checked){
// items[i].checked = false;
// }else{
// items[i].checked = true;
// }
}
}
}
</script>
</head>
<body>
<form method="post" action="">
你爱好的运动是?<input type="checkbox" id="checkedAllBox" />全选/全不选
<br />
<input type="checkbox" name="items" value="足球" />足球
<input type="checkbox" name="items" value="篮球" />篮球
<input type="checkbox" name="items" value="羽毛球" />羽毛球
<input type="checkbox" name="items" value="乒乓球" />乒乓球
<br />
<input type="button" id="checkedAllBtn" value="全选" />
<input type="button" id="checkedNoBtn" value="全不选" />
<input type="button" id="checkedRevBtn" value="反选" />
<input type="button" id="sendBtn" value="提交" />
</form>
</body>
</html>
图片切换练习
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>图片切换练习</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
#outer{
width: 72px;
margin: 40px auto;
padding: auto;
}
</style>
<script type="text/javascript">
window.onload = function(){
var imgs = ["img/地球.jpg","img/房间.png","img/空.jpg","img/人.jpg"]
var index = 0;
var img = document.getElementsByTagName("img")[0];
var ptext = document.getElementById("info");
var prev = document.getElementById("prev");
var next = document.getElementById("next");
function text(length , index){
return "一共有"+length+"张图片,当前是第"+(index+1)+"张图片。"
}
prev.onclick = function(){
index--;
if(index < 0) index = imgs.length - 1;
img.src=imgs[index];
ptext.innerText = text(imgs.length,index);
console.log(img.src);
}
next.onclick = function(){
index ++;
if(index >= imgs.length) index = 0;
img.src=imgs[index];
ptext.innerText = text(imgs.length,index);
console.log(img.src);
}
}
</script>
</head>
<body>
<div id = "outer">
<img src = "img/地球.jpg" alt = "地球" />
<button id = "prev" >上一张</button>
<button id = "next" >下一张</button>
<p id="info">一共4张图片,当前是第1张图片</p>
</div>
</body>
</html>