利用原生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' onclick='chooseInput(" + index + ")' ondblclick='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; } } //点击全选的input function 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' onclick='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进行设置。弄清楚这段代码,初学者会有很大进步。
利用原生js制做数据管理平台,适合初学者学习的更多相关文章
- 利用原生js做数据管理平台
摘要:数据管理平台在当今社会中运用十分广泛,我们在应用过程中,要对数据进行存储,管理,以及删除查询等操作,而我们在实际设计的时候,大牛们大多用到的是JQuery,而小白对jq理解也较困难,为了让大家回 ...
- 利用原生JS实现类似浏览器查找高亮功能(转载)
利用原生JS实现类似浏览器查找高亮功能 在完成 Navify 时,增加一个类似浏览器ctrl+f查找并该高亮的功能,在此进行一点总结: 需求 在.content中有许多.box,需要在.box中找出搜 ...
- 利用原生JS实现网页1920banner图滚动效果
内容描述:随着PC设备硬件性能的进步和分辨率的不断提高,现在主流网站逐渐开始采用1920banner图,为适应这一趋势,博主设计了1920banner图的滚动效果,代码利用了原生JS实现了1920ba ...
- <<< 网页中如何利用原生js和jquery储存cookie
javascript当中的cookie机制,使应用达到了真正的全局变量的要求,cookie是浏览器提供的一种机制,它将document 对象的cookie属性提供给JavaScript.可以由Java ...
- 利用原生JS判断组合键
<script type="text/javascript"> var isAlt = 0; var isEnt = 0; document.onkeydown = f ...
- 利用原生js的Dom操作实现简单的ToDoList的效果
效果如下: 前端及js代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charse ...
- 关于如何利用原生js动态给一个空对象添加属性以及属性值
首先,回忆一下,访问对象属性一共有两种方法:点获取法和方括号获取法.而我们最常用的就是点获取法了.但是当我们遇到需要给对象动态添加属性和属性值时,点获取法好像就不太好用了,尤其是我们不知道属性名的时候 ...
- 利用原生JS实时监听input框输入值
传送门https://www.cnblogs.com/lantinggumo/p/7636715.html 传送门https://www.cnblogs.com/nailc/p/8572226.htm ...
- Python3 适合初学者学习的银行账户登录系统
一.所用知识点: 1. for循环与if判断的结合 2. %s占位符的使用 3. 辅助标志的使用(标志位) 4. break的使用 二.代码示例: ''' 银行登录系统 ''' uname = &qu ...
随机推荐
- 2017-4-25/设计缓存(LFU)
1. 恒定缓存性能有哪些因素? 命中率.缓存更新策略.缓存最大数据量. 命中率:指请求缓存次数和缓存返回正确结果次数的比例.比例越高,缓存的使用率越高,用来衡量缓存机智的好坏和效率.如果数据频繁更新, ...
- 分享:SringBuffer与String的区别
·作为Java中最为基础的部分,在Java的学习过程中,就一定会学习到字符串,其中String类作为字符串.并且在Java所有的程序中是使用字符串都是使用String类去实现. 两者存在一定的通性,都 ...
- ABP+AdminLTE+Bootstrap Table权限管理系统第二节--在ABP的基础做数据库脚本处理
返回总目录:ABP+AdminLTE+Bootstrap Table权限管理系统一期 第一点,上一篇文章中我们讲到codefirst中一些问题包括如图,codefirst在每次执行命令的时候会生成新的 ...
- C#使用Xamarin开发可移植移动应用进阶篇(8.打包生成安卓APK并精简大小),附源码
前言 系列目录 C#使用Xamarin开发可移植移动应用目录 源码地址:https://github.com/l2999019/DemoApp 可以Star一下,随意 - - 说点什么.. 嗯,前面讲 ...
- ASP.NET Core开发期间部署到IIS自定义主机域名并附加进程调试
在.NET Framework环境下,我们经常会这么做 把一个web项目不经过发布直接部署到IIS里去,配置上主机名,修改一下hosts文件,就可以用自定义的域名来访问我们的应用程序,使用附加到进程( ...
- Java - 9个处理异常的最佳准则
其实工作这么久了一直都没搞清楚到底如何来处理异常,偶然看到一篇外文感觉还不错,便把它翻译了下来,原文链接位于本文末尾处. 在java中处理异常并不是一件简单的事,不止初学者觉得它难以理解甚至连有经验的 ...
- 高新技术---枚举及部分JDK1.5新特性
第一讲 枚举 一.概述 这里说的枚举,不是集合vector的特有枚举迭代器,而是JDK1.5的一个新特性.之所以单独拿它开刷,是这个知识点比较重要,同时相对来说比较难理解一些. 为什么要有枚举 ...
- Bash脚本编写初体验
上周例会的时候,冷不丁的接到了维护原有的安装脚本和编写升级.卸载脚本的任务,PM和几个同事一本正经的说,一天甚至30分钟就可以精通shell脚本编写,哪怕没有语言基础也可以. 当然,作为有着C++.P ...
- Ext.data.Store添加动态参数
多条件查询页面的参数都是动态的,并且我们通常还会有默认加载页面.此时,动态添加参数非常重要,其中baseparam是解决问题的关键. @ 将查询条件定义为一个全局变量 var param_01 = & ...
- TF-IDF学习(python实现)
从大一开始接触TF-IDF,一直觉得这个特别简单,,但是图样图森破,,, 即使现在来说,也似乎并非完全搞懂 核心思想: 计算词语在该文章中权重,与词语出现次数和词语价值有关 词语出现次数,重复即强调, ...