(1)梯形星星
var arrorigin = new Array();
arrorigin[0] = [0,0,0,0,1,1,1,0,0,0,0];
arrorigin[1] = [0,0,0,1,1,1,1,1,0,0,0];
arrorigin[2] = [0,0,1,1,1,1,1,1,1,0,0];
arrorigin[3] = [0,1,1,1,1,1,1,1,1,1,0];
arrorigin[4] = [1,1,1,1,1,1,1,1,1,1,1];
for (var i = 0;i < arrorigin.length;i++){
for (var j = 0;j < arrorigin[0].length;j++){
if (arrorigin[i][j] == 0){
document.write(" ");
}else {
document.write("*");
}
if (j == arrorigin[0].length - 1){
document.write("<br>");
}
}
}
(2)输入序号来使复选框选中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
html,body{margin: 0;padding: 0;}
</style>
</head>
<body>
<input type="checkbox" value="num1" name="number">one
<input type="checkbox" value="num2" name="number">two
<input type="checkbox" value="num3" name="number">three
<input type="checkbox" value="num4" name="number">four
<input type="checkbox" value="num5" name="number">five
<input type="checkbox" value="num6" name="number">six
<input type="text" id="inputnumber" value="454354">请输入序号
<input type="button" value="确定" onclick="checkselect()">
<script>
function checkselect() {
var getinput = document.getElementById("inputnumber").value;
var splitvalue = getinput.split("");
var getlist = document.getElementsByName("number");
//console.log(splitvalue);
for (var j = 0;j < getlist.length;j++){
if (getlist[j].checked == true){
getlist[j].checked = false;
}
}
for (var i = 0;i < splitvalue.length;i++){
var number = getlist[splitvalue[i]-1];
number.checked = true;
}
}
</script>
</body>
</html>
(4)最基本事件委托
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
</style>
</head>
<body>
<ul id="ul">
<li><a href="#">我是</a></li>
<li><a href="#">一个</a></li>
<li><a href="#">帅哥</a></li>
<li><a href="#">哈哈</a></li>
</ul>
<script>
window.onload=function () {
var aA=document.getElementsByTagName('a');
var oUl=document.getElementById('ul');
oUl.addEventListener('click',function(e){
if(e.target && e.target.nodeName == "A"){
var item = e.target;
this.removeChild(item.parentNode);
}
})
}
</script>
</body>
</html>
当没有索引的时候,是可以代替this的
(6)H5自定义属性
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<ul>
<li data-tooltip="保罗" class="item">1</li>
<li data-tooltip="格里芬" class="item">2</li>
<li data-tooltip="乔丹" class="item">3</li>
<li data-tooltip="巴莫泰" class="item">4</li>
<li data-tooltip="雷迪克" class="item">5</li>
<li data-tooltip="斯贝茨" class="item">6</li>
<li data-tooltip="里弗斯" class="item">7</li>
<li data-tooltip="克劳福德" class="item">8</li>
</ul>
<script>
var itemlist = document.getElementsByClassName("item");
var itemarr = [];
for (var i = 0;i < itemlist.length;i++) {
itemarr.push(itemlist[i].dataset.tooltip);
}
console.log(itemarr);
//Array [ "保罗", "格里芬", "乔丹", "巴莫泰", "雷迪克", "斯贝茨", "里弗斯", "克劳福德" ]
</script>
</body>
</html>
(7)一个不错的综合运用
var perpleName = ['griffin','paul','jack','lin'];
function likes (names) {
var templates = [
'no one likes this',
'{name} likes this',
'{name} and {name} like this',
'{name}, {name} and {name} like this',
'{name}, {name} and {n} others like this'
];
var idx = Math.min(names.length, 4);
return templates[idx].replace(/{name}|{n}/g, function (val) {
return val === '{name}' ? names.shift() : names.length;
});
}
console.log(likes(perpleName));
因为这里只匹配{name}跟{n},如果是{name},还是会返回true,然后就会移除数组第一个元素,并且返回这个元素,这个元素就替换到templates里面的{name},而当匹配到{n}时,则是false,就会返回当前数组的长度,也就替换到{n}的位置,因为匹配name的都被移除了,length也就是剩下元素的长度