用JS写一些常用的特效
1.倒计时功能
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
.data{
width:100px;
height:200px;
float:left;
border:1px solid black;
margin:50px;
text-align: center;
line-height: 200px;
}
</style>
</head>
<body>
<p>距离2019-5-24 12:18:00 还有</p>
<div class="data"></div>
<div class="data"></div>
<div class="data"></div>
<div class="data"></div>
</body>
<script>
var kj=document.getElementsByClassName("data");
var totime=new Date("2019-5-24 12:18:00");
function timego(){
var time=new Date();
var s=parseInt((totime.getTime()-time.getTime())/1000);
var sec=parseInt(s%60);
var min=parseInt(s/60%60);
var hour=parseInt(s/60/60%24);
var day=parseInt(s/(3600*24));
kj[0].innerHTML=day+"日";
kj[1].innerHTML=hour+"时";
kj[2].innerHTML=min+"分";
kj[3].innerHTML=sec+"秒";
}
setInterval(timego,1000);
</script>
</html>
2.购物车功能的实现
<script>
window.onload=addnum;
function addnum(){
var jian=document.getElementsByClassName("jian");
var jia=document.getElementsByClassName("jia");
var num=document.getElementsByClassName("txt");
var ckbox=document.getElementsByClassName("ckbox");
var deletebtn=document.getElementsByClassName("delete");
var cartlistinfo=document.getElementsByClassName("cartlist");
var smallprice=document.getElementsByClassName("smallprice");
var totle=document.getElementsByClassName("totleprice")[0];
var btnall=document.getElementById("btnall");
var deleteall=document.getElementById("deleteall");
btnall.onclick=function (){
for(var i=0;i<ckbox.length;i++)
{
ckbox[i].checked=true;
}
showtotle();
}
deleteall.onclick=function (){
for(var i=0;i<ckbox.length;i++)
{
if(ckbox[i].checked)
{
cartlistinfo[i].remove();
i--;
}
}
showtotle();
}
var price=document.getElementsByClassName("price");
for(var i=0;i<jian.length;i++)
{
cartlistinfo[i].index=i;
deletebtn[i].index=i;
deletebtn[i].onclick=function (){
cartlistinfo[this.index].remove();
for(var k=0;k<deletebtn.length;k++)
{
deletebtn[k].index=k;
}
showtotle();
}
ckbox[i].onclick=function (){
showtotle();
}
jian[i].index=i;
jian[i].onclick=function (){
var val=num[this.index].value;
val--;
if(val<=0)
{
val=1;
}
num[this.index].value=val;
showsmallprice();
showtotle();
}
jia[i].index=i;
jia[i].onclick=function (){
var val=num[this.index].value;
val++;
num[this.index].value=val;
showsmallprice();
showtotle();
}
}
showsmallprice();
showtotle();
function showsmallprice(){
for(var i=0;i<price.length;i++)
{
smallprice[i].innerHTML=parseInt(price[i].innerHTML)*num[i].value+"￥";
}
}
function showtotle(){
var totlePrice=0;
for(var i=0;i<smallprice.length;i++)
{
if(ckbox[i].checked)
{
totlePrice+=parseInt(smallprice[i].innerHTML);
}
}
totle.innerHTML=totlePrice+"￥";
}
}
</script>
代码比较繁琐 只贴了JS部分
比较重要的几个函数 算总价 删除函数 全选功能
删除之后索引会出现乱码 选择删除功能采用删一次索引减少一次；
单个删除功能采用重新排序；
3.常见的三级联动
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
省：<select name="" id="s">
<option value="">—请选择—</option>
</select>
市：<select name="" id="ss">
<option value="">—请选择—</option>
</select>
县：<select name="" id="x">
<option value="">—请选择—</option>
</select>
</body>
<script>
var sheng=[
["陕西省"],
["陕西省1"],
["陕西省2"]
];
var shi=[
["西安市","榆林市","宝鸡市"],
["西安市1","榆林市1","宝鸡市1"],
["西安市2","榆林市2","宝鸡市2"]
];
var xian=[
[
["长安县","郭杜","韦曲"],
["清涧县","子长县","绥德县"],
["陈仓","渭滨区","金台区"]
],
[
["长安县1","郭杜1","韦曲1"],
["清涧县1","子长县1","绥德县1"],
["陈仓1","渭滨区1","金台区1"]
],
[
["长安县2","郭杜2","韦曲2"],
["清涧县2","子长县2","绥德县2"],
["陈仓2","渭滨区2","金台区2"]
]
];
var scity=document.getElementById("s");
var sscity=document.getElementById("ss");
var xcity=document.getElementById("x");
for(var i=0;i<sheng.length;i++){
var option=new Option(sheng[i],i);
scity.appendChild(option);
}
var s_index=0;
scity.onchange=function(){
s_index=this.value;
sscity.options.length=1;
xcity.options.length=1;
for(var i=0;i<shi[s_index].length;i++)
{
var option=new Option(shi[s_index][i],i);
sscity.appendChild(option);
}
};
sscity.onchange=function(){
var x=this.value;
for(var i=0;i<xian[s_index][x].length;i++){
var option=new Option(xian[s_index][x][i],i);
xcity.appendChild(option);
}
}
</script>
</html>
网友评论