使用纯js码2个实用功能banner图标切换和表格制作

“I can accept failure, but I can't acceptnot trying.”—— by Michael Jordan 　　
“我可以接受失败，但我不能接受放弃。” ——迈克尔•乔丹　

banner图标切换

js原生：图片地址你们自己设置位置，相对位置或者绝对位置即可

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="gb2312">
<head>
<title>JS图片切换效果(点击某张调到某张)</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<style type="text/css">
* { margin:0; padding:0; }
body {margin:0;color:#88c; background:#333;
}
img { margin:0; padding:0; border:0; }
#js_F {position:relative;top:10px; left:10px;overflow:hidden;width:395px; height:185px;background:#33c;
}
.div_img {position:absolute; top:0;width:295px; height:185px;cursor:pointer;
}
#div_img_0 { z-index:5; left:0; }
#div_img_1 { z-index:4; left:25px; }
#div_img_2 { z-index:3; left:50px; }
#div_img_3 { z-index:2; left:75px; }
#div_img_4 { z-index:1; left:100px; }
</style>
</head>
<body>
<div id="js_F"><div id="div_img_0" class="div_img"><a href="#"><img src="images/fp/show01.jpg" /></a><img src="images/fp/showimg_title1.gif" onmouseover="jsf_mmove(0)" /></div><div id="div_img_1" class="div_img"><a href="#"><img src="images/fp/show02.jpg" /></a><img src="images/fp/showimg_title1.gif" onmouseover="jsf_mmove(1)" /></div><div id="div_img_2" class="div_img"><a href="#"><img src="images/fp/show03.jpg" /></a><img src="images/fp/showimg_title1.gif" onmouseover="jsf_mmove(2)" /></div><div id="div_img_3" class="div_img"><a href="#"><img src="images/fp/show04.jpg" /></a><img src="images/fp/showimg_title1.gif" onmouseover="jsf_mmove(3)" /></div><div id="div_img_4" class="div_img"><a href="#"><img src="images/fp/show05.jpg" /></a><img src="images/fp/showimg_title1.gif" onmouseover="jsf_mmove(4)" /></div>
</div><script type="text/javascript">
<!--///*--><![CDATA[/*><!--*/
var div_imgs = document.getElementById("js_F").getElementsByTagName("div");
var imgLeft = [0, 25, 50, 75, 100]; //5个图片的初始left值
var imgWidth = 270; //图片的宽度
var atf = [true, true, true, true, true]; //5个图片的位置：true为右边，false为左边
var speed1 = 10, speed2 = 2000, mo = 15; //速度
var sTo;
function jsf_move(n){clearTimeout(sTo);var thisL; //图片left值if (atf[n]) { //要移动的图片在右边//需移动的图片（包括该图片左边的所有图片）向左边移动)for (var i=0; i<=n; i++) { //当前值-(图片宽度-(当前值-初始值))/速度thisL = parseInt(getStyle(div_imgs[i],"left"));div_imgs[i].style.left = thisL - Math.ceil((imgWidth-(imgLeft[i]-thisL))/mo) + "px";if (i<n) atf[i] = false; //更改图片的位置状态}} else { //要移动的图片在左边//需移动的图片（包括该图片右边的所有图片）向右边移动)for (var i=4; i>=n; i--) { //当前值+(当前值-初始值)/速度thisL = parseInt(getStyle(div_imgs[i],"left"));div_imgs[i].style.left = thisL + Math.ceil(Math.abs(thisL-imgLeft[i])/mo) + "px";if (i>n) atf[i] = true; //更改图片的位置状态}}thisL = parseInt(getStyle(div_imgs[n],"left"));if ((atf[n]  &&  thisL>(imgLeft[n]-imgWidth)) || (!atf[n]  &&  thisL<imgLeft[n])) {//当前图片移动未结束，继续移动当前图片sTo = setTimeout(function(){jsf_move(n);}, speed1);} else {//当前图片移动结束，准备移动下一张图片if (n>=3  &&  atf[n]) {atf[n] = false;sTo = setTimeout(function(){jsf_move(n);}, speed2);} else if (n==0  &&  !atf[n]) {atf[n] = true;sTo = setTimeout(function(){jsf_move(n);}, speed2);} else if (atf[n]){atf[n] = false;sTo = setTimeout(function(){jsf_move(++n);}, speed2);} else {sTo = setTimeout(function(){jsf_move(--n);}, speed2);}}
}
//判断图片的位置
function jsf_mmove(n){clearTimeout(sTo);switch (n){case 0 :atf[0] = false;jsf_move(0);break;case 1 :case 2 :case 3 :if (atf[n-1]) {sTo = setTimeout(function(){jsf_move(n-1);}, speed1);} else if (atf[n]) {atf[n-1] = true;sTo = setTimeout(function(){jsf_move(n-1);}, speed1);} else {sTo = setTimeout(function(){jsf_move(n);}, speed1);}break;case 4 :atf = [false, false, false, true, true];jsf_move(3);break; }
}
window.onload = function(){sTo = setTimeout("jsf_move(0)",speed2);
}
function getStyle( elem, name ) {if (elem.style[name]) { return elem.style[name]; }else if (elem.currentStyle) { return elem.currentStyle[name]; }else if (document.defaultView  &&  document.defaultView.getComputedStyle) {name = name.replace(/([A-Z])/g,"-$1");name = name.toLowerCase();var s = document.defaultView.getComputedStyle(elem,"");return s  &&  s.getPropertyValue(name);}else { return null; }
}
/*]]>*///-->
</script>
</body>
</html>

