JavaScript 网页购物车项目

article/2025/10/11 0:55:24

  今天是JavaScript的一个汇总，最近小编把自己曾经写过的JavaScript 网页购物车项目给整理了一下，大家可以看一下，然后自己也可以写一个网页购物车项目噢，然后我们的JavaScript的学习也到此结束啦！下周开始给大家更新 新的课程。

一.登录界面

登录界面：1.账号：必须11位数字，以1开头

                  2.密码：6-8位数字

                  3.验证码：点击验证码可以切换

                  4.点注册注册账号

                   5.登录成功后跳转到商城界面

下方是登录界面的图片 ，登录的界面代码放在下方给大家

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>登录界面</title><style>/* 登录 *//* 设置背景图片大小 */body{/* 设置背景 */background-image: url(img/33.gif);background-size:  cover;width: 100%;height: 100%;				}/* 设置表单 */form{/* rgba透明色 */background: rgba(255,255,255,.1);/*绝对布局可四处移动,内容有多大就多大 */position:absolute;padding: 30px 50px;left:55%;top:40%;border-radius: 10px;box-shadow: 3px 6px 10px black;}#zcForm{position:absolute;left:55%;top:30%;}/* 设置input标签 */input{/* 设置边框 */border : 1px solid gray;border-radius:20px;/* 调节边框的大小 */height:25px;width:200px;}.a{height:25px;width:100px;}.b{border-radius:0px;height:25px;width:45px;/* 间隔距离 */margin:0px 20px;}button{margin:20px 0px;width:70px;height:30px;}/* 注册字体 */.zc{position:absolute;left:80%}.bu{background:white;border-radius:10px;}/* 注册 */</style></head><body><form id="dlForm" onsubmit="return  dlUser()"><table><!-- 标题 --><tr><!-- style="text-align:center"设置居中 --><td style="text-align:center" colspan="2"><h3>欢迎来到漫野</h3></td> </tr><!-- 用户名 --><tr><td><img src="img/5.png" width="50px" height="50px"></td> <td><input id="userName" placeholder="请输入账号"></td> </tr><!-- 密码 --><tr><td><img src="img/密码.png" width="40px" height="40px"></td> <td><input id="userPwd" placeholder="请输入密码"></td> </tr><!-- 验证码 --><tr><td><img src="img/验证码.png" width="40px" height="40px"></td><td><input class="a" id="userYzm"><!-- readonly不能修改 --><input id="yzm1" class="b" readonly onclick="yzm()"></td></tr><!-- 登录按钮 --><tr><td colspan="2" style="text-align:center"><button class="bu"><a id="dl" onclick="dlUser()">登录</a></button></td></tr><!-- 注册账号 --><tr><td colspan="2"><a class="zc" onclick="zcUser()">注册账号</a></td></tr></table></form><!--------------------------------------------------------------------------------------><!-- 注册表单 --><form id="zcForm" onsubmit="return zcUser()"><table><!-- 标题 --><tr><td colspan="2" style="text-align:center"><h3>注册漫野账号</h3></td></tr><!-- 用户名 --><tr><td><img src="img/5.png" width="50px" height="50px"></td><td ><input id="zcName" placeholder="请输入注册账号"></td></tr><!-- 密码 --><tr><td><img src="img/密码.png" width="40px" height="40px"></td><td><input id="zcPwd" placeholder="请输入注册密码"></td></tr><!-- 邮箱--><tr><td><img src="img/邮箱.png" width="40px" height="40px"></td><td ><input id="zcEm" placeholder="请输入注册邮箱号"></td></tr><!-- 验证码 --><tr><td><img src="img/验证码.png" width="40px" height="40px"></td><td><input class="a" id="zcYzm"><!-- readonly不能修改 --><input class="b" readonly onclick="yzm()" id="zcYz"></td></tr><!-- 注册按钮 --><tr><td colspan="2" style="text-align:center"><button text="button" onclick="zcUser()"  class="bu">注册</button></td></tr><tr><td colspan="2"><span onclick="balck()">返回</span></td></tr></table></form><!----------------------------------------------------------------------------------------- -->	<script>// 登录方法// 验证码方法window.onload=()=>{zcForm.style.display="none";yzm();}//点击验证码切换验证码function yzm(){var yz=document.getElementsByClassName("b");var i=Math.floor(Math.random()*10)var j=Math.floor(Math.random()*10)var k=Math.floor(Math.random()*10)var l=Math.floor(Math.random()*10)for(let f of yz){f.value=i+""+j+""+k+""+l+"";}}// 验证用户名 用户密码 验证码是否满足要求，满足的话function dlUser(){// 拿到用户 密码 验证码的值var d1=userName.value;var d2=userPwd.value;var d3=userYzm.value;// 拿到验证框的值var  yzm=yzm1.value;// 正则var rexName=/^\d{11}$/;var rexPwd=/^\w{6,8}$/;// 判断用户名和用户密码 验证码是否满足验证if(rexName.test(d1)&&rexPwd.test(d2)&&d3==yzm){// 登录成功以后跳转界面window.open("main.html");return true;}else{alert("用户账号和密码或者验证码不正确");return false;}}	// 注册的方法// 1.覆盖原本的表单function zcUser(){// 登录界面不显示dlForm.style.display="none";// 注册界面显示出来zcForm.style.display="block";// 拿到用户框，密码框，邮箱，验证码；var name=zcName.value;var pwd=zcPwd.value;var email=zcEm.value;var yzm=zcYzm.value;// 拿到验证码的框里的值var zcyzm=zcYz.value;// 正则匹配var rexName=/^\d{11}$/;var rexPwd=/^\w{6,8}$/;var rexEm=/^\w+[.]\w+@\w+[.]\w+$/;if(rexName.test(name)&&rexPwd.test(pwd)&&rexEm.test(email)&&yzm==zcyzm){return true;}else{	 return false;}}function balck(){// 登录界面显示dlForm.style.display="block";// 注册界面不显示出来zcForm.style.display="none";}</script></body>
</html>

