利用原生js做数据管理平台

摘要：数据管理平台在当今社会中运用十分广泛，我们在应用过程中，要对数据进行存储，管理，以及删除查询等操作，而我们在实际设计的时候，大牛们大多用到的是JQuery，而小白对jq理解也较困难，为了让大家回顾一下原生js，也为了让初学者对js熟练掌握，我们利用js进行设计，里面涉及到函数，事件，对象，已经存储，代码如下

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style type="text/css">.tr:hover {background-color: #ccc;}</style></head><body>别名(key):<input type="" name="" id="name" value="" /><br /> 网站名：<input type="" id="Webname" /><br /> 网址：<input type="" id="Web" /><br /><input type="button" name="" id="" value="点击提交信息" onclick="func1()" /><br /><h4>网站登录</h4> 网站名：<input type="" id="loginName" /><br /> 网址： 网址 <input type="" id="loginPwd" /><br /><button onclick="login()">登录</button><h1>已经储存的网站</h1><input type="button" value="删除网站" onclick="delSite()" /><br /><input type="text" placeholder="别名" id="search1" /><input type="text" placeholder="网站名" id="search2" /><input type="text" placeholder="网址" id="search3" /><input type="button" name="" id="" value="查询网站" onclick="searchSite()" /><table style="width: 500px;border-collapse: collapse;" border="1" id="table"><thead><tr><th><input type="checkbox" id="checkAll" onclick="checkAll()" /></th><th>序号</th><th>别名</th><th>网站名</th><th>网站</th></tr></thead><tbody id="tbody"></tbody></table><!--<div style="width: 100vw;height: 100vh;background-color: blue;position: absolute; top: 0px;left: 0px;"><div id=""   style="width: 300px;height: 200px;background-color: red;"></div></div>-->别名(key):<input type="" name="" id="name1" value="" /><br /> 网站名：<input type="" id="Webname1" /><br /> 网址：<input type="" id="Web1" /><br /><input type="button" name="" id="" value="修改确定" onclick="dateSites1()" /><script type="text/javascript" src="js/菜鸟教程.js"></script></body></html>

//注册function func1() {var name = document.getElementById("name").value;var Webname = document.getElementById("Webname").value;var Web = document.getElementById("Web").value;var site = {name: name,Webname: Webname,Web: Web}if(localStorage.sites == undefined) {var arr = [];} else {var str = localStorage.sites;var arr = JSON.parse(str);}for(var i = 0; i < arr.length; i++) {if(arr[i].name == name) {alert("姓名已经注册");return;}}arr.push(site);var str = JSON.stringify(arr);localStorage.sites = str;alert("储存完毕");showAllSite();
}//展示
function showAllSite() {if(localStorage.sites == undefined) {return;}var str = localStorage.sites;var arr = JSON.parse(str);var html = "";arr.forEach(function(item, index) {html += "<tr class='tr' οnclick='chooseInput(" + index + ")'   οndblclick='dateSites(" + index + ")'><td><input type='checkbox' value='" + index + "' class='checkbox'/></td><td>" + (index + 1) + "</td><td>" + item.name + "</td><td>" + item.Webname + "</td><td>" + item.Web + "</td></tr>";});var tbody = document.getElementById("tbody");tbody.innerHTML = html;
}
//进来刷新
window.onload = function() {showAllSite();
}
//登录
function login() {var loginName = document.getElementById("loginName").value;var loginPwd = document.getElementById("loginPwd").value;var str = localStorage.sites ? localStorage.sites : "[]";var arr = JSON.parse(str);for(var i = 0; i < arr.length; i++) {if(arr[i].Webname == loginName && arr[i].Web == loginPwd) {alert("登录成功！");var loginUser = JSON.stringify(arr[i]);sessionStorage.loginUser = loginUser;location = "跳转.html";return;}}alert("登录失败！！！");}/*window.onload = function(){var div1 = document.getElementById("div11");div1.onmousedown = function(ev){var oevent = ev || event;var distanceX = oevent.clientX - div1.offsetLeft;var distanceY = oevent.clientY - div1.offsetTop;document.onmousemove = function(ev){var oevent = ev || event;div1.style.left = oevent.clientX - distanceX + 'px';div1.style.top = oevent.clientY - distanceY + 'px'; };document.onmouseup = function(){document.onmousemove = null;document.onmouseup = null;};}
};*//*单击tr选中tr里面的input*/
function chooseInput(index) {var checkboxs = document.getElementsByClassName("checkbox")[index];if(checkboxs.checked) {checkboxs.checked = false;} else {checkboxs.checked = true;}}//点击全选的inputfunction checkAll() {var thisInput = document.getElementById("checkAll");var checkboxs = document.getElementsByClassName("checkbox");for(var i = 0; i < checkboxs.length; i++) {if(thisInput.checked) {checkboxs[i].checked = true;} else {checkboxs[i].checked = false;}}
}/*删除*/function delSite() {var checkboxs = document.getElementsByClassName("checkbox");var count = 0;var str = localStorage.sites;var arr = JSON.parse(str);for(var i = 0; i < checkboxs.length; i++) {if(checkboxs[i].checked) {var index = parseInt(checkboxs[i].value) - count;arr.splice(index, 1);count++;}}localStorage.sites = JSON.stringify(arr);if(count == 0) {alert("请至少选择一项");} else {alert("删除成功，删除了" + count + "项");showAllSite();}}

