利用原生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 ...
随机推荐
- Vim 命令图解-Gvim使用笔记
Vim 命令图解-Gvim使用笔记... 参考的网址:http://blog.vgod.tw/wp-content/uploads/2014/08/vgod-vim-cheat-sheet-full. ...
- 把elipse非maven的Struts2+Spring+Ibatis项目导入Idea中
1.按图示操作 2.选中自己要得到的项目 3.之后设定得到的项目放在哪里 项目得到之后,对项目点击右键Open Module Settings,点击Project,设置生成的编译文件存储路径 4.单击 ...
- maven 搭建 SpringMVC + MyBatis(1)
·做了两年多Java Web一多半的项目都是SSM架构的,只搭建过两次,趁着周末做个总结整理. Eclipse搭建Maven项目 1.new project --> Maven project ...
- JSP的getRequestDispatcher()与sendRedirect()的区别
getRequestDispatcher()与sendRedirect()的区别 1.request.getRequestDispatcher()是请求转发,前后页面共享一个request ; r ...
- RSA算法介绍
详见:http://blog.yemou.net/article/query/info/tytfjhfascvhzxcyt279 2.1.1 算法实现 首先, 找出三个数, p, q, r,其 ...
- Entity Framework Core 2.0 数据库迁移
看见过几篇其他大神写的关于EFCore2.0的文章.本人有点小白,一开始看文档的时候除了一些基本操作外其他部分几乎没有读懂,我估计会有一部分人跟我一样,因为人家读懂了的早就懂了. 在这里我写一下我自己 ...
- MSH：一个简单SH工具实现
本文将分为不同的Part,分别实现Shell的一部分功能. msh从CSAPP的SHLAB出发,逐渐完善SHELL功能,并移植到自己的OS上. Github: https://github.com/H ...
- Membership ——入门基础
Membership是ASP.NET为我们提供的一套验证和存储用户凭证的框架.它可以帮助我们快速的开发用户登录.管理以及权限验证相关的模块,很多人可能会说Membership开发起来确实很快,但是总是 ...
- 【Java线程】Java内存模型总结
学习资料:http://www.infoq.com/cn/articles/Java-memory-model-1 Java的并发采用的是共享内存模型(而非消息传递模型),线程之间共享程序的公共状态, ...
- 201521123091 《Java程序设计》第8周学习总结
Java 第八周总结 第八周的作业. 目录 1.本章学习总结 2.Java Q&A 3.码云上代码提交记录及PTA实验总结 1.本章学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结集 ...