二.商城中心和购物车

   商城中心:1.点击商品下方的加入购物车，可以添加到我们的购物车中

                  2.点击上方的菜单栏中的购物车可以到购物车，点击商城，也又可以回到商城

   

购物车:1.点击删除商品，可以删除该商品

                  2.点击全选按钮，或者点击多选框，点击删除商品，也可以删除商品，点击全选                 在点击所选商品，可以直接清空购物车

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>商城</title><style>#img{width:400px;height:300px;/* url:位置 */background:url("img/2.jpg") center/cover;position:absolute;left:36%}* {padding: 0px;margin: 0px;list-style: none;}.nav {height: 50px;background: black;}.nav>li {color: white;float: left;line-height: 50px;padding: 0px 30px;position: relative;}li {position: relative;text-align: center;}.nav>li:hover {background:;}.nav ul {background: green;width: 150px;position: absolute;left: 0px;/* display: none;*/opacity: 0;transform: rotate(0deg) scale(.5);transition: .2s;}li li:hover {background: yellow;}.nav>li:hover ul {/*display: block;*/opacity: 1;transform: rotate(360deg) scale(1);}li::after {content: "";position: absolute;width: 0;height: 5px;background: white;bottom: 10px;left: 50%;transform: translate(-50%, 0);transition: 1s;}li:hover::after {width: 80%;}/* 搜索框 */#ss{/* 设置边框 */border : 1px solid gray;border-radius:20px;/* 调节边框的大小 */height:40px;width:500px;position:absolute;left:30%;top:60px;font-size:20px;}/* 搜索图片 */#simg{width:40px;height:40px;position:absolute;left:59%;top:60px;}/* 动态图 */#img{/* 设置div id名为img设置背景图片 */width:600px;height:400px;/* url:位置 */background:url("img/1.gif") center/cover;position:absolute;left:15%;top:20%;border-radius:20px;}/* 漫野字体设置  */#my{position:absolute;left:20%;top:7%;}
/* -----------------------第一个商品--------------------------------------- *//* 第一个商品div */#divSp1{width:350px;height:500px;border : 0px solid #9D9D9D;border-radius:20px;position:absolute;left:10%;top:100%;}/* 第一个物品img */#sp1{width:300px;height:300px;position:absolute;left:20px;top:20px;}/* 购物车按钮 */#gwc1{width:100px;height:40px;position:absolute;left:140px;top:440px;border-radius:20px;background:white;}/* 商品第一个文字 */#wz1{width:300px;height:40px;position:absolute;left:40px;top:350px;}/* 商品价格 */#jg1{width:300px;height:40px;position:absolute;left:160px;top:405px;}/*---- ------------------------第二个商品---------------------------------- */#divSp2{width:350px;height:500px;border : 0px solid #9D9D9D;border-radius:20px;position:absolute;left:40%;top:100%;}#sp2{width:300px;height:300px;position:absolute;left:20px;top:20px;}/* 购物车按钮 */#gwc2{width:100px;height:40px;position:absolute;left:140px;top:440px;border-radius:20px;background:white;}/* 商品第一个文字 */#wz2{width:300px;height:40px;position:absolute;left:40px;top:350px;}/* 商品价格 */#jg2{width:300px;height:40px;position:absolute;left:160px;top:405px;}/*------------------------第三个----------------------------------------------- *//* div标签 */#divSp3{width:350px;height:500px;border : 0px solid #9D9D9D;border-radius:20px;position:absolute;left:70%;top:100%;}/* 图片 */#sp3{width:300px;height:300px;position:absolute;left:20px;top:20px;}/* 购物车按钮 */#gwc3{width:100px;height:40px;position:absolute;left:140px;top:440px;border-radius:20px;background:white;}/* 商品第一个文字 */#wz3{width:300px;height:40px;position:absolute;left:40px;top:350px;}/* 商品价格 */#jg3{width:300px;height:40px;position:absolute;left:160px;top:405px;}/*------------------------第四个----------------------------------------------- *//* div标签 */#divSp4{width:350px;height:500px;border : 0px solid #9D9D9D;border-radius:20px;position:absolute;left:65%;top:18%;}/* 图片 */#sp4{width:300px;height:300px;position:absolute;left:20px;top:20px;}/* 购物车按钮 */#gwc4{width:100px;height:40px;position:absolute;left:140px;top:440px;border-radius:20px;background:white;}/* 商品第一个文字 */#wz4{width:300px;height:40px;position:absolute;left:40px;top:350px;}/* 商品价格 */#jg4{width:300px;height:40px;position:absolute;left:160px;top:405px;}/*------------------------第五个----------------------------------------------- *//* div标签 */#divSp5{width:350px;height:500px;border : 0px solid #9D9D9D;border-radius:20px;position:absolute;left:10%;top:180%;}/* 图片 */#sp5{width:300px;height:300px;position:absolute;left:20px;top:20px;}/* 购物车按钮 */#gwc5{width:100px;height:40px;position:absolute;left:140px;top:440px;border-radius:20px;background:white;}/* 商品第一个文字 */#wz5{width:300px;height:40px;position:absolute;left:100px;top:350px;}/* 商品价格 */#jg5{width:300px;height:40px;position:absolute;left:160px;top:405px;}/*------------------------第五个----------------------------------------------- *//* div标签 */#divSp6{width:350px;height:500px;border : 0px solid #9D9D9D;border-radius:20px;position:absolute;left:40%;top:180%;}/* 图片 */#sp6{width:300px;height:300px;position:absolute;left:20px;top:20px;}/* 购物车按钮 */#gwc6{width:100px;height:40px;position:absolute;left:140px;top:440px;border-radius:20px;background:white;}/* 商品第一个文字 */#wz6{width:300px;height:40px;position:absolute;left:60px;top:350px;}/* 商品价格 */#jg6{width:300px;height:40px;position:absolute;left:160px;top:405px;}			/*------------------------第七个----------------------------------------------- *//* div标签 */#divSp7{width:350px;height:500px;border : 0px solid #9D9D9D;border-radius:20px;position:absolute;left:70%;top:180%;}/* 图片 */#sp7{width:300px;height:300px;position:absolute;left:20px;top:20px;}/* 购物车按钮 */#gwc7{width:100px;height:40px;position:absolute;left:140px;top:440px;border-radius:20px;background:white;}/* 商品第一个文字 */#wz7{width:300px;height:40px;position:absolute;left:60px;top:350px;}/* 商品价格 */#jg7{width:300px;height:40px;position:absolute;left:160px;top:405px;}			
/*---------------------------------表格------------------------------------------ */table{border-top: 1px solid #333;border-left: 1px solid #333;width:100%;height:60px;font-size:25px;}/* 新增按钮的大小 */.tabelBu{width:60px;height:40px;                                                                                                                                                                                                                              0px;border-radius:20px;background:white;}/* 表格按钮的大小 */.tableBu1{width:60px;height:40px;                                                                                                                                                                                                                              0px;border-radius:20px;background:white;}/* 数量增加减按钮操作*/.tableBu2{width:20px;height:20px;                                                                                                                                                                                                                              0px;/* border-radius:20px; */background:white;}td{text-align:right;}#delalll{width:150px;height:40px;border:0px;/* border-radius:20px; */background:white;font-size:20px;}/* 热销商品 */#rx{width:200px;height:40px;background:white;position:absolute;left:160px;top:700px;}</style></head><body><div><!-- 栏目 --><ul class="nav"><li onclick="scMain()">商城</li><li id="tz" onclick="fn1()">购物车</li><li>收藏</li><li>商品分类</li><li>联系客服</li></ul></div><div id="divMain"><!-- 蕾姆老婆等你回家 --><font size="6" id="my">漫野网</font><!--搜索框--><input id="ss" placeholder="冰墩墩"><img  id="simg" src="img/搜索.png"><!--第二个div------------------------------------------------------------------- --><!-- 图片切换 --><div id="img"></div><!-- 第一张商品图 --><div id="divSp1"><img src="img/6.jpg" id="sp1"><p id="wz1">初音未来4代樱初音日本摆件玩具动漫周边</p><p id="jg3"><span>￥</span>257</p><button id="gwc1" onclick="gwc(this)">加入购物车</button></div><!-- 第二张图片 --><div id="divSp2"><img src="img/10.jpg" id="sp2"><p id="wz2">拉姆蕾姆透明亚克力立牌摆件礼物</p><p id="jg2"><span>￥</span>57</p><button id="gwc2" onmouseover="gwc(this)">加入购物车</button></div><!-- 第三张图 --><div id="divSp3"><img src="img/12.jpg" id="sp3"><p id="wz3"> 蕾姆 Q版 手办正品景品</p><p id="jg3"><span>￥</span>157</p><button id="gwc3" onclick="gwc(this)">加入购物车</button></div><!-- 第四张图片 --><div id="divSp4"><img src="img/102.jpg" id="sp4"><p id="wz4">哔哩哔哩初音未来长发公主景品手办</p><p id="jg4"><span>￥</span>157</p><button id="gwc4" onclick="gwc(this)">加入购物车</button></div><!-- 第五张图片 --><div id="divSp5"><img src="img/101.jpg" id="sp5"><p id="wz5">魔女之旅 伊蕾娜 景品手办</p><p id="jg5"><span>￥</span>257</p><button id="gwc5" onclick="gwc(this)">加入购物车</button></div><!-- 第六张图片 --><div id="divSp6"><img src="img/103.jpg" id="sp6"><p id="wz6">MG红异端强袭自由独角兽二次元机器人机甲HG手办拼装玩具</p><p id="jg6"><span>￥</span>357</p><button id="gwc6" onclick="gwc(this)">加入购物车</button></div><!-- 第七张图片 --><div id="divSp7"><img src="img/104.jpg" id="sp7"><p id="wz7">MG强袭自由独角兽红异端PG机甲初号机Eva拼装玩具男</p><p id="jg7"><span>￥</span>720</p><button id="gwc7" onclick="gwc(this)">加入购物车</button></div><div id="rx"><h1>热销商品</h1></div></div><!--------------------------------购物车表单-----------------------------------><table id="table" border="0" cellspacing="50px"><tr><td id="delalll" onclick="delCKRow()">删除选中商品</td><td colspan="6"><span id="spanSum">商品总价:￥<font id="allPrice"></font></span></td></tr><tr><td>全选  <input type="checkbox" onclick="selectAll(this.checked)" id="selAll"></td><td>商品</td><td>商品名称</td><td>商品个数</td><td>商品价格</td><td>商品总价</td><td>商品操作</td></tr><tr><td><input type="checkbox" class="cbox"></td><td><img src="img/10.jpg" width="150px" height="150px"></td><td class="tableName">拉姆蕾姆透明亚克力立牌摆件礼物</td><td><button class="tableBu2" onclick="mathAdd(this,this.parentElement.parentElement)">+</button><span class="count1">1</span> <button class="tableBu2" onclick="mathDel(this,this.parentElement.parentElement)">-</button></td><td class="price">57</td><td class="sum">57</td><td><button class="tableBu1" onclick="delRow(this.parentElement.parentElement)">删除商品</button></td></tr></table><script>var b=1;//使用循环计时器让我们的图片切换setInterval(function fn1(){img.style.backgroundImage='url("img/'+(b%3)+'.gif")';//每执行一次b就加上1b++;},2000)var count=0;// 写方法当点击按钮时把商品加入购物车function gwc(obj){count++;// 1.拿到商品图片// 2.拿到商品名称// 3.增加个数// obj按钮自己,拿到图片// 拿到价格var money=obj.previousElementSibling.textContent;// 转换纯数字var m=money.replace(/[^0-9]/ig,"");// 拿到商品名字var name=obj.previousElementSibling.previousElementSibling.textContent;// 拿到商品图片var img=obj.previousElementSibling.previousElementSibling.previousElementSibling;var imgSrc=img.getAttribute("src");// 新增行// table:是我们给表格的id名// table.insertRow(i):在表格中为i的位置插入一行var tr=table.insertRow();// row.insertCell:在行里面插列var d1=tr.insertCell();var d2=tr.insertCell();var d3=tr.insertCell();var d4=tr.insertCell();var d5=tr.insertCell();var d6=tr.insertCell();var d7=tr.insertCell();// 给每一列插内容// innerHTM可以插html标签也可以插文字d1.innerHTML='<input type="checkbox" class="cbox">'// textContent 可以插文字，无法插html标签// 商品图片d2.innerHTML='<img src='+(imgSrc)+' width="150px" height="150px">';	// 商品名称d3.innerHTML="<span class='tableName'> "+(name)+" </span>";// 商品个数d4.innerHTML="<button class='tableBu2' onclick='mathAdd(this,this.parentElement.parentElement)'>+</button><span class='count1'>  "+(count)+"  </span><button class='tableBu2' onclick='mathDel(this,this.parentElement.parentElement)'>-</button>";// 商品价格d5.innerHTML="<span class='price'> "+(m)+" </span>";// 商品总价d6.innerHTML="<span class='sum'> "+(m)+" </span>";// 商品操作d7.innerHTML="<button class='tabelBu' onclick='delRow(this.parentElement.parentElement)'>删除商品</button>";count=0;calcAll();}// 点击跳转按钮时，表格显示出来function fn1(){divMain.style.display="none";table.style.display="block";}// 点击商城function scMain(){divMain.style.display="block";table.style.display="none";}// 点+号数量加1function mathAdd(obj,tr){// 当点加时，拿到数量加1var span1=obj.nextElementSibling;// 拿到他下一个元素的值span1.textContent=span1.textContent*1+1;     calc(tr);calcAll();}// 点减号时删除商品// 点-号数量-1function mathDel(obj,tr){// 当点加时，拿到数量加1var span1=obj.previousElementSibling;// 拿到他下一个元素的值if(span1.textContent<=1){span1.textContent=1;return;}span1.textContent=span1.textContent-1;calc(tr);calcAll();}// 总价计算// 个数*价格function calc(tr) {//value只有在input或者select//其他的内容全部使用textContent,innerHTMLvar price=tr.getElementsByClassName("price")[0].textContent;var count=tr.getElementsByClassName("count1")[0].textContent;//使用单价*数量算出总价 并赋值给对应元素tr.getElementsByClassName("sum")[0].textContent=price*count;calcAll();}// 当进来时只显示主界面window.onload=()=>{table.style.display="none";var rs=document.getElementsByTagName("tr")for(let i=2;i<rs.length;i++){calc(rs[i])}calcAll();}// 删除整行//按钮点击删除该行function delRow(tr) {tr.outerHTML="";calcAll();}//计算当前所有商品的总价function calcAll() {//获得页面中所有的行var rs=document.getElementsByTagName("tr")var sum=0;for(let i=2;i<rs.length;i++){//rs[i]就是除了第一行之外的其他的行var s1=rs[i].getElementsByClassName("sum")[0].textContent;sum+=parseFloat(s1)}//给页面赋值,只要小书店后两位allPrice.textContent=sum.toFixed(2);}//删除选中的行function delCKRow() {//获得页面中所有的行var rs=document.getElementsByTagName("tr")//将集合collection变成数组arrayrs=Array.from(rs)for(let i=2;i<rs.length;i++){//拿到行中对应的多选框var ck=rs[i].querySelectorAll("input[type='checkbox']")[0]//判断多选框是否被选中if(ck.checked){//删除该行rs[i].outerHTML=""}}calcAll()}//全选功能function selectAll(status) {var is=document.querySelectorAll("input[type='checkbox']")for (let i of is){i.checked=status}}</script></body>
</html>

    JavaScript的最后一节课到这里啦，大家可以把代码拿过去运行一下。

 


http://chatgpt.dhexx.cn/article/yRcOBu5f.shtml

相关文章

js实现网页自动化

js实现网页自动化

不讲废话&#xff0c;直接主题 一、总览 二、元素获取 1、原生获取 2、jq获取 三、元素操作 $0 代表当前元素&#xff0c;下面给几个典型的例子&#xff0c;其他以此类推。 1、文本框 $0.value "United States"2、下拉框 $0.value "United States" …
阅读更多...
JavaScript实现网页计算器

JavaScript实现网页计算器

Hbuilder X中实现网页计算器&#xff08;-*/&#xff09; 文章目录 一、计算器代码二、代码分析 一、计算器代码 <!DOCTYPE html> <html><head><meta charset"utf-8"><title>计算器</title><style type"text/css"…
阅读更多...
JavaScript网页购物车

JavaScript网页购物车

今天给大家讲解一个网页购物车的案例&#xff0c;案例比较简陋&#xff0c;包含登录注册购物车界面。 在做项目之前&#xff0c;你要在自己项目中建一个img包&#xff0c;用来存储你项目中所需用到的图片&#xff0c;如下图所示 一、登录注册介绍 界面代码展示 <style>h…
阅读更多...
Web网页之JavaScript

Web网页之JavaScript

一.JavaScript简介 JavaScript 是互联网上最流行的脚本语言&#xff0c;这门语言可用于 HTML 和 web&#xff0c;更可广泛用于服务器、PC、笔记本电脑、平板电脑和智能手机等设备。 二.JavaScript是什么&#xff1f; JavaScript是一门脚本语言。JavaScript 是一种轻量级的编…
阅读更多...
javascript网页设计期末作业 购物网站

javascript网页设计期末作业 购物网站

本次主要介绍下之前上传的作业的主要功能&#xff0c;网页下载地址&#xff1a; 网页设计期末作业 购物网站 如果对本文章内容还有疑问可以观看视频&#xff0c;也可以在评论区留言&#xff1a; javascript 网页设计期末作业 购物网站 网页实现的主要功能有&#xff1a; 1.…
阅读更多...
【精选】JavaScript网页时钟

【精选】JavaScript网页时钟

文章目录 前言一、效果展示一、使用的技术二、日期对象1.指定时间2.获取目前时间 三、源代码总结 前言 今天带大家使用JavaScript定制一款网页时钟 一、效果展示 一、使用的技术 主要使用了js的日期对象,实现的时候先创建一个日期对象&#xff0c;并进行网页布局,对时间获取之…
阅读更多...
JavaScript网页设计作业(美食网站设计与实现)

JavaScript网页设计作业(美食网站设计与实现)

&#x1f380; 精彩专栏推荐&#x1f447;&#x1f3fb;&#x1f447;&#x1f3fb;&#x1f447;&#x1f3fb; ✍️ 作者简介: 一个热爱把逻辑思维转变为代码的技术博主 &#x1f482; 作者主页: 【主页——&#x1f680;获取更多优质源码】 &#x1f393; web前端期末大作业…
阅读更多...
Javascript网页设计作业: HTML班级网页设计 基于HTML+CSS+JS制作我们的班级网页(web前端学生网页设计作品)

Javascript网页设计作业: HTML班级网页设计 基于HTML+CSS+JS制作我们的班级网页(web前端学生网页设计作品)

&#x1f4c2;文章目录 一、&#x1f468;‍&#x1f393;网站题目二、✍️网站描述三、&#x1f4da;网站介绍四、&#x1f310;网站演示五、&#x1f527; 网站代码&#x1f9f1;HTML结构代码&#x1f492;CSS样式代码 六、&#x1f947; 如何让学习不再盲目七、&#x1f381…
阅读更多...
网页之js

网页之js

js jsjs基础语法规则数据类型函数定义调用对象内置对象自定义对象bom窗口移动domcss样式事件在前面的博客中我写了一些html和css样式的基础，但是，哪些仍然不够，碰到一些复杂的功能可能就无法解决了，所以我们又用到了js js 那么先来讲讲js，这个可以解决很多在页面操作上的…
阅读更多...
3.2JavaScript网页编程——JavaScript网页编程基础

3.2JavaScript网页编程——JavaScript网页编程基础

这里写目录标题 总体JS知识流程JS基本知识JS组成引入方式&#xff1a;内联、内部形式、外部输入输出字面量let&#xff08;推荐&#xff09;和var&#xff08;面经有&#xff09;变量&#xff08;标识符&#xff09;规则&#xff08;31&#xff08;不能数字开头&#xff09;&am…
阅读更多...
网页设计之JavaScript

网页设计之JavaScript

文章目录 JavaScript笔记一.JavaScript概述1.JavaScript历史2.javaScript与java的区别3.javaScript的作用4.JavaScript与html,css关系 二.基本语法1.位置2.变量3.控制语句 三.函数&#xff0c;内置对象与事件1.函数基本语法&#xff1a;全局函数&#xff1a; 2.内置对象&#x…
阅读更多...
JS实现网页效果

JS实现网页效果

function $(id){return document.getElementById(id); } function $name(name){return document.getElementsByName(name); }树形菜单 onclick事件改变display属性来控制子树的显示开关效果function treeShow(id){//console.log("事件添加成功");if(document.getElem…
阅读更多...
JavaScript—— 常见网页特效

JavaScript—— 常见网页特效

目录 一、常见网页特效1. 案例&#xff1a;网页轮播图1.1 案例分析1.1.1 左右按钮的显示与隐藏1.1.2 动态生成小圆圈1.1.3 小圆圈的排他思想1.1.4 点击小圆圈滚动图片1.1.5 点击右侧按钮一次&#xff0c;就让图片滚动一张1.1.6 克隆第一张图片1.1.7 点击右侧按钮&#xff0c;小…
阅读更多...
php几种常用的加密解密算法

php几种常用的加密解密算法

本文给大家介绍php的三种常用的加密解密算法&#xff0c;有一定的参考价值&#xff0c;有需要的朋友可以参考一下&#xff0c;希望对你们有所帮助。 php 自带的加密函数&#xff1a; 不可逆的加密函数为&#xff1a;md5()、sha1()、crypt() md5() 用来计算 MD5 哈稀 md5(stri…
阅读更多...
加解密算法概述

加解密算法概述

文章目录 加解密算法概述前言概述加解密算法国密算法 应用总体对称加解密非对称加解密 实现 加解密算法概述 前言 密码由来已久&#xff0c;相传公元前405年&#xff0c;雅典和斯巴达之间的伯罗奔尼撒战争最早出现密码&#xff0c;通过杂乱无章的字母拼接成一段话就是要传递的…
阅读更多...
AES加密解密算法设计（C++）

AES加密解密算法设计（C++）

目 录 1&#xff0e; 背景与意义 4 2. 系统设计 5 2.1系统主要目标 5 2.2主要软件需求&#xff08;运行环境&#xff09; 5 2.3功能模块与系统结构 6 3 系统功能程序设计 8 3.1基本要求部分 8 3.1.1 字节替换 8 3.1.2行移位 9 3.1.3列混合 11 3.1.4密钥加 13 3.1.5密钥扩展 14 …
阅读更多...
加解密算法

加解密算法

总结 推荐使用的算法&#xff1a; 对称加密算法&#xff1a;AES-GCM-256&#xff0c;SM1 (硬件国密), SM4 (国密)非对称加密算法&#xff1a;RSA2048&#xff0c;SM2 (国密)信息摘要算法&#xff1a;SHA256&#xff0c;SM3 (国密散列算法) 对称加密算法/AES-GCM-256: GCMGM…
阅读更多...
加密解密及算法详解

加密解密及算法详解

1、简介 今天我要给大家分享的是互联网通信中用到的各种加密解密算法&#xff0c;在我们介绍加解密知识前&#xff0c;首先我们了解一下密码学、密码、加密、数字签名、密钥交换等相关术语的含义。 1.1 密码学 密码学是研究编制密码和破译密码的技术科学。研究密码变化的客观规…
阅读更多...
常见的加密解密算法

常见的加密解密算法

文章目录 一、概述二、区别 一、概述 加密分为单向加密和双向加密&#xff1a; 单向加密 又称为不可逆加密&#xff0c;即生成密文无法反解的一种加密方式&#xff1b;eg:MD5和SHA系列、HMAC。 双向加密 又称为可逆加密&#xff0c;即生成密文后&#xff0c;在需要的时候可以反…
阅读更多...
RSA 加密解密算法实现（简单，易懂）！！！

RSA 加密解密算法实现（简单，易懂）！！！

目录 一、什么是RSA算法 1.对称加密 2.非对称加密 3.非对称加密的应用 二、RSA算法的基础操作步骤 1.生成公钥和私钥 2.用公钥加密信息 3.用私钥解密信息 三、AC代码 六、RSA算法的测试 七、共勉 一、什么是RSA算法 在计算机中常用的加密算法分为两类&#xff1a;对称…
阅读更多...
推荐文章

Copyright @ 2022~2023