?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>js get set访问器及日期扩展？
原文地址：https://www.cnblogs.com/sanerandm/p/8448258.html