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

2023-12-02 22:30
文章标签 使用 切换 js 表格 制作 图标 banner 实用功能

本文主要是介绍使用纯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>

这篇关于使用纯js码2个实用功能banner图标切换和表格制作的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/447069。

相关文章

C语言中联合体union的使用

C语言中联合体union的使用

本文编辑整理自： http://bbs.chinaunix.net/forum.php?mod=viewthread&tid=179471 一、前言 “联合体”(union）与“结构体”(struct)有一些相似之处。但两者有本质上的不同。在结构体中,各成员有各自的内存空间, 一个结构变量的总长度是各成员长度之和。而在“联合”中,各成员共享一段内存空间, 一个联合变量
阅读更多...
Tolua使用笔记（上）

Tolua使用笔记（上）

目录   1.准备工作 2.运行例子 01.HelloWorld：在C#中，创建和销毁Lua虚拟机 和 简单调用。 02.ScriptsFromFile：在C#中，对一个lua文件的执行调用 03.CallLuaFunction：在C#中，对lua函数的操作 04.AccessingLuaVariables：在C#中，对lua变量的操作 05.LuaCoroutine：在Lua中，
阅读更多...
Vim使用基础篇

Vim使用基础篇

本文内容大部分来自 vimtutor，自带的教程的总结。在终端输入vimtutor 即可进入教程。 先总结一下，然后再分别介绍正常模式，插入模式，和可视模式三种模式下的命令。 目录 看完以后的汇总 1.正常模式（Normal模式） 1.移动光标 2.删除 3.【:】输入符 4.撤销 5.替换 6.重复命令【. ; ,】 7.复制粘贴 8.缩进 2.插入模式 INSERT
阅读更多...
Lipowerline5.0 雷达电力应用软件下载使用

Lipowerline5.0 雷达电力应用软件下载使用

1.配网数据处理分析 针对配网线路点云数据，优化了分类算法，支持杆塔、导线、交跨线、建筑物、地面点和其他线路的自动分类；一键生成危险点报告和交跨报告；还能生成点云数据采集航线和自主巡检航线。 获取软件安装包联系邮箱:2895356150@qq.com，资源源于网络，本介绍用于学习使用，如有侵权请您联系删除！ 2.新增快速版，简洁易上手 支持快速版和专业版切换使用，快速版界面简洁，保留主
阅读更多...
如何免费的去使用connectedpapers？

如何免费的去使用connectedpapers？

免费使用connectedpapers 1. 打开谷歌浏览器2. 按住ctrl+shift+N,进入无痕模式3. 不需要登录（也就是访客模式）4. 两次用完，关闭无痕模式（继续重复步骤 2 - 4） 1. 打开谷歌浏览器 2. 按住ctrl+shift+N,进入无痕模式 输入网址：https://www.connectedpapers.com/ 3. 不需要登录（也就是
阅读更多...
Toolbar+DrawerLayout使用详情结合网络各大神

Toolbar+DrawerLayout使用详情结合网络各大神

最近也想搞下toolbar+drawerlayout的使用。结合网络上各大神的杰作，我把大部分的内容效果都完成了遍。现在记录下各个功能效果的实现以及一些细节注意点。 这图弹出两个菜单内容都是仿QQ界面的选项。左边一个是drawerlayout的弹窗。右边是toolbar的popup弹窗。 开始实现步骤详情： 1.创建toolbar布局跟drawerlayout布局 <?xml vers
阅读更多...
js+css二级导航

js+css二级导航

效果 <!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"><head><meta http-equiv="Con
阅读更多...
C#中，decimal类型使用

C#中，decimal类型使用

在Microsoft SQL Server中numeric类型，在C#中使用的时候，需要用decimal类型与其对应，不能使用int等类型。 SQL：numeric C#：decimal
阅读更多...
探索Elastic Search：强大的开源搜索引擎，详解及使用

探索Elastic Search：强大的开源搜索引擎，详解及使用

🎬 鸽芷咕：个人主页  🔥 个人专栏: 《C++干货基地》《粉丝福利》 ⛺️生活的理想，就是为了理想的生活! 引入 全文搜索属于最常见的需求，开源的 Elasticsearch （以下简称 Elastic）是目前全文搜索引擎的首选，相信大家多多少少的都听说过它。它可以快速地储存、搜索和分析海量数据。就连维基百科、Stack Overflow、
阅读更多...
flask 中使用 装饰器

flask 中使用 装饰器

因为要完成毕业设计，我用到fountain code做数据恢复。 于是在github上下载了fountain code的python原代码。 github上的作者用flask做了fountain code的demo。 flask是面向python的一个网站框架。 里面有用到装饰器。 今天笔试的时候，我也被问到了python的装饰器。
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2