表格制作js

表格css :

* {margin: 0;padding: 0;box-sizing: border-box;
}body {display: grid;align-items: center;justify-content: center;
}.container {width: 1100px;height: 350px;margin-top: 20px;display: flex;overflow: hidden;
}.container-left {width: 300px;padding: 10px 15px;background: rgb(216, 195, 157);
}.container-left input {width: 80%;min-height: 30px;outline: none;font-size: 16px;margin-top: 10px;margin-bottom: 15px;border-radius: 5px;padding: 0 5px;border: 1px solid rgb(69, 126, 123);
}.container-left button {border-radius: 5px;font-size: 16px;padding: 10px 25px;margin: 10px 20px;cursor: pointer;
}.container-right {width: 600px;padding: 10px 15px;overflow-y: auto;background: rgb(160, 240, 178);}.container-right table {cursor: default;border: 1px solid #000;
}.container-right table {width: 500px;text-align: center;margin: 20px 10px;
}.container-right table thead td {color: #fff !important;background: rgb(73, 187, 58);
}.container-right table tr td {height: 35px;font-size: 18px;color: #000;border: 1px solid #000;font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}.container-right table tr td button {padding: 3px 7px;cursor: pointer;
}.container-right table tr td input {width: 50px;text-align: center;
}.delete {color: #fff;background-color: #f00;
}.change {background-color: #0f0;
}.container-right table tr td span {cursor: pointer;text-align: center;display: inline-block;width: 24px;height: 24px;border-radius: 5px;background-color: antiquewhite;
}.container-right table tr td span:hover {color: #fff;background-color: rgb(172, 163, 152);
}.search {width: 200px;font-size: 16px;text-align: center;padding: 10px 5px;background-color: rgb(207, 183, 226);
}.search input {width: 130px;height: 30px;background-color: snow;border: 1px solid rgb(80, 80, 80);outline: none;
}

表格js:

