张鑫旭html入门,张鑫旭前端模板.html

基于HTML模板以及JSON数据的JavaScript交互 » 张鑫旭-鑫空间-鑫生活

body{overflow-x:hidden;}

ul{padding:0; margin:0; list-style-type:none;}

.equal_height{width:100%; height:9999px; position:absolute; left:0; top:0;}

.cho_link,.cho_btn,.cho_desc,.cho_asc{background:url(../image/choose_bg.png) no-repeat;}

.cho_search{width:170px; margin-right:-20px; padding-right:20px; *vertical-align:-2px;}

.cho_box{border:1px solid #bfbfbf; background-color:#ebebeb; *position:relative; overflow-y:hidden;}

.cho_line{display:block; padding-top:2px; background-color:#d2d2d2; border-bottom:1px solid #f0f0f0;}

.cho_left{width:20%; margin-right:10px; float:left; position:relative;}

.cho_equal_height{border-right:1px solid #ccc; background-color:#fff;}

.cho_menu{padding-bottom:72px;}

.cho_link,.cho_link_on{display:block; line-height:32px; padding-left:19px; color:#333; *zoom:1;}

.cho_link{background-color:#fafafa; border-bottom:1px solid #f6f6f6;}

.cho_link:hover{background:#f6f6f6; border-bottom:1px solid #e0e0e0; text-decoration:none;}

.cho_link_on{margin:-1px -1px 0 0; background:#ebebeb; border-bottom:1px solid #ccc; border-top:1px solid #ccc; position:relative; cursor:default;}

.cho_link_on:hover{text-decoration:none;}

.cho_list,.cho_list_title{line-height:21px; padding:5px 20px; border-bottom:1px solid #d9d9d9;}

.cho_list_title{border-bottom-color:#ccc;}

.cho_list_hover,.cho_list:hover{background-color:#f3f3f3;}

.cho_list_on,.cho_list_on:hover{background-color:#fbfbfb;}

.cho_list_li{width:33%; float:left;}

.cho_btn{display:inline-block; width:45px; height:20px; line-height:19px; background-position:0 -230px; color:#666; font-weight:bold; text-shadow:1px 1px #fff;}

.cho_btn{position:absolute; left:-6000px;}

.cho_btn:hover{background-position:0 -260px; color:#fff; text-decoration:none; text-shadow:0 -1px #0D7D00;}

.cho_list_hover .cho_btn, .cho_list:hover .cho_btn{position:static;}

.cho_desc,.cho_asc{display:inline-block; width:16px; height:17px; margin-bottom:-3px;}

.cho_desc{background-position:0 -50px;}

.cho_desc:hover{background-position:0 -80px;}

.cho_desc_off{background-position:0 -110px;}

.cho_asc{background-position:0 -140px;}

.cho_asc:hover{background-position:0 -170px;}

.cho_asc_off{background-position:0 -200px;}

.cho_input{width:42px; height:15px; margin:0 5px; padding:0 0 1px 0; text-align:center; vertical-align:middle;}

.cho_out{display:none;}

基于HTML模板以及JSON数据的JavaScript交互

展示

回到相关文章 »

下面的数据是谷歌到的北京2012-09-23前后的菜价

• 我爱水果
• 我爱蔬菜

• 名称
• 价格(元)
• 数量/操作

• $name$
• $price$$units$

• 购买

  href="javascript:" class="cho_asc" name="choOpt" title="增加一份" rel="$numAsc$" id="$id$">

Designed & Powerd by zhangxinxu

Copyright© 张鑫旭-鑫空间-鑫生活

鄂ICP备09015569号

var dataVegetables = {

typeId: "bbbbbb",

goods: [{ id: "000010", name: "白萝卜", price: 0.4, units: "/斤", num: 0 },

{ id: "000011", name: "花生", price: 2.25, units: "/斤", num: 0 },

{ id: "000012", name: "菜花", price: 0.85, units: "/斤", num: 0 },

{ id: "000013", name: "绿豆芽", price: 0.83, units: "/斤", num: 0 },

{ id: "000014", name: "荸荠", price: 2.13, units: "/斤", num: 0 },

{ id: "000015", name: "红薯 ", price: 0.5, units: "/斤", num: 0 },

{ id: "000016", name: "大白菜 ", price: 0.35, units: "/斤", num: 0 },

{ id: "000017", name: "青蒜 ", price: 0.75, units: "/斤", num: 0 },

{ id: "000018", name: "冬瓜", price: 0.32, units: "/斤", num: 0 },

{ id: "000019", name: "扁豆 ", price: 1.7, units: "/斤", num: 0 }]

};

String.prototype.temp = function(obj) {

return this.replace(/\$\w+\$/gi, function(matchs) {

var returns = obj[matchs.replace(/\$/g, "")];

return (returns + "") == "undefined"? "": returns;

});

};

var object = {

$: function(id) {

return document.getElementById(id);

},

json: {},

hash: {},

dataGroup: function() {

var data = this.json.goods, length = data && data.length;

for (var index = 0; index < length; index+=1) {

this.hash[data[index].id] = index;

}

return this;

},

htmlList: function() {

var html = '', choosed = 0;

var index = 0, data = this.json.goods, length = data && data.length;

for (index; index < length; index+=1) {

if (data[index].num === 0) {

data[index].cl = "";

data[index].clbuy = "";

data[index].clnum = "cho_out";

} else {

data[index].cl = "cho_list_on";

data[index].clnum = "";

data[index].clbuy = "cho_out";

data[index].numDesc = data[index].num - 1;

data[index].numAsc = data[index].num + 1;

choosed++;

}

html += this.htmlTemp.temp(data[index]);

}

this.$(this.json.typeId).innerHTML = choosed? ("× " + choosed) : "";

return html;

},

eventBind: function() {

var self = this;

var oA = document.getElementsByTagName("a"), oA_length = oA.length;

var oInput = document.getElementsByTagName("input"), oInput_length = oInput.length;

for (var i=0; i

if (oA[i].name === "choOpt") {

oA[i].onclick = function() {

var id = this.id, num = Number(this.rel) || 0, title = this.title;

self.json.goods[self.hash[id]].num = num;

self.htmlAppend();

return false;

};

}

}

for (var i=0; i

oInput[i].onchange = function() {

if (this.name === "choInput") {

var id = this.id, num = parseInt(this.value, 10) || 0;

self.json.goods[self.hash[id]].num = num;

self.htmlAppend();

return false;

}

};

}

return this;

},

htmlAppend: function() {

this.listBox.innerHTML = this.htmlTitle + this.htmlList();

this.eventBind();

return this;

},

init: function() {

this.json = dataVegetables;

this.listBox = this.$("listOut");

this.htmlTemp = this.$("tempArea").value;

this.htmlTitle = this.listBox.innerHTML;

this.dataGroup().htmlAppend();

}

};

object.init();

var _gaq = _gaq || [];

_gaq.push(['_setAccount', 'UA-11205167-1']);

_gaq.push(['_trackPageview']);

(function() {

var ga = document.createElement('script');

ga.type = 'text/javascript';

ga.async = true;

ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';

var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);

})();

var _hmt = _hmt || [];

(function() {

var hm = document.createElement("script");

hm.src = "https://hm.baidu.com/hm.js?48d8e938d5365a4cb0fc9e65d945018e";

var s = document.getElementsByTagName("script")[0];

s.parentNode.insertBefore(hm, s);

})();

(function(){

var bp = document.createElement('script');

var curProtocol = window.location.protocol.split(':')[0];

if (curProtocol === 'https'){

bp.src = 'https://zz.bdstatic.com/linksubmit/push.js';

}

else{

bp.src = 'http://push.zhanzhang.baidu.com/push.js';

}

var s = document.getElementsByTagName("script")[0];

s.parentNode.insertBefore(bp, s);

})();

一键复制

编辑

Web IDE

原始数据

按行查看

历史