1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <title></title> 6 </head> 7 <body> 8 <div id="itemInfo"> 9 <div id="name"> 10 <h1 id="pname">乐视TV（ Letv） S50 Air 全配版 50英寸2D智能LED液晶 超级电视</h1> 11 <div id="pdes">各地区货源已陆续到库，我们将在十月十号左右发货，对于此次延迟发货给您带来的不便表示致歉，望您谅解。</div> 12 <div >已售：<strong id="psales">6000</strong></div> 13 <div>原价：<strong id='pprice'>6000</strong>元</div> 14 <div>优惠价：<strong id='pyouhui'>5000</strong>元</div> 15 <div>折扣：<strong id='pzhekou'>6.0</strong>折</div> 16 <div>生产日期：<strong id='date'>2015-09-09</strong></div> 17 </div> 18 </div> 19 <button id='btn'>加入购物车</button> 20 21 </body> 22 </html> 23 24 <script> 25 var price = document.getElementById('pprice').value; 26 var productDate = document.getElementById('date').value; 27 function dateFormat(date,format) { 28 var o = { 29 "M+" : date.getMonth()+1, //month 30 "d+" : date.getDate(), //day 31 "h+" : date.getHours(), //hour 32 "m+" : date.getMinutes(), //minute 33 "s+" : date.getSeconds(), //second 34 "q+" : Math.floor((date.getMonth()+3)/3), //quarter 35 "S" : date.getMilliseconds() //millisecond 36 } 37 if(/(y+)/.test(format)) format=format.replace(RegExp.$1, 38 (date.getFullYear()+"").substr(4- RegExp.$1.length)); 39 for(var k in o)if(new RegExp("("+ k +")").test(format)) 40 format = format.replace(RegExp.$1, 41 RegExp.$1.length==1? o[k] : 42 ("00"+ o[k]).substr((""+ o[k]).length)); 43 return format; 44 } 45 function Product() { 46 this.name = ''; 47 this.price = 0; 48 this.description = ''; 49 this.zhekou = 0; 50 this.sales = 0; 51 this.productDate= ''; 52 //get set 取值器 设置器 53 /*我们的需求：自动计算打折后的价格*/ 54 Object.defineProperty(this,"price",{ 55 get: function () { 56 return price * 0.9; 57 }, 58 set: function (value) { 59 /*大概普通产品的价格都在0-1w*/ 60 if(value > 10000){ 61 alert('产品价格必须在0-10000之间'); 62 }else { 63 price = value; 64 } 65 } 66 }); 67 //给属性添加权限 defineProperty 68 Object.defineProperty(this,"price",{ 69 value:50000, 70 writable:false 71 }); 72 Object.defineProperty(this,"productDate",{ 73 get: function () { 74 return dateFormat(productDate,"yyyy-MM-dd"); 75 }, 76 set: function (value) { 77 productDate = value; 78 } 79 }); 80 81 } 82 Product.prototype = { 83 // getPrice: function () { 84 // return this.price; 85 // }, 86 addToCart: function () { 87 alert('添加商品到购物车'); 88 89 }, 90 init: function () { 91 this.bindDom(); 92 this.bindEvents(); 93 }, 94 bindDom: function () { 95 //获取元素 96 var btn = document.getElementById('btn'); 97 var pname = document.getElementById('pname'); 98 var pprice = document.getElementById('pprice'); 99 var sum = document.getElementById('sum'); 100 var des = document.getElementById('pdes'); 101 var youhuijia = document.getElementById('pyouhui'); 102 var zhekou = document.getElementById('pzhekou'); 103 var sales = document.getElementById('psales'); 104 var date = document.getElementById('date'); 105 /*绑定元素*/ 106 /*通过点语法访问对象中的属性或者方法*/ 107 pname.innerHTML=this.name; 108 pprice.innerHTML=this.price; 109 des.innerHTML=this.description; 110 youhuijia.innerHTML=this.youhuijia; 111 zhekou.innerHTML=this.zhekou; 112 sales.innerHTML=this.sales; 113 date.innerHTML = this.productDate; 114 115 }, 116 bindEvents: function () { 117 // var btn = document.getElementById('btn'); 118 var that = this; 119 btn.onclick = function () { 120 that.addToCart(); 121 } 122 } 123 } 124 125 126 127 128 window.onload = function () { 129 var iphone = new Product(); 130 iphone.name = 'iphone7'; 131 iphone.price = 10000; 132 iphone.description='手机中的战斗机'; 133 iphone.youhuijia=3000; 134 iphone.zhekou=3.0; 135 iphone.sales=40000; 136 iphone.productDate = new Date(); 137 138 iphone.init(); 139 140 141 142 143 144 } 145 </script>