简单抽奖
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div class="btn">抽奖开始</div>
<div class="prize"></div>
<script type="text/javascript">
var arr = ["亚瑟", "阿轲", "赵云", "武则天", "嬴政", "妲己", "梦奇", "鬼谷子", "东皇太一", "张飞", "牛魔", "太乙真人", "亚瑟", "程咬金", "夏侯惇", "钟无艳", "墨子", "白起", "项羽", "刘禅", "廉颇"];
var isClick = true;
var btns = document.querySelector(".btn");
var prize = document.querySelector(".prize");
btns.addEventListener('click', function() {
if(isClick) {
var count = 0;
isClick = false;
var timer = setInterval(function() {
var ran = Math.floor(Math.random() * arr.length);
prize.innerHTML = arr[ran]
count++;
if(count > 10) {
clearInterval(timer);
isClick = true;
}
}, 100)
}
})
</script>
</body>
</html>
z.png
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.userInfo,
.search {
width: 60%;
margin: 0 auto;
}
.userInfo input {
width: 23%;
margin: 10px;
}
table {
width: 60%;
text-align: center;
margin: 10px auto;
}
table td {
height: 25px;
}
</style>
</head>
<body>
<div class="web">
<div class="userInfo">
<input type="text" placeholder="请输入用户名" name="_name" id="_name" value="" />
<input type="text" placeholder="请输入学号" name="_num" id="_num" value="" />
<input type="text" placeholder="请输入年龄" name="_age" id="_age" value="" />
<input type="button" id="add" value="添加" />
<input type="button" id="sort" value="排序" />
<input type="button" id="DeleteSelection" value="删除选中" />
</div>
<table border="" cellspacing="" cellpadding="">
<tr>
<th>姓名</th>
<th>学号</th>
<th>年龄</th>
<th>
<button class="checkall">全选</button>
</th>
</tr>
</table>
<div class="search">
<input type="search" />
<input type="button" name="" id="search" value="搜索" />
</div>
</div>
<script type="text/javascript">
var add = document.querySelector('#add');
var table = document.querySelector('table');
var userInfo = document.querySelectorAll('input[ type=text ]');
console.log(userInfo)
//表示单击事件
add.addEventListener("click", function() {
// => 方法一
/** var tr = document.createElement("tr");
for (var i=0;i<4;i++) {
var td = document.createElement("td");
tr.appendChild(td);
}
table.appendChild(tr);
*/
// => 方法二
/**var tr = "<tr><td>"+userInfo[0].value+"</td><td>"+userInfo[1].value+"</td><td>"+userInfo[2].value+"</td><td><button>删除</button><button>修改</button><button>确认修改</button></td></tr>"
table.innerHTML += tr;*/
// => 方法三
var tr = `
<tr>
<td> ${userInfo[0].value} </td>
<td>${userInfo[1].value}</td>
<td>${userInfo[2].value}</td>
<td>
<button class="del">删除</button>
<button class="chang">修改</button>
<button class="confirmChang">确认修改</button>
<input type="checkbox">
</td>
</tr><tbady>`
table.innerHTML += tr;
//添加之后将input清除为空
for(var i = 0; i < userInfo.length; i++) {
userInfo[i].value = '';
}
//重新获取最新表格
// table = document.querySelector('table');@@@
//调用删除功能
del(".del");
//调用修改功能
confirmChang(".chang", ".confirmChang");
//调用全选功能
//checkall(".checkall");
})
//删除功能
function del(el) {
var delBtn = document.querySelectorAll(".del");
// => 方法一
/**for(var i = 0; i < delBtn.length; i++) {
delBtn[i].addEventListener("click", function() {
console.log(this.parentNode.parentNode);
table.removeChild(this.parentNode.parentNode.parentNode);@@@
this.parentNode.parentNode.parentNode.remove();
})
}*/
// => 方法二
for(let i = 0; i < delBtn.length; i++) {
delBtn[i].addEventListener("click", function() {
delBtn[i].parentNode.parentNode.parentNode.remove();
})
}
}
//修改功能
function confirmChang(changElBtn, confirmElBtn) {
var changBtn = document.querySelectorAll(changElBtn);
var confirmBtn = document.querySelectorAll(confirmElBtn);
for(let j = 0; j < changBtn.length; j++) {
changBtn[j].addEventListener("click", function() {
var allTd = this.parentNode.parentNode.children;
for(var i = 0; i < allTd.length - 1; i++) {
allTd[i].contentEditable = true;
}
// this.parentNode.contentEditable = false;
allTd[0].focus();
})
}
//确认修改
for(let j = 0; j < changBtn.length; j++) {
confirmBtn[j].addEventListener("click", function() {
var allTd = this.parentNode.parentNode.children;
for(var i = 0; i < allTd.length - 1; i++) {
allTd[i].contentEditable = false;
}
})
}
}
//搜索功能
function search(el) {
var search = document.querySelector(el);
var searchBtn = search.querySelector("input[type=button]");
var searchCont = search.querySelector('input[type=search]');
searchBtn.addEventListener("click", function() {
var allTr = table.querySelectorAll("tr");
for(var i = 1; i < allTr.length; i++) {
if(searchCont.value.trim() == allTr[i].children[0].innerHTML.trim()) {
allTr[i].style.background = 'skyblue';
} else {
allTr[i].style.background = 'red';
}
}
})
}
//调用搜索功能
search(".search ");
//排序功能
function order(el) {
var isClick = true;
var orderBtn = document.querySelector(el);
orderBtn.addEventListener("click", function() {
var allTr = table.querySelectorAll("tbody");
var arr = [];
for(var i = 0; i < allTr.length; i++) {
arr.push(allTr[i]);
}
for(var i = 1; i < arr.length; i++) {
for(var j = 1; j < arr.length; j++) {
var num1 = parseInt(arr[i].children[0].children[2].innerText);
var num2 = parseInt(arr[j].children[0].children[2].innerText);
if(isClick) {
if(num1 > num2) {
var tem = arr[i];
arr[i] = arr[j];
arr[j] = tem;
}
} else {
if(num1 < num2) {
var tem = arr[i];
arr[i] = arr[j];
arr[j] = tem;
}
}
}
}
isClick = !isClick;
console.log(arr);
for(var i = 0; i < arr.length; i++) {
table.appendChild(arr[i]);
}
})
}
order("#sort");
//选中删除
function optio(el) {
var DeleteSelectionBtn = document.querySelector(el);
console.log(DeleteSelectionBtn)
DeleteSelectionBtn.addEventListener("click", function() {
var optionBtn = document.querySelectorAll("input[type=checkbox]");
for(let i = 0; i < optionBtn.length; i++) {
if(optionBtn[i].checked) {
optionBtn[i].parentNode.parentNode.parentNode.remove();
console.log(optionBtn[i].parentNode.parentNode.parentNode)
}
}
})
}
optio("#DeleteSelection");
//全选删除
/**function checkall(el) {
var isClick = true;
var checkallBtn = document.querySelector(el);
checkallBtn.addEventListener("click", function() {
var optionBtn = document.querySelectorAll("input[type=checkbox]");
for(let i = 0; i < optionBtn.length; i++) {
optionBtn[i].checked = isClick;
}
isClick = !isClick;
})
}*/
//方法2
function checkall(el) {
var checkallBtn = document.querySelector(el);
table.addEventListener("click", function(e) {
if(e.target.classList.contains("checkall")) {
var optionBtn = document.querySelectorAll("input[type=checkbox]");
/**for(let i = 0; i < optionBtn.length; i++) {
optionBtn[i].setAttribute("checked",true);
optionBtn[i].checked = true;
}*/
// 方法1
/**
var arr = [];
for (var i=0;i<optionBtn.length;i++) {
arr.push(optionBtn[i]);
}
*/
// 方法2
var arr = Array.prototype.slice.call(optionBtn);
var res = arr.every(function(val,index){
return val.checked ==true;
})
for (var i=0;i<optionBtn.length;i++) {
if (res) {
optionBtn[i].checked = false;
} else{
optionBtn[i].checked = true;
}
}
}
})
}
checkall(".checkall");
</script>
</body>
</html>
