Arenaschi

Arenaschi

关注
发信
关注(28)粉丝(399)

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

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

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

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+1
		number++;

		// 创建一个td，接收number值，赋予序号的含义
		var tdNum = document.createElement('td');
		tdNum.classList.add('nums');
		tdNum.innerHTML = number;
		trs.appendChild(tdNum);

		// 将输入框的值赋予到新创建的td
		for (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>
12-02 13:20
Powered by LMLPHP ©2024 Arenaschi 0.005000