使用纯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。

相关文章

python使用库爬取m3u8文件的示例

python使用库爬取m3u8文件的示例

《python使用库爬取m3u8文件的示例》本文主要介绍了python使用库爬取m3u8文件的示例,可以使用requests、m3u8、ffmpeg等库,实现获取、解析、下载视频片段并合并等步骤,具有... 目录一、准备工作二、获取m3u8文件内容三、解析m3u8文件四、下载视频片段五、合并视频片段六、错误
阅读更多...
gitlab安装及邮箱配置和常用使用方式

gitlab安装及邮箱配置和常用使用方式

《gitlab安装及邮箱配置和常用使用方式》：本文主要介绍gitlab安装及邮箱配置和常用使用方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录1.安装GitLab2.配置GitLab邮件服务3.GitLab的账号注册邮箱验证及其分组4.gitlab分支和标签的
阅读更多...
SpringBoot3应用中集成和使用Spring Retry的实践记录

SpringBoot3应用中集成和使用Spring Retry的实践记录

《SpringBoot3应用中集成和使用SpringRetry的实践记录》SpringRetry为SpringBoot3提供重试机制,支持注解和编程式两种方式,可配置重试策略与监听器,适用于临时性故... 目录1. 简介2. 环境准备3. 使用方式3.1 注解方式 基础使用自定义重试策略失败恢复机制注意事项
阅读更多...
nginx启动命令和默认配置文件的使用

nginx启动命令和默认配置文件的使用

《nginx启动命令和默认配置文件的使用》：本文主要介绍nginx启动命令和默认配置文件的使用,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录常见命令nginx.conf配置文件location匹配规则图片服务器总结常见命令# 默认配置文件启动./nginx
阅读更多...
在Windows上使用qemu安装ubuntu24.04服务器的详细指南

在Windows上使用qemu安装ubuntu24.04服务器的详细指南

《在Windows上使用qemu安装ubuntu24.04服务器的详细指南》本文介绍了在Windows上使用QEMU安装Ubuntu24.04的全流程：安装QEMU、准备ISO镜像、创建虚拟磁盘、配置... 目录1. 安装QEMU环境2. 准备Ubuntu 24.04镜像3. 启动QEMU安装Ubuntu4
阅读更多...
使用Python和OpenCV库实现实时颜色识别系统

使用Python和OpenCV库实现实时颜色识别系统

《使用Python和OpenCV库实现实时颜色识别系统》：本文主要介绍使用Python和OpenCV库实现的实时颜色识别系统,这个系统能够通过摄像头捕捉视频流,并在视频中指定区域内识别主要颜色（红... 目录一、引言二、系统概述三、代码解析1. 导入库2. 颜色识别函数3. 主程序循环四、HSV色彩空间详解
阅读更多...
Windows下C++使用SQLitede的操作过程

Windows下C++使用SQLitede的操作过程

《Windows下C++使用SQLitede的操作过程》本文介绍了Windows下C++使用SQLite的安装配置、CppSQLite库封装优势、核心功能（如数据库连接、事务管理）、跨平台支持及性能优... 目录Windows下C++使用SQLite1、安装2、代码示例CppSQLite：C++轻松操作SQ
阅读更多...
Python常用命令提示符使用方法详解

Python常用命令提示符使用方法详解

《Python常用命令提示符使用方法详解》在学习python的过程中,我们需要用到命令提示符(CMD)进行环境的配置,：本文主要介绍Python常用命令提示符使用方法的相关资料,文中通过代码介绍的... 目录一、python环境基础命令【Windows】1、检查Python是否安装2、 查看Python的安
阅读更多...
苹果macOS 26 Tahoe主题功能大升级:可定制图标/高亮文本/文件夹颜色

苹果macOS 26 Tahoe主题功能大升级:可定制图标/高亮文本/文件夹颜色

《苹果macOS26Tahoe主题功能大升级:可定制图标/高亮文本/文件夹颜色》在整体系统设计方面，macOS26采用了全新的玻璃质感视觉风格，应用于Dock栏、应用图标以及桌面小部件等多个界面... 科技媒体 MACRumors 昨日（6 月 13 日）发布博文，报道称在 macOS 26 Tahoe 中
阅读更多...
Python并行处理实战之如何使用ProcessPoolExecutor加速计算

Python并行处理实战之如何使用ProcessPoolExecutor加速计算

《Python并行处理实战之如何使用ProcessPoolExecutor加速计算》Python提供了多种并行处理的方式,其中concurrent.futures模块的ProcessPoolExecu... 目录简介完整代码示例代码解释1. 导入必要的模块2. 定义处理函数3. 主函数4. 生成数字列表5.
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2