js高级综合案例
注册页面
<script>
const code =document.querySelector('.code')
let flag=true
code.addEventListener('click',function(){
if(flag)
{
flag=false
let i=5
code.innerHTML=`0${i}秒后重新获取`
const timerid=setInterval(function()
{
i--;
code.innerHTML=`0${i}秒后重新获取`
if(i==0)
{
clearInterval(timerid)
code.innerHTML='重新获取'
flag=true
}
},1000)
}
})
const username=document.querySelector('[name=username]')
username.addEventListener('change',verfifyName)
function verfifyName()
{
const span=username.nextElementSibling
const reg=/^[a-zA-Z0-9_]{6,10}$/
if(!reg.test(username.value))
{
span.innerHTML='输入不合法,请重新输入'
return false
}
span.innerHTML=''
return true
}
const phone=document.querySelector('[name=phone]')
phone.addEventListener('change',verfifyPhone)
function verfifyPhone()
{
const span=phone.nextElementSibling
const reg=/^1(3\d|4[5-9]|5[0-35-9]|6[567]|7[0-8]\d{8})$/
if(!reg.test(phone.value))
{
span.innerHTML='输入不合法,请重新输入'
return false
}
span.innerHTML=''
return true
}
const codeinput=document.querySelector('[name=code]')
codeinput.addEventListener('change',verfifyCode)
function verfifyCode()
{
const span=codeinput.nextElementSibling
const reg=/^[a-zA-Z0-9_]{6,10}$/
if(!reg.test(codeinput.value))
{
span.innerHTML='输入不合法,请重新输入'
return false
}
span.innerHTML=''
return true
}
const password=document.querySelector('[name=password]')
password.addEventListener('change',verfifypassword)
function verfifypassword()
{
const span=password.nextElementSibling
const reg=/^[a-zA-Z0-9_]{6,10}$/
if(!reg.test(password.value))
{
span.innerHTML='输入不合法,请重新输入'
return false
}
span.innerHTML=''
return true
}
const confirm=document.querySelector('[name=confirm]')
confirm.addEventListener('change',verfifyconfirm)
function verfifyconfirm()
{
const span=confirm.nextElementSibling
const reg=/^[a-zA-Z0-9_]{6,10}$/
if(confirm.value != password.value)
{
span.innerHTML='输入不合法,请重新输入'
return false
}
span.innerHTML=''
return true
}
const queren=document.querySelector('.icon-queren')
queren.addEventListener('click',function(){
this.classList.toggle('icon-queren2')
})
const form= document.querySelector('form')
form.addEventListener('submit',function(e){
if(!queren.classList.contains('icon-queren2'))
{
alert("请勾选提交协议")
e.preventDefault()
}
if(!verfifyName()) e.preventDefault()
if(!verfifyPhone()) e.preventDefault()
if(!verfifyCode()) e.preventDefault()
if(!verfifypassword()) e.preventDefault()
if(!verfifyconfirm()) e.preventDefault()
})
</script>
登录界面
<script>
const tab_nav=document.querySelector('.tab-nav')
const pane=document.querySelectorAll('.tab-pane ')
tab_nav.addEventListener('click',function(e){
if(e.target.tagName==='A')
{
tab_nav.querySelector('.active').classList.remove('active')
e.target.classList.add('active')
for(let i=0;i<pane.length;i++)
{
pane[i].style.display='none'
}
pane[e.target.dataset.id].style.display='block'
}
})
const agree=document.querySelector('[name="agree"]')
const form=document.querySelector('form')
const username=document.querySelector('[name=username]')
form.addEventListener('submit',function(e){
e.preventDefault()
if(!agree.checked)
{
return alert('请勾选同意协议')
}
localStorage.setItem('xtx-uname',username.value)
location.href='./index.html'
})
</script>
首页渲染登录跳转
<script>
const tab_nav=document.querySelector('.tab-nav')
const pane=document.querySelectorAll('.tab-pane ')
tab_nav.addEventListener('click',function(e){
if(e.target.tagName==='A')
{
tab_nav.querySelector('.active').classList.remove('active')
e.target.classList.add('active')
for(let i=0;i<pane.length;i++)
{
pane[i].style.display='none'
}
pane[e.target.dataset.id].style.display='block'
}
})
const agree=document.querySelector('[name="agree"]')
const form=document.querySelector('form')
const username=document.querySelector('[name=username]')
form.addEventListener('submit',function(e){
e.preventDefault()
if(!agree.checked)
{
return alert('请勾选同意协议')
}
localStorage.setItem('xtx-uname',username.value)
location.href='./index.html'
})
</script>
放大镜
<script>
const small=document.querySelector('.small')
const middle=document.querySelector('.middle')
const large=document.querySelector('.large')
small.addEventListener('mouseover',function(e)
{
if(e.target.tagName==='IMG')
{
small.querySelector('.active').classList.remove('active')
e.target.parentNode.classList.add('active')
middle.querySelector('img').src=e.target.src
large.style.backgroundImage=`url(${e.target.src})`
}
})
middle.addEventListener('mouseenter',show)
middle.addEventListener('mouseleave',hide)
let timerid=0
function show()
{
clearTimeout(timer)
large.style.display='block'
}
function hide()
{
timer=setTimeout(function(){
large.style.display='none'
},200)
}
large.addEventListener('mouseenter',show)
large.addEventListener('mouseleave',hide)
const layer=document.querySelector('.layer')
middle.addEventListener('mousemove',function(){
layer.style.display='block'
})
middle.addEventListener('mouseleave',function(){
layer.style.display='none'
})
middle.addEventListener('mousemove',function(e){
let x=e.pageX-middle.getBoundingClientRect().left
let y=e.pageY-middle.getBoundingClientRect().top- document.documentElement.scrollTop
if(x>=0 && x<=400 && y>=0 && y<= 400)
{
let mx=0,my=0
if (x < 100) mx = 0
if (x >= 100 && x <= 300) mx = x - 100
if (x > 300) mx = 200
if (y < 100) my = 0
if (y >= 100 && y <= 300) my = y - 100
if (y > 300) my = 200
layer.style.left= mx+ 'px'
layer.style.top= my+ 'px'
large.style.backgroundPositionX=-2*mx+'px'
large.style.backgroundPositionY=-2*my+'px'
}
})
</script>
防抖节流
<script src="https://cdn.jsdelivr.net/npm/lodash@4.17.21/lodash.min.js"></script>
<script>
const video=document.querySelector('video')
video.ontimeupdate = _.throttle(()=>{
localStorage.setItem('time',video.currentTime)
},1000)
video.onloadeddata=()=>{
video.currentTime=localStorage.getItem('time')
}
</script>
点击按钮弹窗效果
<script>
function Modal(title='',message=''){
this.modalBox=document.createElement('div')
this.modalBox.className='modal'
this.modalBox.innerHTML=`
<div class="header">${title} <i>x</i></div>
<div class="body">${message}</div>
`
console.log(this.modalBox);
}
Modal.prototype.open=function(){
const box=document.querySelector('.modal')
box && box.remove()
document.querySelector('body').append(this.modalBox)
this.modalBox.querySelector('i').addEventListener('click',()=>{
this.close()
})
}
Modal.prototype.close=function(){
this.modalBox.remove()
}
document.querySelector('#delete').addEventListener('click',function(){
const a=new Modal('温馨提示','您没有权限删除')
a.open()
})
document.querySelector('#login').addEventListener('click',function(){
const a=new Modal('友情提示','您还没有注册账号')
a.open()
})
</script>
购物网页价格筛选
<script>
const goodsList = [
{
id: '4001172',
name: '称心如意手摇咖啡磨豆机咖啡豆研磨机',
price: '289.00',
picture:'./images/course01.png'
},
{
id: '4001594',
name: '日式黑陶功夫茶组双侧把茶具礼盒装',
price: '288.00',
picture: './images/course01.png',
},
{
id: '4001009',
name: '竹制干泡茶盘正方形沥水茶台品茶盘',
price: '109.00',
picture:'./images/course02.png'
},
{
id: '4001874',
name: '古法温酒汝瓷酒具套装白酒杯莲花温酒器',
price: '488.00',
picture:'./images/course03.png'
},
{
id: '4001649',
name: '大师监制龙泉青瓷茶叶罐',
price: '139.00',
picture:'./images/course04.png'
},
{
id: '3997185',
name: '与众不同的口感汝瓷白酒杯套组1壶4杯',
price: '108.00',
picture:'./images/course05.png'
},
{
id: '3997403',
name: '手工吹制更厚实白酒杯壶套装6壶6杯',
price: '99.00',
picture:'./images/course06.png'
},
{
id: '3998274',
name: '德国百年工艺高端水晶玻璃红酒杯2支装',
price: '139.00',
picture:'./images/course07.png'
},
]
render(goodsList)
function render(arr)
{
let str=''
arr.forEach(item =>
{
const {name,picture,price}=item
str+=`
<div class="item">
<img src=${picture} alt="">
<p class="name">${name}</p>
<p class="price">${price}</p>
</div>`
});
document.querySelector('.list').innerHTML=str
}
document.querySelector('.filter').addEventListener('click',function(e){
const {tagName,dataset}=e.target
if(tagName==='A')
{
let arr=goodsList
if(dataset.index==='1')
{
arr=goodsList.filter(item=> item.price>0 &&item.price<=100)
}
else if(dataset.index==='2')
{
arr=goodsList.filter(item=> item.price>=100 &&item.price<=300)
}
else if(dataset.index==='3')
{
arr=goodsList.filter(item=> item.price>=300)
}
render(arr)
}
})
</script>
购物网页合计商品总额
<script>
const goodsList = [
{
id: '4001172',
name: '称心如意手摇咖啡磨豆机咖啡豆研磨机',
price: 289.9,
picture:'./images/course01.png',
count: 2,
spec: { color: '白色' }
},
{
id: '4001009',
name: '竹制干泡茶盘正方形沥水茶台品茶盘',
price: 109.8,
count: 3,
picture:'./images/course04.png',
spec: { size: '40cm*40cm', color: '黑色' }
},
{
id: '4001874',
name: '古法温酒汝瓷酒具套装白酒杯莲花温酒器',
price: 488,
count: 1,
picture:'./images/course02.png',
spec: { color: '青色', sum: '一大四小' }
},
{
id: '4001649',
name: '大师监制龙泉青瓷茶叶罐',
price: 139,
count: 1,
picture:'./images/course03.png',
spec: { size: '小号', color: '紫色' },
gift: '50g茶叶,清洗球'
}
]
const str= goodsList.map(item=>
{
const {name,price,count,picture,spec,gift}=item
const text=Object.values(spec).join('/')
const gif= gift ? gift.split(',').map(item=>
`<span class="tag">【赠品】${item}</span>`
).join('') : ''
const sub_total=((price*100*count)/100).toFixed(2)
return `
<div class="item">
<img src=${picture} alt="">
<p class="name">${name} ${gif} </p>
<p class="spec">${text}</p>
<p class="price">${price.toFixed(2)}</p>
<p class="count">x${count}</p>
<p class="sub-total">${sub_total}</p>
</div>`
}).join('')
document.querySelector('.list').innerHTML=str
const total=goodsList.reduce((prev,item)=>prev+((item.price*100*item.count)/100),0)
document.querySelector('.amount').innerHTML=total.toFixed(2)