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>