利用原生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 ...
随机推荐
- java注释中使用注解@see
缘起 在写java时,有时需要写注释,而为了更好的描述,需要引用和参考其他代码.为了让阅读者更好的体验,javadoc中支持链接跳转,这就需要用到注解@see. @see用法 注解@see可以在注释中 ...
- ThinkPHP系统变量，常量，序列化，反序列化，缓存
变量的输出: 在模板中输出一个变量有两种形式:{$list.name} {$list[‘name’]} 在模板中可以使用系统变量,以$Think.开头 系统变量:(举例选几个) 获得服务器的IP地址: ...
- HTML5无插件多媒体Media——音频audio与视频video
文件日志地址 http://blog.csdn.net/q1056843325/article/details/60336226 音频与视频现在已经变得越来越流行 各个网站为了保证跨浏览器的兼容性 ...
- lnmp架构（第一篇）
lnmp 架构 第一篇 nginx 源码安装 nginx的安装包:nginx-1.12.0.tar.gz 建议安装前的修改: 在nginx的解压包中修改文件nginx-1.12.0/src/core/ ...
- Just for Today
Just for today I will try to live through this day only and not tackle my whole life problem at once ...
- python进阶学习（四）
在使用多线程之前,我们首页要理解什么是进程和线程. 什么是进程? 计算机程序只不过是磁盘中可执行的,二进制(或其它类型)的数据.它们只有在被读取到内存中,被操作系统调用的时候才开始它们的生命期.进程( ...
- 基于redis的延迟消息队列设计
需求背景 用户下订单成功之后隔20分钟给用户发送上门服务通知短信 订单完成一个小时之后通知用户对上门服务进行评价 业务执行失败之后隔10分钟重试一次 类似的场景比较多 简单的处理方式就是使用定时任务 ...
- 微信H5支付：网络环境未能通过安全验证，请稍后再试。解决办法（PHP版）
前(tu)言(cao) (这段前言纯属吐槽,着急解决问题的小伙伴,赶紧看正文吧) 最近做了支付宝和微信支付,先做的是PC端网站的支付,就是出个二维码,然后手机扫描支付,当然支付宝在扫码页面支持登录支付 ...
- BeautifulSoup练习第一节
一.pip install beautilfulsoup4 二.主要使用html.parser这个python标准库 三.打印首页博客的时间.打印摘要 # coding:utf-8from bs4 i ...
- SpringMVC入门第二天
SpringMVC第二天 1. 回顾 1.Springmvc介绍? Springmvc是Spring公司 2.Springmvc入门程序 第一步:Web工程 第二步:导Jar包 第三步:web.x ...