登录界面
效果图：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
html,body{
height: 100%;
margin: 0px;
}
body{
background:linear-gradient(to left, transparent,pink, #03e9f4 ) ;
}
#d123{
margin: 0px;
height: 400px;
width: 400px;
position: absolute;
top: 26%;
left: 37.5%;
/* transform: translate(-50%,-50%); */
border-radius: 50%;
animation:name 4s ease-in-out infinite;
background:linear-gradient(to right, #03e9f4 ,pink, transparent)
}
@keyframes name{
from{
transform: rotateZ(0deg);
}
50%{
}
to{
transform: rotateZ(360deg);
}
}
form{
height:220px;
width: 300px;
background: rgba(255,255,250,.5);
position:absolute ;
left: 50%;
top:50%;
/* 在自己的基础上往右边和下面走-50% */
transform: translate(-50%,-50%);
border-radius: 10px;
}
form>h2{
text-align: center;
margin-left: 10px;
}
p{
text-align: center;
height: 40px;
margin: 0px;
position: relative;
margin: 15px auto;
}
input{
display: block;
width:30%;
margin: auto;
border-radius:20px;
transition: 1.4s;
text-align: center;
border: none;
}
input:focus{
width:80%;
background: pink;
border: none;
box-shadow: 0 0 15px rgba(0,255,255,.6), 0 0 25px rgba(0,255,255,.6), 0 0 50px rgba(0,255,255,.6),
0 0 100px rgba(0,255,255,.6);
}
label{
position: absolute;
left: 20px;
transition:1.4s;
top:0px;
}
p:focus-within label{
top: -20px;
left:110px;
}
#s1{
position: absolute;
font-size: 12px;
top: 100px;
color: red;
}
#s2{
color: red;
position: absolute;
font-size: 12px;
bottom: 50px;
}
#a {
position: relative;
left: 20px;
padding:0px;
height: 30px;
width: 50px;
color: rgba(0,0,0,.5);
border-radius:6px;
border: none;
/* 同样加个过渡 */
transition: all 1s;
}
#a:hover {
color: #fff;
border-radius: 5px;
background-color: rgba(0,0,0,.6);
/* 设置上右下左每个位置的参数 每个参数为水平阴影位置 垂直阴影 模糊距离 */
box-shadow: 0 0 15px rgba(0,0,0,.6), 0 0 25px rgba(0,0,0,.6), 0 0 50px rgba(0,0,0,.6),
0 0 100px rgba(0,0,0,.6);
}
#a1 {
position: relative;
left: 180px;
padding:0px;
height: 30px;
width: 50px;
color: rgba(0,0,0,.5);
border-radius:6px;
border: none;
/* 同样加个过渡 */
transition: all 1s;
}
#a1:hover {
color: #fff;
border-radius: 5px;
background-color: rgba(0,0,0,.6);
/* 设置上右下左每个位置的参数 每个参数为水平阴影位置 垂直阴影 模糊距离 */
box-shadow: 0 0 15px rgba(0,0,0,.6), 0 0 25px rgba(0,0,0,.6), 0 0 50px rgba(0,0,0,.6),
0 0 100px rgba(0,0,0,.6);
}
</style>
</head>
<body>
<div id="d123">
</div>
<form action="" method="">
<h2>登录界面</h2>
<p><label id="dl1">用户名：</label><input type="text" onkeyup="onname(this,2)" id="uname" maxlength="10" placeholder="请输入账户"/></p>
<p><label id="dl2">用户密码：</label><input type="password" onkeyup="onname(this,3)" id="upwd" maxlength="10" placeholder="请输入密码"/></p>
<button id="a" type="button" onclick="tz(2)">登录</button> <button id="a1" type="button" onclick="tz(3)">注册</button>
<span id="s1"></span>
<span id="s2"></span>
</form>
<script type="text/javascript">
function onname(t,id){
var cname=t.value.length
console.log(t.value.length)
if(id=="2"){
var sp=document.getElementById("s1");
if(cname>4){
sp.textContent="√"
sp.style.color="green"
return true
}
if(cname>0&&cname<3){
sp.textContent="用户名不格式正确"
sp.style.color="red"
return false
}
if(cname==0){
sp.textContent=""
return false
}
}
if(id=="3"){
var sp2=document.getElementById("s2");
if(cname>4){
sp2.textContent="√"
sp2.style.color="green"
return true
}
if(cname>0&&cname<3){
sp2.textContent="密码格式不正确"
sp2.style.color="red"
return false
}
if(cname==0){
sp2.textContent=""
return false
}
}
}
function tz(dd){
if(dd==3){
window.location.href="zc.html"
}
var b=document.getElementById("uname").value.length
var c=document.getElementById("upwd").value.length
if(c>4&&b>4){window.location.href="new_file.html"}
}
</script>
</body>
</html>
注册界面
效果图：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
html,body{
height: 100%;
margin: 0px;
}
body{
background:linear-gradient(to left, transparent,pink, #03e9f4 ) ;
}
form{
position: absolute;
width: 400px;
height: 300px;
background: rgba(255,255,200,.5);
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
border:none;
border-radius: 20px;
}
form>h1{
text-align: center;
margin-left: 10px;
}
p{
text-align: center;
height: 40px;
margin: 0px;
position: relative;
margin: 15px auto;
}
input{
display: block;
width:30%;
margin: auto;
border-radius:20px;
transition: 1s;
text-align: center;
border: none;
}
input:focus{
width:80%;
background: pink;
border: none;
box-shadow: 0 0 15px rgba(0,255,255,.6), 0 0 25px rgba(0,255,255,.6), 0 0 50px rgba(0,255,255,.6),
0 0 100px rgba(0,255,255,.6);
}
button{
position: relative;
left: 37%;
border: none;
padding:0px;
height: 50px;
width: 100px;
background: rgba(253,178,123,.7);
box-shadow: 0 0 15px rgba(253,178,123,.7), 0 0 25px rgba(253,178,123,.7), 0 0 50px rgba(253,178,123,.7),
0 0 100px rgba(253,178,123,.7);
color: rgba(0,0,0,.5);
border-radius:6px;
transition: 1s;
animation: name 3s ease-in-out infinite ;
}
@keyframes name{
0%{
box-shadow: 0 0 15px rgba(253,178,123,.7), 0 0 25px rgba(253,178,123,.7), 0 0 50px rgba(253,178,123,.7),
0 0 100px rgba(253,178,123,.7);
}
50%{
box-shadow: 0 0 15px rgba(200,178,123,.7), 0 0 25px rgba(203,178,123,.7), 0 0 50px rgba(203,178,123,.7),
0 0 100px rgba(200,178,123,.7);
}
100%{
box-shadow: 0 0 15px rgba(23,178,123,.7), 0 0 25px rgba(25,178,123,.7), 0 0 50px rgba(25,178,123,.7),
0 0 100px rgba(25,178,123,.7);
}
}
button:hover {
color: #fff;
border-radius: 5px;
background-color: rgba(0,0,0,.6);
/* 设置上右下左每个位置的参数 每个参数为水平阴影位置 垂直阴影 模糊距离 */
box-shadow: 0 0 15px rgba(0,0,0,.6), 0 0 25px rgba(0,0,0,.6), 0 0 50px rgba(0,0,0,.6),
0 0 100px rgba(0,0,0,.6);
}
.error{
text-shadow:0px 1px red;
}
</style>
</head>
<body>
<form action="" onsubmit="return check()">
<h1>账户注册</h1>
<p>名字: <input type="text" id="userName" onkeyup="checkLabel(this,/^[a-zA-Z]{3,6}$/,'名字的长度在3-6')"><span><i class="error"></i></span></p>
<p>密码: <input type="text" id="userPwd" onkeyup="checkLabel(this,/^\w{6,10}$/,'密码的长度在6-10')"><span><i class="error"></i></span></p>
<p>邮箱: <input type="text" id="userEmail" onkeyup="checkLabel(this,/^\w+[.]\w+@\w+[.]\w+$/,'邮箱中必须包含@')"><span><i class="error"></i></span></p>
<button type="button" onclick="c()">注册</button>
</form>
<script>
//用来检查名字是否合规
function checkLabel(obj,rex,tip) {
var length = obj.value.length
var label = obj.parentElement.getElementsByClassName("error")[0]
console.log(obj.value)
if (length > 0) {//里面有内容
//内容在正则匹配之间
if (rex.test(obj.value)) {
label.textContent = "😊"
return true
}
//不在区间之内
label.textContent = tip
return false
}
//里面没有内容
label.textContent = "长度必须大于0"
return false
}
//添加提交事件(会具备返回值)
function c() {
//阻止表单的提交 需要返回 false
// return checkName()&&checkPwd()&&checkEmail()
var f1 = checkLabel(userName,/^[a-zA-Z]{3,6}$/,'名字的长度在3-6')
var f2 = checkLabel(userPwd,/^\w{6,10}$/,'密码的长度在6-10')
var f3 = checkLabel(userEmail,/^\w+[.]\w+@\w+[.]\w+$/,'邮箱中必须包含@')
if(f1==true&&f1==f2&&f2==f3){
window.alert("注册成功")
window.location.href="dl.html";
return f1&&f2&&f3
}else{
window.alert("注册失败格式错误")
return f1&&f2&&f3
}
}
</script>
</body>
</html>
主界面
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
html,body{
height: 100%;
margin: 0px;
}
body{
background: linear-gradient(to left, green,pink, #03e9f4 );
}
#dd1{
position: absolute;
width: 400px;
height: 200px;
background: rgba(255,255,255,.0);
right: 0px;
bottom: 40px;
transition: .1s;
}
#ad{
position: absolute;
top: 30px;
width: 300px;
height: 150px;
top: 40px;
background: rgba(255,255,255,.2);
overflow-y:scroll; overflow-x:scroll;
}
#bt1{
position: absolute;
right: 0px;
margin: 15px auto;
height: 40px;
width: 50px;
}
#zdiv{
background: rgba(255,255,255,255,.5);
position: fixed;
width: 400px;
height: 400px;
left: 35%;
top: 10%;
}
#fid{
text-align: center;
width: 100%;
border: 1px solid #FF0000;
box-shadow: 0 0 15px rgba(0,255,255,.6), 0 0 25px rgba(0,255,255,.6), 0 0 50px rgba(0,255,255,.6),
0 0 100px rgba(0,255,255,.6);;
}
img{
width: 40px;
height: 40px;
}
</style>
<div id="zdiv">
<table id="fid" border="">
<tr>
<td>图片</td>
<td>名称</td>
<td>单价</td>
<td>操作</td>
</tr>
<tr>
<td><img src="img/logo.jpg" ></td>
<td>药品</td>
<td>19</td>
<td><button type="button" class="cbut" onclick="tj(this)">添加购物车</button></td>
</tr>
<tr>
<td><img src="img/999感冒灵.jpg" ></td>
<td>感冒灵</td>
<td>19</td>
<td><button type="button" class="cbut" onclick="tj(this)">添加购物车</button></td>
</tr>
</table>
</div>
<div id="dd1">
<p id="bt1"><button type="button" onclick="btn()">购物车</button></p>
<div id="ad">
<h1>总价: $<font color="green" id="allPrice">0.0</font></h1>
<table border="" >
<tr id="fid2">
<td>全选<input type="checkbox" onclick="selectAll(this.checked)"></td>
<td>名称</td>
<td>单价</td>
<td>个数</td>
<td>总价</td>
<td>操作</td>
</tr>
<tr>
<td><input type="checkbox" class="sss"></td>
<td>药品</td>
<td contenteditable="true" class="price" onblur="calcRow('',this.parentElement)">19.9</td>
<td contenteditable="true" class="count" onblur="calcRow('',this.parentElement)">1</td>
<td class="sum2">19.9</td>
<td>
<button onclick="calcRow('+',this.parentElement.parentElement)">+</button>
<button onclick="calcRow('-',this.parentElement.parentElement)">-</button>
<button onclick="delRow(this.parentElement.parentElement)">删除</button>
</td>
</tr>
</table>
</div>
</div>
<script>
function calcAll() {
//获得页面中所有的行
var sum=0;
//rs[i]就是除了第一行之外的其他的行
var s1=document.getElementsByClassName("sum2")
for(i=0;i<s1.length;i++){
sum+=parseFloat(s1[i].textContent)
}
//给页面赋值,只要小书店后两位
allPrice.textContent=sum.toFixed(2)
}
function selectAll(status) {
var is=document.querySelectorAll("input[type='checkbox']")
for (let i of is){
i.checked=status
}
}
function delRow(tr) {
tr.outerHTML=""
calcAll()
}
//写一个函数：算出当前一行中的价格并完成赋值
function calc(tr) {
//value只有在input或者select
//其他的内容全部使用textContent,innerHTML
var price=tr.getElementsByClassName("price")[0].textContent
var count=tr.getElementsByClassName("count")[0].textContent
if(isNaN(price*1)){
tr.getElementsByClassName("price")[0].textContent=0
price=0
}
if(isNaN(count*1)){
tr.getElementsByClassName("count")[0].textContent=0
count=0
}
//使用单价*数量算出总价 并赋值给对应元素
tr.getElementsByClassName("sum2")[0].textContent=(price*count).toFixed(2)
calcAll()
}
function calcRow(rex,tr) {
//rex是运算符号
//tr是当前对应的行
var td=tr.getElementsByClassName("count")[0]
if(rex==="+"){
td.textContent=td.textContent*1+1
}
if(rex==="-"){
td.textContent-=1
}
calc(tr)
}
function tj(obj){
var c=obj.parentElement.parentElement.children
var c1=c[1].textContent
var c2=c[2].textContent
var to2=document.getElementById("fid2").parentElement.lastElementChild
var tro2=to2.cloneNode(true)
var tor3=tro2.children
tor3[1].textContent=c1;
tor3[2].textContent=c2;
tor3[3].textContent="1";
tor3[4].textContent=c2;
to2.parentElement.insertBefore(tro2,null)
calcAll()
}
function btn(){
var a=document.getElementById("ad")
if(a.style.display=="none"){
a.style.display="block";
}else{
a.style.display="none";
}
calcAll()
}
//窗口的滑动事件
window.onscroll=()=> {
//获取到窗口滚动的距离 scrollTop
ad.style.top=40+document.documentElement.scrollTop+"px"
}
//窗口的加载事件 会在整个页面加载完成之后执行
window.onload=()=>{
//获得页面中所有的行
var rs=document.getElementsByClassName("sss")
for(let i=1;i<rs.length;i++){
console.log(rs[i])
calc(rs[i])
}
calcAll()
}
</script>
</head>
<body>
</body>
</html> 
616
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