/** 查询网站*/
function searchSite() {var name = document.getElementById("search1").value;var Webname = document.getElementById("search2").value;var Web = document.getElementById("search3").value;var str = localStorage.sites;var arr = JSON.parse(str);var newArr = []; //用于装载，符合条件的数据for(var i = 0; i < arr.length; i++) {var isWzm = true,isBm = true,isWz = true;if(arr[i].name.indexOf(name) == -1 && name != "") {isWzm = false;}if(arr[i].Webname.indexOf(Webname) == -1 && Webname != "") {isBm = false;}if(arr[i].Web != Web && Web != "") {isWz = false;}if(isWzm && isBm && isWz) {arr[i].index = i; // 把查询出的数据，在localStorage里面的下标，暂存到新数组的每个对象的index属性上
            newArr.push(arr[i]);}}var html = "";console.log(newArr);newArr.forEach(function(item, index) {html += "<tr class='tr' οnclick='chooseInput(" + index + ")'><td align='center'><input type='checkbox' value='" + item.index + "' class='checkbox' /></td><td>" + (index + 1) + "</td><td>" + item.name + "</td><td>" + item.Webname + "</td><td>" + item.Web + "</td></tr>";});var tbody = document.getElementById("tbody");tbody.innerHTML = html;}//修改网站
var updateIndex = 0;function dateSites(index) {alert(index);var str = localStorage.sites;var arr = JSON.parse(str);document.getElementById("name1").value = arr[index].name;document.getElementById("Webname1").value = arr[index].Webname;document.getElementById("Web1").value = arr[index].Web;updateIndex = index;}function dateSites1() {var str = localStorage.sites;var arr = JSON.parse(str);var name = document.getElementById("name1").value;var Webname = document.getElementById("Webname1").value;var Web = document.getElementById("Web1").value;for(var i = 0; i < arr.length; i++) {if(arr[i].name == name) {alert("网站名已经注册，请更换网站名");return;}}var site = {name: name,Webname: Webname,Web: Web,};arr.splice(updateIndex, 1, site);localStorage.sites = JSON.stringify(arr);showAllSite();
}

代码较长，对于各部分，已经用注释给分开，而css对于功能影响不大，因此我们没有对css进行设置。弄清楚这段代码，初学者会有很大进步。

转载于:https://www.cnblogs.com/zhangxinlei/p/7501168.html

利用原生js做数据管理平台相关推荐

打砖块小游戏php程序,利用原生js实现html5打砖块小游戏（代码示例）
本篇文章给大家通过代码示例介绍一下利用原生js实现html5打砖块小游戏的方法.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. 前言 PS:本次项目中使用了大量 es6 语法,故对于 ...
html 监听input输入框的值,利用原生JS实时监听input框输入值
利用原生JS实时监听input框输入值原生JS中可以使用oninput,onpropertychange,onchange oninput,onpropertychange,onchange的用法 ...
如何用原生jS做购物车
如何用原生jS做购物车今天给大家分享如何用原生js做购物车,我们都逛过淘宝.京东这样购物网站,像这种购物网站,购物车是肯定少不了的 ,我们在天猫上购物,一开始一个页面有很多种商品,然后你在这里面看中 ...
html 对勾单选框,利用原生js和jQuery实现单选框的勾选和取消操作的方法
根据以下的Demo,大概就可以看的明白 Demo: window.onload = function(){ var dom_a = document.getElementById('a1'); var ...
原生js做打地鼠游戏
学原生js的语法其实是容易的,最主要的练习逻辑思维.对于刚刚学完js的语法的我来说,写这个打地鼠游戏真的花费了我一整天的时间.整体感觉写出来的js代码,其实就是平时练习的一些小案例的代码拼起来的,js ...
利用原生Js制作的滑动按钮
利用Js制作的滑动按钮首先贴上效果图再贴上源码 <!DOCTYPE html> <html lang="en"> <head><met ...
原生js做h5小游戏之打砖块
前言首先,先说明一下做这个系列的目的:其实主要源于博主希望熟练使用 canvas 的相关 api ,同时对小游戏的实现逻辑比较感兴趣,所以希望通过这一系列的小游戏来提升自身编程能力:关于 es6 语 ...
【干货】原生js做的一维数组对象，二维数组对象的模糊查询（前端网备份）...
最重要的是二维数组小程序通讯录(student) 后台的数据格式 wxml <input bindconfirm="search" bindinput="bind ...
原生js做购物车全选选中商品显示价格和小计的计算
html代码 <div class="contain"><table class="table table-bordered">< ...

利用原生js做数据管理平台

利用原生js做数据管理平台相关推荐

最新文章

热门文章