JavaScript购物车小项目
目录
前言
一、登陆界面的制作
登陆界面
注册界面
代码详情
1.商品促销界面
详情解析:
代码详情：
操作指南：
1.登录注册界面：
2.商城界面
3.购物车界面
总结
前言
大家还记得上次给大家分享的购物车功能的实现吗？今天就来给大家分享最近做的一个个人小项目，就用到了上次给大家分享的购物车功能哦，大家快来一起动手尝试一下吧。
一、登陆界面的制作
主要运用CSS的知识来实现界面的排版制作。
效果图：
登陆界面
具有用户名和密码框，密码框做了加密(密码不可视) 点击上方黄色按钮可以翻转界面到注册界面
用户名和密码框做了表单验证（正则验证）用户名必须为英文字母，且必须在3-6位之中，密码长度必须在6-10位之中
注册界面
主要功能与登陆界面异曲同工，增加了确认密码的功能，同时也具备密码的加密 如果账号或者密码的输入不符合正则的要求（正则验证详细在上）则会在输入框中提示信息输入有误。
代码详情
详细代码如下（注册登陆界面）：
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title></title>
</head>
<style>* {padding: 0;margin: 0;outline: none;border: none;}body {height: 100vh;display: flex;justify-content: center;align-items: center;background-color: rgb(31, 32, 41);}.shell {width: 300px;height: 350px;display: flex;flex-direction: column;justify-content: space-evenly;align-items: center;perspective: 1000px;/* 给最外层加上一个透视，否则接下去的翻转会没有3d的效果 */}.top {width: 400px;display: flex;cursor: pointer;justify-content: center;}/* .off, */.off {margin-right: 40px;color: #fff;transition: .5s;font: 300 30px 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;}.on {color: #fff;transition: .5s;font: 300 30px 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;}.on{opacity: .5;margin-left: 40px;}.button {width: 60px;height: 29px;background-color: rgb(255, 235, 167);border-radius: 20px;position: relative;}.ball {position: absolute;width: 25px;height: 25px;background-color: rgb(46, 45, 56);border-radius: 50%;transition: .5s;box-shadow: 0 0 10px #000;left: 0;transform: translate(-1px);}.bottom {width: 400px;height: 400px;background-image: url(image/background.png);transform-style: preserve-3d;/* 使元素呈现出3D效果 */position: relative;transition: .7s;border-radius: 5px;}.bottom>div {width: 100%;height: 100%;display: flex;flex-direction: column;align-items: center;justify-content: center;}.bottom>div h2 {color: white;}.bottom>div input{width: 300px;height: 40px;padding:0 10px;background-color: rgb(31, 32, 41);color: #fff;}.bottom>div button{width: 90px;height: 40px;color: #333;font-size: 15px;background-color: rgb(255, 235, 167);border-radius: 4px;transition: .3s;margin-bottom: 10px;cursor: pointer;box-shadow:0 0 10px rgb(255, 235, 167);}.bottom>div button:hover{}.signIn {transform: translateZ(70px);/* 在这里我们将卡片里面内容和卡片有一个距离，这样子会更有立体感 */}.signUp {position: absolute;top: 0;transform: translateZ(-70px) rotateY(180deg);/* 我们给反面加上距离的时候，前往不要忘记给反面的内容也翻转一下，否则就会出现这种卡片转过来了，里面的内容也反了 */}/* 标题字体 */.no{margin-left: 100px;margin-top:-50px;color: white;font-size: 35px;font-family:"bodoni mt";}.go{margin-left: 120px;margin-top: 50px;}
</style><body><div class="shell"><div class="top"><span class="off">SIGN IN</span><div class="button"><div class="ball"></div></div><span class="on">SIGN UP</span></div>
<br>
<br>
<br>
<br><div class="bottom"><div class="signIn"><form id="myF"><!-- <h1>Sign in</h1> --><h2 class="no">Sign in</h2><br><br><input type="text" placeholder="Username" id="usen1" ><br><br><br><input type="password" placeholder="Password" id="usep1" ><br><br><br><button onclick="login_1()" class="go">GO</button></form></div><div class="signUp"><form id="myF_2"><h2 class="no">Sign up</h2><br><input type="text" placeholder="Username" id="usen2" ><br><br><br><input type="password" placeholder="Password" id="usep2" ><br><br><br><input type="password" placeholder="Confirm password" id="usep3" ><br><br><br><button class="go">GO</button></div></form></div></div><script>// 登录验证焦点事件// 用户框失去焦点后验证value值// function onBlur_1(){// //拿到用户框和密码框框的值// var valueA=document.getElementsByTagName("input")[0].value;// var valueB=document.getElementsByTagName("input")[1].value;// var valueC=document.getElementsByTagName("input")[2].value;// var s="输入信息不能为空";// if(!valueA||!valueB){//用户未输入信息// usen1.value=s;// usep1.value=s;// }// if(!valueC){//用户未输入信息// usen2.value=s;// usep2.value=s;// }// if(valueA===s||valueB===s){//清空输入框// usen1.value="";// usep1.value="";// usen2.value="";// usep2.value="";// }// }//登录按钮设置表单验证function login_1(){var valueA=usen1.value;var valueB=usep1.value;var length=valueA.lengthif (length > 0) {//里面有内容//内容在正则匹配之间var rex=/^[a-zA-Z]{3,6}$/;var rex2=/^\w{6,10}$/;if (rex.test(usen1.value)&&rex2.test(usep1.value)) {usen1.value = "
JavaScript购物车小项目相关推荐
- ssm练手小项目_20 个 JavaScript+Html+CSS 练手的小项目
前言: 最近在 GitHub 上发现了一个 vanillawebprojects[1] 开源仓库,里面收集了 20 个 JavaScript+Html+CSS的练手项目,没有使用任何框架,可以让你从基 ...
- javascript的localStorage(Web Storage)小项目
我们下面举一个javascript localStorage练手的小项目,是headfirsthtml5中的一个例子,不过我将其进行美化. 项目资源(源码,图片)地址:https://github.c ...
- JavaScript小项目之BMI值计算
项目题目: 实现BMI值计算器 项目作用: 复习JavaScript课程知识,学习DOM基础知识,熟悉document对象的使用,实现简单的BMI计算器页面. JavaScript小项目系列 前言 一 ...
- web实践小项目一:简单日程管理系统（涉及html/css，javascript，python，sql，日期处理）...
暑假自学了些html/css,javascript和python,苦于学完无处练手几乎过目即忘...最后在同学的建议下做了个简单日程管理系统.借第一版完成之际,希望能将实践期间犯过的错误和获得的新知进 ...
- React+TypeScript练手小项目
在写 关于MVC模式简单代码实现 的过程中,觉得最麻烦的就是操作 DOM.所以这次升级了,打算用 React.用过 React 的同学都知道,React 在更新视图时,必须要通过 setState 方 ...
- [Electron]仿写一个课堂随机点名小项目
自从前几个月下了抖音,无聊闲暇时就打会打开抖音,因为打开它有种莫名其妙打开了全世界的感觉... 无意中看到这个小视频:随机点名 于是仿写了一个课堂点名小项目,算是对Electron的一个简单的认识,有 ...
- Web前端开发：SQL Jsp小项目（一）
Jsp的学习算是告一段落,针对这段时间的学习,写了一个Jsp小项目来巩固学到的知识. 框架示意图 User list process UserAdd process 需要的界面效果: 需要工具:Ecl ...
- “我曾经的小项目比我在软件行业十年产生的影响还要大”
作者 | Michael Williamson 译者 | 王启隆 出品 | CSDN(ID:CSDNnews) 一位英国程序员Michael Williamson (下文称作Mike)于8月1号在他的 ...
- web前端小项目个人实例_Web前端：小程序界面与逻辑项目实训
大家好,我来了!本期为大家带来的Web前端学习知识是"Web前端:小程序界面与逻辑项目实训",喜欢Web前端的小伙伴,一起看看吧! 主要内容 数据绑定 渲染 界面层数据渲染 事件处 ...
最新文章
- java io在文件结尾持续添加内容
- 海洋主题绘画_神奇宝贝：海洋生物的艺术世界绘画比赛获奖作品展来啦！
- Nginx搭建flv视频点播服务器
- html5 手机上传图片
- java 快排和堆排序
- session登录练习使用解决null显示问题
- hdfs中与file数组类似的数组_Chapter05 Java中的数组
- 开关问题（POJ-1830）
- DB2开发系列之一——基本语法
- 详解.NET IL代码
- 喜大普奔，Ant Design of Vue 1.0版本发布
- NumPy用户指南（2）——安装NumPy
- Python编写杨辉三角形
- 关于openstack，cloudstack，Eucalyptus对比分析
- 什么是零点漂移，怎么抑制零点漂移？（硬件每日一题）
- java随机百分比_java随机百分比
- 小说《人类简史》的读后感范文4100字
- 我们为什么做不好软件项目？做项目时间都浪费在反复奸奸杀杀，杀杀奸奸上了
- android app开发_如何雇用Android App开发人员
- 英语不好怎么自学python_为什么我就是学不好英语啊？我明明很努力，但是为... 我英语一般，但我很想学Python这个编程语言，行不？...
热门文章