<select name="select">
<option value="0">请选择</option>
<option value="1">苹果</option>
<option value="2">梨</option>
<option value="3">香蕉</option>
</select>
<br/>
单价:<input size="10" name="var1" contentEditable="false"/>
<br/>
数量:<input size="10" name="var2"/><font id="f1" color="red"></font>
<br/>
总价:<input size="20" name="var3"/>
<br/>
<input type="button" value="计算" name="count"/>
<input type="reset"/>
</form>
<script>
document.forms[0].select.onchange=function() {
var form = document.forms[0]
if(form.select.value==1)
{
form.var1.value=2.5
}
else if(form.select.value==2){
form.var1.value=3.5
}
else if (form.select.value==3) {
form.var1.value=4.5
}
}
document.forms[0].var2.onblur=function(){
if(this.value==""||this.value==null)
{
f1.style.fontSize="13px"
f1.innerHTML="请输入数量!"
return
}
var patrn=/^[1-9]{1}\d*$/
var s=this.value
if(!patrn.exec(s))
{
f1.style.fontSize="13px"
f1.innerHTML="请输入正确的数字!"
}
}
document.forms[0].count.onclick=function(){
var form = document.forms[0]
if(form.var1.value==null||form.var1.value=="")
{
alert("请选择需要购买的水果!")
return
}
if(form.var2.value==null||form.var2.value=="")
{
alert("请输入数量!")
return
}
var patrn=/^[1-9]{1}\d*$/
var s=form.var2.value
if(!patrn.exec(s))
{
alert("请输入正确的数字!")
return
}
var result = parseFloat(form.var1.value)*parseFloat(form.var2.value)
form.var3.value=result
}
</script>
<!DOCTYPE html><html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form id="fruits" action="" method="get">
您喜欢的水果？<br /><br />
<label><input name="Fruit" type="checkbox" value="" />苹果 10元</label>
<label><input name="Fruit" type="checkbox" value="" />桃子5元 </label>
<label><input name="Fruit" type="checkbox" value="" />香蕉6元 </label>
<label><input name="Fruit" type="checkbox" value="" />梨 3元</label>
<br /><br />
当前价格: <span id="total">0</span>元
</form>
</body>
</html> <script>
var fruits = document.getElementById('fruits')
var labels = fruits.getElementsByTagName('label')
var total = document.getElementById('total')
total.price = 0
// 循环给每个label标签添加price属性存标签内水果的价格
for (var i = 0, len = labels.length i < len i++){
var str = labels[i].innerText
var price = str.replace(/[^0-9]/ig,"")
labels[i].price = Number(price)
}
// 循环给每个label标签注册点击事件
for (var i = 0, len = labels.length i < len i++){
labels[i].onclick = function (e) {
var e = e || window.event
var elm = e.target || e.srcElement
//label点击拦截,只获取input的click
if (elm.tagName !== 'INPUT'){
return
}
var flag = this.firstChild.checked
if (flag){
total.price += this.price
total.innerText = total.price
}
else {
if (total.price){
total.price -= this.price
total.innerText = total.price
}
}
}
}
</script>
<!DOCTYPE html><html>
<head>
<meta charset="UTF-8">
<title>动态创建HTML实践</title>
<style type="text/css">
.container{
width:800px
margin:20px auto
}
.all{
width:300px
height: 450px
border:1px solid blue
float:left
}
.selected{
width: 300px
height: 450px
border:1px solid green
float:left
margin-left:20px
}
.input{
margin:10px
font-size: 1.2em
}
h1{
border-bottom:2px solid black
}
ul{
padding:2px
}
ul li{
list-style: none
margin-top:4px
margin-left:2px
border:1px solid brown
background-color: beige
font-size:2em
cursor: pointer
}
</style>
<script>
var map={},reg=/^\s+|\s+$/g
onload=function(){
var lis=allFruits.getElementsByTagName("li")
for(var i=0i<lis.lengthi++){
var li=lis[i]
li.onclick=function(){
if(this.parentElement!=selectedFruits){
selectedFruits.appendChild(this)
}else{
allFruits.appendChild(this)
}
}
map[li.innerHTML.replace(reg,"")]=1
}
btnInput.onclick=function(){
var vv=fruitInput.value.replace(reg,"")
if(null==map[vv]){
var li=document.createElement("li")
li.onclick=function(){
if(this.parentElement!=selectedFruits){
selectedFruits.appendChild(this)
}else{
allFruits.appendChild(this)
}
}
li.innerHTML=vv
allFruits.appendChild(li)
map[vv]=1
}else{
alert("“" + vv + "”" + "已经存在 !")
}
}
}
</script>
</head>
<body>
<div>
<div>
<label for="fruitInput" >输入新的水果：</label>
<input id="fruitInput" type="text" />
<input id="btnInput" type="button" value="确认输入"/>
</div>
<div>
<h1>所有水果</h1>
<ul id="allFruits">
<li>苹果</li>
<li>香蕉</li>
<li>橘子</li>
<li>葡萄</li>
<li>柚子</li>
<li>西瓜</li>
<li>哈密瓜</li>
</ul>
</div>
<div>
<h1>我喜欢的水果</h1>
<ul id="selectedFruits"></ul>
</div>
</div>
</body>
</html>
