<!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>
<meta http-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 #000 solid; margin:30px;}
li img{ height:260px;width:200px;}
p{ height:20px; border-bottom:1px #333 dashed;}
.div1{height:360px;border:1px gray solid;margin:130px auto; position:relative;overflow:hidden;}
.div2{ border:1px #000 solid; 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>
<div class="div1">
<ul>
<li draggable="true">
<img src="img1.jpg" />
<p>javascript高级程序设计</p>
<p>78￥</p>
</li>
<li draggable="true">
<img src="img2.jpg" />
<p>你不知道的javascript</p>
<p>26￥</p>
</li>
<li draggable="true">
<img src="img3.jpg" />
<p>精通javascript</p>
<p>35￥</p>
</li>
<li draggable="true">
<img src="img4.jpg" />
<p>JavaScript权威指南</p>
<p>120￥</p>
</li>
<li draggable="true">
<img src="img5.jpg" />
<p>深入浅出Node.js</p>
<p>36￥</p>
</li>
</ul>
</div>
<div class="div2">
<p>
<span class="box1">数量</span>
<span class="box2">书名</span>
<span class="box3">单价</span>
</p>
</div>
<script>
window.οnlοad=function(){
var aLi = document.getElementsByTagName('li');
var oDiv = document.getElementsByClassName('div2')[0];
var obj = {};
var iNum = 0;
var allMoney =null;
for(var i=0;i<aLi.length;i++){
aLi[i].οndragstart=function(ev){
var aP = this.getElementsByTagName('p');
ev.dataTransfer.setData('title', aP[0].innerHTML );
ev.dataTransfer.setData('money', aP[1].innerHTML );
ev.dataTransfer.setDragImage(this,0,0);
};
oDiv.οndragοver=function(ev){
ev.preventDefault();
}
oDiv.οndrοp=function(ev){
ev.preventDefault();
var Ltitle = ev.dataTransfer.getData('title');
var Lmoney = ev.dataTransfer.getData('money');
if(!obj[Ltitle]){
var oP=document.createElement('p');
var oSpan=document.createElement('span');
oSpan.className = 'box1';
oSpan.innerHTML = 1;
oP.appendChild(oSpan);
var oSpan = document.createElement('span');
oSpan.className = 'box2';
oSpan.innerHTML = Ltitle;
oP.appendChild(oSpan);
var oSpan = document.createElement('span');
oSpan.className = 'box3';
oSpan.innerHTML= Lmoney;
oP.appendChild(oSpan);
oDiv.appendChild(oP);
obj[Ltitle]=1;
}
else{
var aBox1 = document.getElementsByClassName('box1');
var aBox2 = document.getElementsByClassName('box2');
for(var i=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>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-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 #000 solid; margin:30px;}
li img{ height:260px;width:200px;}
p{ height:20px; border-bottom:1px #333 dashed;}
.div1{height:360px;border:1px gray solid;margin:130px auto; position:relative;overflow:hidden;}
.div2{ border:1px #000 solid; 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>
<div class="div1">
<ul>
<li draggable="true">
<img src="img1.jpg" />
<p>javascript高级程序设计</p>
<p>78￥</p>
</li>
<li draggable="true">
<img src="img2.jpg" />
<p>你不知道的javascript</p>
<p>26￥</p>
</li>
<li draggable="true">
<img src="img3.jpg" />
<p>精通javascript</p>
<p>35￥</p>
</li>
<li draggable="true">
<img src="img4.jpg" />
<p>JavaScript权威指南</p>
<p>120￥</p>
</li>
<li draggable="true">
<img src="img5.jpg" />
<p>深入浅出Node.js</p>
<p>36￥</p>
</li>
</ul>
</div>
<div class="div2">
<p>
<span class="box1">数量</span>
<span class="box2">书名</span>
<span class="box3">单价</span>
</p>
</div>
<script>
window.οnlοad=function(){
var aLi = document.getElementsByTagName('li');
var oDiv = document.getElementsByClassName('div2')[0];
var obj = {};
var iNum = 0;
var allMoney =null;
for(var i=0;i<aLi.length;i++){
aLi[i].οndragstart=function(ev){
var aP = this.getElementsByTagName('p');
ev.dataTransfer.setData('title', aP[0].innerHTML );
ev.dataTransfer.setData('money', aP[1].innerHTML );
ev.dataTransfer.setDragImage(this,0,0);
};
oDiv.οndragοver=function(ev){
ev.preventDefault();
}
oDiv.οndrοp=function(ev){
ev.preventDefault();
var Ltitle = ev.dataTransfer.getData('title');
var Lmoney = ev.dataTransfer.getData('money');
if(!obj[Ltitle]){
var oP=document.createElement('p');
var oSpan=document.createElement('span');
oSpan.className = 'box1';
oSpan.innerHTML = 1;
oP.appendChild(oSpan);
var oSpan = document.createElement('span');
oSpan.className = 'box2';
oSpan.innerHTML = Ltitle;
oP.appendChild(oSpan);
var oSpan = document.createElement('span');
oSpan.className = 'box3';
oSpan.innerHTML= Lmoney;
oP.appendChild(oSpan);
oDiv.appendChild(oP);
obj[Ltitle]=1;
}
else{
var aBox1 = document.getElementsByClassName('box1');
var aBox2 = document.getElementsByClassName('box2');
for(var i=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>
580
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