//TODO 1.获取元素// 获取存放数据位置的tbody标签
var tbody = document.querySelector('tbody');
// 获取输入数据区域的input的标签
var inputs = document.querySelectorAll('.container-left input');
// 获取触发添加功能的button按钮
var btn = document.querySelector('.btn');
// 获取触发清空表单的button按钮
var reset = document.querySelector('button[type=reset');
// 获取检索区域的搜索button按钮
var searchBtn = document.querySelector(".searchBtn");// 设定序号初始值
var number = 0;// 判断记录值
var flag = true;// 定义空对象，存放输入数据
var message = {};// 定义空数组，存放对象
var students = [];// TODO 2.添加功能
btn.addEventListener('click', function () {// 输入框非空判断if (inputs[0].value != '' && inputs[0].value != null && inputs[1].value != '' && inputs[1].value !=null && inputs[2].value != '' && inputs[2].value != null && inputs[3].value != '' && inputs[3].value != null) {// 将输入的数据存入数组message = {"number": number,"name": inputs[0].value,"age": inputs[1].value,'sex': inputs[2].value,'id': inputs[3].value};// 调用去重函数clearMess();// 启用自动数据重置reset.click();} else {// 空数据提示alert("数据输入不完全，请重新输入数据");};});//TODO 去重函数
function clearMess() {if (students.length > 0) {for (var i = 0; i < students.length; i++) {if (students[i].id == message.id) {alert("键值重复，请重新输入");return false;};};students.push(message);} else {students.push(message);};//  调用回显函数innerMess();
};// TODO 回显函数
function innerMess() {// 生成表格内容区域if (flag) {// 创建新的tr节点var trs = document.createElement('tr');tbody.appendChild(trs);// 每次创建一个tr，number+1number++;// 创建一个td，接收number值，赋予序号的含义var tdNum = document.createElement('td');tdNum.classList.add('nums');tdNum.innerHTML = number;trs.appendChild(tdNum);// 将输入框的值赋予到新创建的tdfor (var i = 0; i < inputs.length; i++) {var tds = document.createElement('td');tds.innerHTML = inputs[i].value;trs.appendChild(tds);};// 创建移除操作按钮 - 删除var deleteBtn = document.createElement('td');deleteBtn.innerHTML = `<button class="delete" onclick='deleteMess(this)'>删除</button>`;trs.appendChild(deleteBtn);// 创建修改操作按钮 - 修改var changeBtn = document.createElement('td');changeBtn.innerHTML = `<button class="change" onclick='changeMess(this)'>修改</button>`;trs.appendChild(changeBtn);// 创建数据移动按钮 - 移动var doingBtn = document.createElement('td');doingBtn.innerHTML = `<span onclick="upMess(this)">↑</span><span onclick="downMess(this)">↓</span>`;trs.appendChild(doingBtn);};
};//TODO 删除函数
function deleteMess(element) {// 获取到当前标签的序号var deleteIndex = element.parentNode.parentNode;if (confirm("是否确认操作")) {//  先删除标签deleteIndex.remove();// 再根据序号删除数组中的对应数据for (var i = 0; i < students.length; i++) {if (students[i].id == deleteIndex.children[4].innerHTML) {students.splice(i, 1);}};alert('操作成功');var nums = document.querySelectorAll('.nums');// 删除行的同时，控制删除行以外行数序号的删减var index;if (nums.length > 0) {for (var i = 0; i < nums.length; i++) {index = i;var nums = document.querySelectorAll('.nums');nums[index].innerHTML = index + 1;};};console.log(students);number--;};
};//TODO 修改函数
function changeMess(element) {var tds2 = element.parentNode.parentNode.children;for (var i = 1; i < tds2.length - 3; i++) {inputs[i - 1].value = tds2[i].innerHTML;inputs[3].setAttribute('disabled', 'true');tds2[i].innerHTML = `<input type="text" value='${tds2[i].innerText}'/>`;};tds2[4].children[0].setAttribute('disabled', 'true');element.parentNode.innerHTML = `<button class="change" onclick='updateMess(this)'>更新</button>`;
};//TODO 更新函数
function updateMess(element) {var tdsInp = document.querySelectorAll('table input');var firstNumber = parseInt(element.parentNode.parentNode.firstElementChild.innerHTML);var tds3 = element.parentNode.parentNode.children;students.splice(firstNumber - 1, 1);for (var i = 0; i < students.length; i++) {if (students[i].id == tdsInp[3].value) {alert("键值重复，请重新输入");return false;};};var message2 = {"number": firstNumber - 1,"name": tdsInp[0].value,"age": tdsInp[1].value,"sex": tdsInp[2].value,"id": tdsInp[3].value};students.push(message2);for (var i = 0; i < tdsInp.length; i++) {tds3[i + 1].innerHTML = tdsInp[i].value;};inputs[3].removeAttribute('disabled');reset.click();element.parentNode.innerHTML = `<button class="change" onclick='changeMess(this)'>修改</button>`;};//TODO 查询函数
function searchMess(element) {var messageLens = document.querySelectorAll('tbody tr');var searchIpt = document.querySelector('.searchInp').value;for (var i = 0; i < messageLens.length; i++) {if (searchIpt == '' || searchIpt == null || searchIpt == undefined) {messageLens[i].style.display = '';} else {messageLens[i].style.display = 'none';for (var j = 1; j < messageLens[i].children.length - 3; j++) {if (searchIpt == messageLens[i].children[j].innerHTML) {messageLens[i].style.display = '';};};};};
};// TODO 数据位置向上移动函数
function upMess(element) {var trsUp = document.querySelectorAll('tbody tr');if (element.parentNode.parentNode.children[0].innerHTML == 1) {alert("移动失败，数据无法再向上移动");} else {for (var i = 1; i <= 4; i++) {var temps = element.parentNode.parentNode.children[i].innerHTML;element.parentNode.parentNode.children[i].innerHTML = element.parentNode.parentNode.previousElementSibling.children[i].innerHTML;element.parentNode.parentNode.previousElementSibling.children[i].innerHTML = temps;};};
};// TODO 数据位置向下移动函数
function downMess(element) {if (element.parentNode.parentNode.children[0].innerHTML == students.length) {alert("移动失败，数据无法再向下移动");} else {for (var i = 1; i <= 4; i++) {var temps2 = element.parentNode.parentNode.children[i].innerHTML;element.parentNode.parentNode.children[i].innerHTML = element.parentNode.parentNode.nextElementSibling.children[i].innerHTML;element.parentNode.parentNode.nextElementSibling.children[i].innerHTML = temps2;};};
};

表格HTML：

<!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"><link rel="stylesheet" type="text/css" href="css/表格.css" /><title>制作数据表</title>
</head><body><h2 align="center">点击添加学生信息</h2><div class="container"><div class="search"><p>信息检索</p><p><input type="text" class="searchInp"><button type="button" class="searchBtn" onclick="searchMess(this)">搜索</button></p></div><div class="container-left"><p>信息输入</p><form action="#" method="GET">姓名：<input type="text" name="user" id="user" />年龄：<input type="number" name="age" id="age" />性别：<input type="text" name="sex" id="sex" />学号：<input type="text" name="id" id="id" /><button type="button" class="btn">添加</button><button type="reset">重置</button></form></div><div class="container-right"><p>信息显示</p><table cellpadding="0" cellspacing="0"><thead><td>序号</td><td>姓名</td><td>年龄</td><td>性别</td><td>学号</td><td>移除</td><td>修改</td><td>移动</td></thead><tbody></tbody></table></div></div></body><script src="js/表格.js"></script></html>