利用原生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理解也较困难,为了让大家回 ...
- 70.JS---利用原生js做手机端网页自适应解决方案rem布局
利用原生js做手机端网页自适应解决方案rem布局 刚开始我用的是下面这段代码,然后js通过外部链接引入,最后每次用手机刷新网页的时候都会出现缩略图 function getRem(pwidth, pr ...
- HTML 5 +CSS3 + 原生js 做（雪花全屏飘落 + 3d旋转图）
原文:HTML 5 +CSS3 + 原生js 做(雪花全屏飘落 + 3d旋转图) 3d旋转图:主要用css3中transform属性中的rotate,translate;以及用来做舞台效果的 pers ...
- 利用原生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做单页应用
最近在公司接到一个需求,里面有一个三级跳转.类似于选择地址的时候,选择的顺序是:省份->市->区.如果分三个页面跳转,那么体验非常不好,如果引入其他框架做成单页应用,又比较麻烦.所以可以用 ...
- 原生js做h5小游戏之打砖块
前言 首先,先说明一下做这个系列的目的:其实主要源于博主希望熟练使用 canvas 的相关 api ,同时对小游戏的实现逻辑比较感兴趣,所以希望通过这一系列的小游戏来提升自身编程能力:关于 es6 语 ...
- 利用原生JS判断组合键
<script type="text/javascript"> var isAlt = 0; var isEnt = 0; document.onkeydown = f ...
随机推荐
- 在微信小程序的JS脚本中使用Promise来优化函数处理
在我们传统的Javascript开发函数编写中,我们习惯了回调函数的处理,不过随着回调函数的增多,以及异步处理的复杂性等原因,代码越来越难读,因此诞生了使用Promise来优化JS函数处理的需求,引入 ...
- asp.net mvc 接入美圣短信 验证码发送
第1步:登录美圣短信控制台 http://www.rcscloud.cn/hy/HY_ZH/login 账号:******* 密码:******* http://www.rcscloud.cn/com ...
- Form表单提交，Ajax请求，$http请求的区别
做过前端同学想必都避免不了要和后台server打交道.而以下这三种与后台交互的方式想必大家都不陌生. Form表单提交,Ajax请求,Angular的$http请求 以前一直搞不清楚什么时候应该用哪种 ...
- JAVA通过I/O流复制文件
JAVA通过I/O流复制文件 本文是对字节流操作,可以多音频视频文件进行操作,亲测有效. 个人感觉这个东西就是靠记的, 没什么好解释的,,,, import java.io.File; import ...
- .NET Core多平台开发体验[1]: Windows
微软在千禧年推出 .NET战略,并在两年后推出第一个版本的.NET Framework和IDE(Visual Studio.NET 2002,后来改名为Visual Studio),如果你是一个资深的 ...
- 使用jmeter执行多条sql语句
注意2个地方 1. [JDBC Connection Configuration] 在配置DataBase URL的时候,加上allowMultiQueries=true参数如: jdbc:MySQL ...
- spring mvc:事务引起的try／catch失效
在测试一个接口时,发现一个奇怪的现象:该接口使用@ResponseBody注解返回json格式数据,并且使用try/catch包括全部逻辑代码,debug后发现返回数据没有任何错误,只包含一段因产生异 ...
- chrome开发工具指南（五）
Main Menu Click More to open the Main Menu. Settings To open Settings, do one of the following: Pre ...
- ios 初体验<UILabel控件>
创建控件: UILabel *label = [[UILabel alloc]init]; //设置控件大小 label.frame = CGRectMake(50,100,300,40);//分别为 ...
- 遇到的一些Jquery函数
jQuery.extend() jQuery.merge():函数用于合并两个数组内容到第一个数组. <script> $(function () { ,,], [,,] ...