h5动画网站,电子商务是学什么,微信小商店怎么开通,公司简介20 50字摘要#xff1a;数据管理平台在当今社会中运用十分广泛#xff0c;我们在应用过程中#xff0c;要对数据进行存储#xff0c;管理#xff0c;以及删除查询等操作#xff0c;而我们在实际设计的时候#xff0c;大牛们大多用到的是JQuery#xff0c;而小白对jq理解也较困…摘要数据管理平台在当今社会中运用十分广泛我们在应用过程中要对数据进行存储管理以及删除查询等操作而我们在实际设计的时候大牛们大多用到的是JQuery而小白对jq理解也较困难为了让大家回顾一下原生js也为了让初学者对js熟练掌握我们利用js进行设计里面涉及到函数事件对象已经存储代码如下 !DOCTYPE html
htmlheadmeta charsetUTF-8title/titlestyle typetext/css.tr:hover {background-color: #ccc;}/style/headbody别名(key):input type name idname value /br / 网站名input type idWebname /br / 网址input type idWeb /br /input typebutton name id value点击提交信息 onclickfunc1() /br /h4网站登录/h4 网站名input type idloginName /br / 网址 网址 input type idloginPwd /br /button onclicklogin()登录/buttonh1已经储存的网站/h1input typebutton value删除网站 onclickdelSite() /br /input typetext placeholder别名 idsearch1 /input typetext placeholder网站名 idsearch2 /input typetext placeholder网址 idsearch3 /input typebutton name id value查询网站 onclicksearchSite() /table stylewidth: 500px;border-collapse: collapse; border1 idtabletheadtrthinput typecheckbox idcheckAll onclickcheckAll() //thth序号/thth别名/thth网站名/thth网站/th/tr/theadtbody idtbody/tbody/table!--div stylewidth: 100vw;height: 100vh;background-color: blue;position: absolute; top: 0px;left: 0px;div id stylewidth: 300px;height: 200px;background-color: red;/div/div--别名(key):input type name idname1 value /br / 网站名input type idWebname1 /br / 网址input type idWeb1 /br /input typebutton name id value修改确定 onclickdateSites1() /script typetext/javascript srcjs/菜鸟教程.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 classtr οnclickchooseInput( index ) οndblclickdateSites( index )tdinput typecheckbox value index classcheckbox//tdtd (index 1) /tdtd item.name /tdtd item.Webname /tdtd 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;}}//点击全选的inputfunction 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 classtr οnclickchooseInput( index )td aligncenterinput typecheckbox value item.index classcheckbox //tdtd (index 1) /tdtd item.name /tdtd item.Webname /tdtd 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进行设置。弄清楚这段代码初学者会有很大进步。转载于:https://www.cnblogs.com/zhangxinlei/p/7501168.html
