H5前端拖拽页面开发_简单购物车

h5前端开发 学什么?|h5高级前端开发工程师|网站前端开发

点击图片拖拽至方框中,即可生成购物清单。

html 代码

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<metahttp-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>前端拖拽开发工具:购物车</title>
<style>
*{
margin:0;
padding:0;
}
li{
list-style:none;
float:left;
width:200px;
border:1px#000solid;
margin:30px;
}
liimg{
height:260px;
width:200px;
}
p{
height:20px;
border-bottom:1px#333dashed;
}
.div1{
height:360px;
border:1pxgraysolid;
margin:130pxauto;
position:relative;
overflow:hidden;
}
.div2{
border:1px#000solid;
height:300px;
margin-top:120px;
clear:both;
}
.box1{
float:left;
width:200px;
text-align:center;
}
.box2{
float:left;
width:200px;
text-align:center;
}
.box3{
float:left;
width:200px;
text-align:center;
}
.allMoney{
float:right;
}
</style>
</head>
<body>
<divclass=”div1″>
<ul>
<lidraggable=”true”>
<imgsrc=”img1.jpg” />
<p>javascript高级程序设计</p>
<p>78¥</p>
</li>
<lidraggable=”true”>
<imgsrc=”img2.jpg” />
<p>你不知道的javascript</p>
<p>26¥</p>
</li>
<lidraggable=”true”>
<imgsrc=”img3.jpg” />
<p>精通javascript</p>
<p>35¥</p>
</li>
<lidraggable=”true”>
<imgsrc=”img4.jpg” />
<p>JavaScript权威指南</p>
<p>120¥</p>
</li>
<lidraggable=”true”>
<imgsrc=”img5.jpg” />
<p>深入浅出node.js</p>
<p>36¥</p>
</li>
</ul>
</div>
<divclass=”div2″>
<p>
<spanclass=”box1″>数量</span>
<spanclass=”box2″>书名</span>
<spanclass=”box3″>单价</span>
</p>
</div>
<script>
window.onload = function () {
varaLi=document.getElementsByTagName(‘li’);
varoDiv=document.getElementsByClassName(‘div2’)[0];
varobj={};
variNum=0;
varallMoney=null;
for (vari=0;i<aLi.length;i++) {
aLi[i].ondragstart=function(ev){
varaP=this.getElementsByTagName(‘p’);
ev.dataTransfer.setData(‘title’,aP[0].innerHTML);
ev.dataTransfer.setData(‘money’,aP[1].innerHTML);
ev.dataTransfer.setDragImage(this,0,0);
};
oDiv.ondragover=function(ev){
ev.preventDefault();
}
oDiv.ondrop=function(ev){
ev.preventDefault();
varLtitle=ev.dataTransfer.getData(‘title’);
varLmoney=ev.dataTransfer.getData(‘money’);
if (!obj[Ltitle]) {
varoP=document.createElement(‘p’);
varoSpan=document.createElement(‘span’);
oSpan.className =’box1′;
oSpan.innerHTML=1;
oP.appendChild(oSpan);
varoSpan=document.createElement(‘span’);
oSpan.className =’box2′;
oSpan.innerHTML=Ltitle;
oP.appendChild(oSpan);
varoSpan=document.createElement(‘span’);
oSpan.className =’box3′;
oSpan.innerHTML=Lmoney;
oP.appendChild(oSpan);
oDiv.appendChild(oP);
obj[Ltitle] =1;
}else{
varaBox1=document.getElementsByClassName(‘box1’);
varaBox2=document.getElementsByClassName(‘box2’);
for (vari=0;i<aBox2.length;i++) {
if (aBox2[i].innerHTML==Ltitle) {
aBox1[i].innerHTML=parseInt(aBox1[i].innerHTML) +1;
}
}
}
if (!allMoney) {
allMoney=document.createElement(‘div’);
allMoney.className =’allMoney’;
}
iNum+=parseInt(Lmoney);
allMoney.innerHTML=’合计:’+iNum+’¥’;
oDiv.appendChild(allMoney);
}
}
}
</script>
</body>
</html>
h5前端开发用什么语言?|web前端开发工具h5
» 本文来自:前端开发者 » 《H5前端拖拽页面开发_简单购物车》
» 本文链接地址:https://www.rokub.com/3663.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!