利用原生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 ...
随机推荐
- BotVS开发基础—2.11 API绘制图表
代码 import time chart = { '__isStock': True, # 标记是否为一般图表,有兴趣的可以改成 false 运行看看. 'tooltip': {'xDateForma ...
- 美国总统大选，黑客组织“匿名者”（Anonymous）也来凑热闹
美国总统大选,黑客组织"匿名者"(Anonymous)也来凑热闹 黑客组织"匿名者"向美国总统共和党候选人唐纳德•特朗普宣战,发誓将从4月1日开始向其发动大规模 ...
- python在windows和linux环境的进程对比
1.fork进程:(1)在windows系统中不可以用fork来创建进程,linux可以,但是创建大量进程使用很不方便. 2.Process进程: import multiprocessing as ...
- String 操作
String nbbms ="col_1_1_1_1,col_2_2_2_@,"; @ 实现将最后一个逗号去掉:从第一个字符串到最后一个逗号之前的字符串截取[java] Strin ...
- 在Python的Flask框架下Address already in use [地址已在使用中]
出现这种错误提示, 说明你已经有一个流程绑定到默认端口(5000).如果您之前已经运行过相同的模块,则很可能该进程仍然绑定到端口. 首先使用端口窗口查找进程 : sudo lsof - i : 5 ...
- 为什么可以通过URL来调起APP - URL Scheme和Intent
在手机浏览器中可以通过URL调起APP是不是很神奇?这篇文章就告诉你为什么. URL Scheme 先从前端能接触到的URL Scheme分析一下 丢wiki:https://en.wikipedia ...
- Java线程：线程栈模型
要理解线程调度的原理,以及线程执行过程,必须理解线程栈模型. 线程栈是指某时刻时内存中线程调度的栈信息,当前调用的方法总是位于栈顶.线程栈的内容是随着程序的运行动态变化的,因此研究线程栈必须选择一个运 ...
- Rsync for windows
说到电脑,我真是一屋子都是. 从房间到大厅,就已经有5台.这还没包括服务器. 虽然这5台电脑我最常用的也只是2~3台.其他的不是给朋友们来坐的时候打打游戏.就是给妈妈上网看看报纸. 不过我相信很多朋友 ...
- 团队作业8——第二次项目冲刺（Beta阶段）第三天
BETA阶段冲刺第三天 1.当天站立式会议 2.每个人的工作 (1)昨天已完成的工作: 编写页面讨论 (2)今天计划完成的工作: 完成编写页面 (3)工作中遇到的困难: 验证码正确度 (4)每个人的贡 ...
- 201521123117 《Java程序设计》第1周学习总结
第一周学习总结: 这周开始学习了Java,因为之前C语言没学好所以看部分东西还是一头雾水,但是在查阅资料和同学的帮助开始对Java有了一些了解,这周主要学习了Java的诞生发展以及运用包括JVN/JR ...