利用原生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 ...
随机推荐
- JSP的四个作用域
JSP的作用域一般是对于变量而言的,描述的是变量在某处是否有效(可用) JSP的四个作用域 名称 作用域 page 当前页面有效 request 当前请求中有 ...
- 入侵拿下DVBBS php官网详细过程（图）
几 个月前,DVBBS php2.0暴了一个可以直接读出管理员密码的sql注入漏洞,当时这个漏洞出来的时候,我看的心痒,怎么还会有这么弱智的漏洞,DVBBS php2.0这套代码我还没仔细看过,于是5 ...
- Sass之Compass学习笔记
compass Compass是Sass的工具库,就好像jQuery是js的库一样. sass有了compass的配合,就会更加事半功倍. Sass本身只是一个编译器,Compass在它的基础上,封装 ...
- hdu4675 GCD of Sequence
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=4675 题意: 给定一个长度为n的序列a,且 1<=a[i]<=m,求分别有多少个序列b,使 ...
- [2017-08-09]一则使用WinDbg工具调试iis进程调查内存占用过高的案例
最近遇到一个奇葩内存问题,跟了三四天,把Windbg玩熟了,所以打算分享下. 症状简介 我们团队的DEV开发环境只有一台4核16G的win2012r2. 这台服务器上装了SqlServer.TFS(项 ...
- postman 第3节 API请求和查看响应结果(转)
请求 postman支持很多请求类型,界面左侧可以看到请求类型:get.post.put.patch等,右侧是发送和保存按钮,下方是请求支持的认证方式.信息头.信息体.私有脚本和测试结果.下面我们介绍 ...
- Ubuntu Docker Registry 搭建私有仓库
服务器版本 Ubuntu 16.04 LTS. 安装命令: $ docker run -d -v /opt/registry:/var/lib/registry -p 5000:5000 --rest ...
- RESTful学习记录
1.1 什么是RESTful RESTful架构,就是目前最流行的一种互联网软件架构.它结构清晰.符合标准.易于理解.扩展方便,所以正得到越来越多网站的采用. RESTful(即Representat ...
- JavaScript学习日志（六）：事件
这篇随笔,深恶痛绝,敲到快结束的时候,凌晨00:19,突然闪退,也不知道是Mac的原因还是chrome的原因,重新打开的时候,以为自动保存有效果,心想没关系,结果他么的只保存了四分之一,WTF?!!! ...
- PHP初入，div知识点整理（特效&字体等元素的使用整理）
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>& ...