![目录]()
第01章 创建一个HTML网页
1.1 认识HTML.2
1.2 HTML标签.2
1.3 HTML文件的基本结构3
1.4.Chrome的开发者工具3
1.5 在记事本中编写HTML文件5
1.6.使用编辑器创建HTML文档6
1.6.1.下载 Hbuilder X6
1.6.2.使用Hbuilder X.8
1.7 编写第 一个HTML网页9
1.8 练习题11
1.9 章节任务11
第02章 HTML基本标签
2.1.HTML文档头部13
2.2.网页标题
13
2.3.元信息<meta>13
2.3.1.设置网页关键字14
2.3.2.设置网页说明14
2.3.3.添加作者信息15
2.3.4.规定字符编码15
2.3.5.设置网页的定时跳转15
2.4 HTML注释<!-- -->.16
2.5 HTML标题<h1>~<h6>17
2.6 HTML段落<br/><br/> .18
2.7 换行<br> 19
2.8 水平线<hr>.20
2.9 文本格式化20
2.10.HTML字符实体22
2.10.1 不间断的空格22
2.10.2 插入特殊符号23
2.11 练习题.23
2.12.章节任务.24
第03章 建立超链接
3.1 超链接的基础知识26
3.1.1 绝对路径26
3.1.2 相对路径27
3.1.3 超链接27
3.2 在新窗口打开链接28
3.3 创建锚点链接29
3.3.1 锚点链接29
3.3.2 链接同一网页中的锚点.30
3.3.3 链接到其他网页中的锚点31
3.4 外部链接33
3.4.1 链接到外部网站33
3.4.2 链接到E-mail.34
3.4.3 链接到FTP34
3.4.4 链接到Telnet35
3.4.5 下载文件35
3.5 练习题35
3.6.章节任务36
第04章 使用图像
4.1 图像的格式38
4.1.1.GIF格式.38
4.1.2.JPEG格式38
4.1.3.PNG格式38
4.2 标签基础语法38
4.3 图像的路径src 39
4.4 图像的提示文字alt .39
4.5 图像的宽度（width）和高度（height）.40
4.6 图像的超链接40
4.6.1 图像的超链接.41
4.6.2 图像热区链接41
4.7 练习题43
4.8.章节任务43
第05章 使用列表
5.1 有序列表45
5.1.1 <ol>标签45
5.1.2 有序列表的序号类型type.46
5.1.3 有序列表的起始数值start.47
5.2 无序列表48
5.3 定义列表<dl>.49
5.4 列表的嵌套49
5.5 练习题50
5.6 章节任务50
第06章 使用表格
6.1 创建表格52
6.1.1 表格的基本构成<table>、<tr>、<td>52
6.1.2 设置表格的标题<caption>53
6.1.3 表头<th>53
6.2 表格基本属性54
6.2.1 表格宽度width.55
6.2.2 表格的边框border.56
6.2.3 单元格间距cellspacing 57
6.2.4 表格内文字与边框间距cellpadding57
6.3 表格的行属性58
6.3.1 行内文字的水平对齐方式align58
6.3.2 行内文字的垂直对齐方式valign.59
6.4 单元格属性59
6.4.1 单元格跨列colspan .60
6.4.2 单元格跨行rowspan61
6.5 表格结构61
6.6 练习题62
第07章 使用表单
7.1 form元素创建表单65
7.1.1 提交表单action65
7.1.2 表单名称name65
7.1.3 传送方法method 66
7.2 插入input元素.66
7.2.1 文本框text 68
7.2.2 密码框password .69
7.2.3 单选按钮radio 69
7.2.4 复选框checkbox 70
7.2.5 普通按钮button .70
7.2.6 提交按钮submit 70
7.2.7 重置按钮reset71
7.2.8 图像域image .72
7.3.HTML5新增输入类型72
7.3.1 数值number72
7.3.2.时间选择器DatePicker73
7.4 下拉菜单74
7.5 文本域textarea.75
7.6 创建表单案例75
7.7 练习题78
7.8 章节任务78
第08章 使用CSS样式表
8.1 CSS基础语法80
8.1.1 认识CSS80
8.1.2.CSS语法结构80
8.1.3.CSS选择器81
8.2 添加CSS的方法82
8.2.1.链接外部样式表82
8.2.2.内部样式表82
8.2.3.导入外部样式表83
8.2.4.内嵌样式83
8.3 字体属性83
8.3.1 字体font-family.83
8.3.2 字号font-size.84
8.3.3 字体样式font-style85
8.3.4 加粗字体font-weight86
8.3.5 小写字母转为大写字母font-variant.87
8.3.6 字体复合属性88
8.4 颜色属性color89
8.5 背景属性90
8.5.1 背景颜色background-color90
8.5.2 背景图像background-image91
8.5.3 背景大小background-size92
8.5.4 背景重复background-repeat93
8.5.5 背景位置background-position.94
8.5.6 背景附件background-attachment.96
8.5.7 背景复合属性background97
8.6 段落属性98
8.6.1 单词间隔word-spacing98
8.6.2 字符间隔letter-spacing.99
8.6.3 文字修饰text-decoration.100
8.6.4 水平对齐方式text-align.101
8.6.5 垂直对齐方式vertical-align
102
8.6.6 文本转换text-transform103
8.6.7 文本缩进text-indent104
8.6.8 文本行高line-height105
8.6.9 处理空白white-space106
8.7 练习题.107
8.8 章节任务.107
第09章 盒模型布局
9.1 认识盒模型109
9.1.1.盒模型的构成109
9.1.2.查看元素的盒模型.109
9.2.内容区content.110
9.3.边框border112
9.3.1 边框样式border-style112
9.3.2 边框宽度border-width113
9.3.3 边框颜色border-color114
9.4.内边距padding.114
9.4.1.分别设置4个方向的内边距.115
9.4.2 内边距的复合属性padding116
9.5.外边距margin119
9.5.1 分别设置4个方向的外边距.119
9.5.2 外边距复合属性margin121
9.6.盒模型的大小.123
9.7 块元素和内联元素124
9.7.1.块元素和内联元素的特点124
9.7.2.display属性规定元素的类型126
9.8.初始化页面样式127
9.9.练习题.128
9.10 章节任务.128
第 10章 浮动与定位
10.1.文档流131
10.2 浮动属性float131
10.3.图文环绕134
10.4 清除浮动clear.135
10.5 定位方式position139
10.6 元素位置top、right、bottom、left139
10.7.相对定位140
10.8.绝对定位142
10.9.固定定位143
10.10.层叠顺序z-index.144
10.11 练习题.146
10.12.章节任务.147
第 11章 Web标准与CSS网页布局实例
11.1 Web标准149
11.2 DIV+CSS布局网页基础.149
11.2.1 认识DIV149
11.2.2 一列固定宽度149
11.2.3 一列自适应152
11.2.4 两列固定宽度153
11.2.5 两列宽度自适应155
11.2.6 两列布局右列宽度自适应.156
11.3 使用CSS设计网站导航栏157
11.3.1 有鼠标指针移入效果的导航栏157
11.3.2 横向导航159
11.4 使用CSS设计表单样式161
11.4.1 改变按钮的背景颜色和文字颜色.161
11.4.2 设计文本框的样式.162
11.4.3 设计文本框中的提示文字.163
11.5 使用CSS设计表格样式164
11.5.1.折叠边框165
11.5.2.设计表格的字体样式.166
11.6 使用CSS设置链接样式167
11.6.1 去掉超链接的下画线167
11.6.2 改变鼠标指针的类型.167
11.6.3 设置超链接不同状态的样式.168
11.7 练习题169
11.8.章节任务170
第 12章 HTML5新增元素
12.1 认识HTML5 172
12.2 HTML5与HTML4的区别.173
12.2.1 HTML5的文件特征173
12.2.2 HTML5的SEO.173
12.3 HTML5废除的元素和属性.174
12.3.1 废除的元素174
12.3.2 废除的属性175
12.4 HTML5新增的结构元素.176
12.5 HTML5新增的多媒体元素.178
12.5.1.视频元素video178
12.5.2 链接不同的视频文件.179
12.5.3.音频元素audio181
12.6 HTML5新增的画布元素canvas181
12.6.1.创建canvas元素181
12.6.2 绘制矩形183
12.6.3 绘制路径184
12.6.4.颜色渐变185
12.7.练习题187
12.8.章节任务187
第 13章 CSS3新增属性
13.1 边框189
13.1.1 圆角边框border-radius.189
13.1.2 边框图像border-image.191
13.1.3 边框阴影box-shadow192
13.2 背景194
13.2.1 背景图像尺寸background-size194
13.2.2 背景图像定位区域background-origin195
13.2.3 背景绘制区域background-clip.198
13.3 文本201
13.3.1 文本阴影text-shadow201
13.3.2 强制换行word-wrap.202
13.3.3 文本溢出text-overflow.203
13.4 多列.204
13.4.1 创建多列column-count205
13.4.2 列的宽度column-width206
13.4.3 列的间隔column-gap206
13.4.4 列的规则column-rule207
13.5 2D转换208
13.5.1 移动translate()208
13.5.2 旋转rotate()209
13.5.3 缩放scale().210
13.6 过渡212
13.7 动画213
13.7.1 @keyframes规则声明动画.213
13.7.2 animation动画214
13.8 用户界面215
13.8.1 box-sizing.216
13.8.2 resize218
13.9 实例应用219
13.9.1.使用移动方法实现完全居中219
13.9.2 照片墙效果221
13.10 练习题223
13.11.章节任务223
第 14章 移动端网页
14.1.flex布局225
14.1.1.flex相关概念225
14.1.2.flex布局225
14.2.移动端基本概念231
14.2.1.两种像素231
14.2.2.移动端的3个视口231
14.2.3.设备像素比.233
14.3.移动端开发234
14.3.1.移动端单位——vw适配234
14.3.2.开发一个移动端网页238
14.4.媒体查询247
14.5 练习题.250
14.6.章节任务251
第 15章 JavaScript脚本基础
15.1 JavaScript简介253
15.2 JavaScript基本语法254
15.2.1 常量和变量.254
15.2.2.数据类型.255
15.2.3 表达式和运算符256
15.2.4 基本语句.257
15.2.5.JavaScript注释263
15.2.6.JavaScript代码调试263
15.3 JavaScript事件264
15.3.1 onclick事件264
15.3.2 onchange事件.265
15.3.3 onfocus事件.266
15.3.4 onblur事件267
15.3.5.onmouseover事件.268
15.3.6 onmouseout事件269
15.3.7 ondblclick事件 270
15.3.8 其他常用事件.271
15.4 HTML DOM对象.272
15.4.1.DOM元素对象获取页面中的元素.272
15.4.2.DOM属性对象修改元素的属性274
15.5 浏览器的其他内部对象275
15.5.1 navigator对象276
15.5.2 windows对象276
15.5.3 location对象.278
15.5.4 history对象279
15.6 练习题.280
15.7.章节任务281
第 16章 JavaScript 网页特效
16.1 时间特效283
16.1.1 显示当前时间.283
16.1.2 显示当前日期.285
16.1.3.制作倒计时特效.287
16.2 图像特效289
16.2.1 图像闪烁效果.289
16.2.2 图像轮播.290
16.3 窗口特效291
16.3.1 打开新窗口291
16.3.2 定时关闭窗口.293
16.4 鼠标指针特效294
16.4.1 返回鼠标指针的位置信息294
16.4.2 跟随鼠标指针移动的图像295
16.5 练习题.296
16.6.章节任务297
第 17章 PC端实战——制作购物网页
17.1.项目结构299
17.2.制作网页前的准备301
17.2.1.分辨率301
17.2.2.内容居中301
17.3.项目布局302
17.4.<header>部分难点讲解304
17.4.1.<header>布局.304
17.4.2.图文对齐.305
17.5.<main>部分难点讲解308
17.5.1.<main>布局308
17.5.2.复杂网页的选择器使用.310
17.6.实现图像的 JavaScript 动效311
17.6.1.图像的切换311
17.6.2.收藏和取消312
17.7.总结313
</div>
</div>
</div>
</body>
</html>
</div>
</div>
</div>
</div>
<div id="J-procon-comment" class="tabarea-content" style="display:none;"></div>
<div id="J-procon-answer" class="tabarea-content" style="display:none;"></div>
<div id="J-procon-sale" class="tabarea-content" style="display:none;"></div>
</div>
<div id="appraise" class="lazy-ajax mt10" data-type="function"><div class="area loading-holder"></div><a target="_blank" href="//review.suning.com/cmmdty_review/general-000000012318618432-0070067633-1-total.htm">查看全部评论></a>
</div>
<div id="appwd" class="lazy-ajax mt10" data-type="function"></div>
<div id="appAdv" class="mt10"><a rel="nofollow" name="item_12318618432_mobileAd_01" href="//c.m.suning.com/newPacket_pc.html" target="_blank"><img src2="//image3.suning.cn//uimg/cms/img/167836138660343191.png" onerror="javascript:$('#appAdv').hide()"/></a></div> <div id="serviceArea" class="lazy-ajax area mt10">
<div class="area-head"><h3>售后保障</h3></div>
<div class="after-market" id="afterService">
<div id="installService" class="lazy-ajax" data-type="function"></div>
<div id="afterServicePic" class="lazy-ajax after-market-img-list" style="display: none"></div>
<div id="djh-after-market-container" style="display: none"></div>
<div id="snblank" style="display: none"></div>
</div> </div>
<div class="area history mt15" id="historyListDiv" sap-modid="14">
<div class="area-head">
<h3>最近浏览</h3>
</div>
<div class="lazy-ajax history-rec" id="J-historyList" data-type="function">
</div>
</div>
<div class="procon-like mt15 lazy-ajax" id="adDatasDiv" sap-modid="16" style="display: none;">
</div>
<div class="area history mt15" id="historyRecDiv" sap-modid="08">
<div class="area-head">
<h3>猜你喜欢</h3>
</div>
<div class="lazy-ajax history-rec" id="J-historyRec" data-type="jsonp">
</div>
</div>
<script id="guessScriptContent" type="text/html">
{{if skus.length>5}}
<a tabindex="-1" aria-hidden="true" class="btn-dir prev" href="javascript:void(0);"><span class="screen-count"><em class="cur-count">1</em>/<i class="total-count">3</i></span><i class="arr"></i></a>
<a tabindex="-1" aria-hidden="true" class="btn-dir next" href="javascript:void(0);"><span class="screen-count"><em class="cur-count">1</em>/<i class="total-count">3</i></span><i class="arr"></i></a>
{{/if}}
<div class="scroll-box">
<ul>
{{each skus as value i}}
<li com-partinfo="{{value.vendorId}}-{{value.sugGoodsCode}}" com-name="{{value.sugGoodsName}}" com-price="{{value.price}}" com-check="false">
<a tabindex="-1" aria-hidden="true" name="{{value.eleName}}" sa-data="{{value.saData}}" title="{{value.sugGoodsName}}" target="_blank" href="{{value.eleHref}}">
<img alt="{{value.sugGoodsName}}" src="{{value.eleSrc}}">
</a>
<p class="price">
<i>¥</i>{{value.price}}
{{if value.coopSecType == "A4" && value.specialType && value.specialType != "" && value.specialType.indexOf("T0003") > -1}}
<label class="com-has-border">苏宁服务</label>
{{else if value.productType==1 || value.coopSecType == "A4"}}
<label class="com-has-border">苏宁自营</label>
{{/if}}
<p class="title">
<a tabindex="-1" aria-hidden="true" name="{{value.eleName}}" sa-data="{{value.saData}}" id="{{value.eleId}}" target="_blank" href="{{value.eleHref}}">{{value.sugGoodsName}}</a>
</p>
<p class="p-huodong">{{if value.promotionInfo!="" }}<span>{{value.promotionInfo}}</span>{{/if}}</p>
</li>
{{/each}}
</ul>
</div>
</script> <div class="pro-statement hide" id="proStatement">
</div>
</div>
</div>
<div id="addCartPop" class="promtip-addcart hide">
<div class="promtip-addcart-title">
<i class="tipInfo4 mr5"></i>
<span>该商品在当前城市正在进行</span>
<label class="promtip-label">抢购</label> <span>促销</span>
</div>
<ul class="promtip-addcart-panel clearfix">
<li>
<p>抢购价：<span class="price"><i>¥</i> <em id="qg_qgprice">38.00</em></span>
</p>
<a href="javascript:void(0);" id="qg_href" class="btn-view" target="_blank">查看抢购信息</a>
</li>
<li class="sep"></li>
<li>
<p>易购价：<span class="price"><i>¥</i> <em id="qg_promotionPrice">38.00</em></span>
</p>
<a href="javascript:void(0);" id="qg_promotion_href" class="btn-buy">以易购价购买</a>
</li>
</ul>
<p class="promtip-addcart-memo">注：参加抢购将不再享受其他优惠活动</p>
<a href="javascript:void(0)" class="close"></a>
</div>
<div id="J-identify-code" style="display: none;">
<div class="identify-code">
<p class="tips">亲，很抱歉，您购买的宝贝销售异常火爆，让小苏措手不及，请稍后再试~</p>
<div class="code-input clearfix">
<dl>
<dt class="l">验证码</dt>
<dd class="l">
<p class="item-ide"><input id="validateCode" autocomplete="off" class="ui-text l" type="text" value="以下字符不区分大小写"><i id="imageVerifytip" class="tip-icon tip-ok-16 tip-ok l" style="display:none;"></i><em class="code-error l" style="display:none;">验证码错误</em></p>
<p class="item-ide"><img onclick="fun_getVcode()" name="vcodeimg1" id="vcodeimg1" class="l" src="" alt=""><span class="change l">看不清楚？<a href="javascript:void(0);" onclick="fun_getVcode()">换一张</a></span></p>
<p class="item-ide"><a class="lion-btn certain" href="javascript:void(0);" onclick="ajaxCheckVerifyCodeOrSubmit(true);return false;">确定</a><a class="lion-btn close" href="javascript:void(0);">关闭</a></p>
</dd>
</dl>
</div>
</div>
</div>
<div id="J-company-channel" style="display: none;">
<div class="company-channel">
<p class="tips">亲，大宗购物请点击<span><a href="//b.suning.com">企业用户渠道></a></span>小苏的服务会更贴心！</p>
</div>
</div>
<div id="J-boom" style="display: none;">
<div class="company-channel">
<p class="tips">亲，很抱歉，您购买的宝贝销售<span>异常火爆</span>让小苏措手不及，请稍后再试~</p>
</div>
</div>
<div class="pro-pop gray6 hide" id="proPop">
<div class="pop-up fix">
<a id="proPopCloseBtn" class="close-btn" href="javascript:void(0)" title="关闭">x</a>
</div>
<div class="pop-main pop-main-normal fix">
<em class="tipIcon"></em>
<div class="msg"><strong>您已成功将商品加入收藏夹</strong>
<p style="font-size:12px;">查看<a href="#">我的收藏夹</a>
</p>
</div>
</div>
<div class="pop-down">
<a id="proPopSubmit" class="pop-btn" href="javascript:;">确定</a>
</div>
</div>
<div id="win_presell" class="hide">
<div class="presell-pay-failed">
<i></i>
<p id="psellBookMessage">非常抱歉，您前期未参加预订活动，<br />无法支付尾款哦！</p>
<p class="mt20"><a href="javascript:void(0);" class="btn-cancel close">关闭</a></p>
</div>
</div>
<div id="dlg_error_prompt" class="hide">
<div class="d-error-prompt">
<div class="e-img"></div>
<p class="d-message">抱歉，您暂无任性付资格</p>
</div>
</div>
<!---super会员预约弹窗-->
<div id="super-dialog-tell" class="hide">
<div class="orders-dialog-container">
<div class="orders-msg">
<span class="orders-common super-new-posi"></span>
<div class="super-dialog-text"><span id="super-dialog-msg">此时为正式期SUPER会员专享抢购期，普通会员暂不可抢购</span></div>
</div>
<div class="btn-box">
<a href="javascript:;" name="item_12318618432_supertqqqx_click" id="dialogVipPriceClose" class="btn4 close">
<p>继续等待</p>
<p>0小时0分</p>
</a>
<a href="javascript:;" name="item_12318618432_supertqqkt_click" id="dialogVipPriceLink" class="btn3">
<p>立即开通</p>
<p>SUPER会员</p>
</a>
</div>
</div>
</div>
<div id="orders-dialog-content" class="hide" sap-modid="18">
</div>
<div class="lazy-ajax" id="pds-footer" data-type="function">
<div style="height:25px;"></div>
</div>
<script type="text/javascript" src="//res.suning.cn/project/crdnode/common/tingyun.js?v="></script>
<script type="text/javascript" src="//res.suning.cn/project/crdnode/comps/seoComponents-mini.js?v="></script>
<script type="text/javascript">
var isArray=function(obj){return Object.prototype.toString.call(obj)==='[object Array]';}
var windowOnLoadEventQueue=[];var scriptOnLoadEventQueue=[];window.onload=function(){for(var i=0;i<windowOnLoadEventQueue.length;i++){windowOnLoadEventQueue[i]();}}
function addOnLoad(func){windowOnLoadEventQueue=windowOnLoadEventQueue.concat(func);}
var lazyScriptMap={};function lazyLoadScript(src,callback){if(!lazyScriptMap[src]){lazyScriptMap[src]=callback;var scriptNode=document.createElement("script");if('function'===typeof callback){scriptNode.onload=callback;scriptNode.onreadystatechange=function(){if("loaded"==scriptNode.readyState||"complete"==scriptNode.readyState){callback();}}}else if(isArray(callback)){var callbackSequence=function(){for(var i=0;i<callback.length;i++){(callback[i])();}};scriptNode.onload=callbackSequence;scriptNode.onreadystatechange=function(){if("loaded"==scriptNode.readyState||"complete"==scriptNode.readyState){callbackSequence();}}}
scriptNode.type="text/javascript";scriptNode.src=src;var scriptContainer=document.getElementsByTagName("head")[0];scriptContainer.appendChild(scriptNode);}else{}}
function lazyLoadScripts(srcs,callback){var srcNum=srcs.length;var loadingProgress=0;if(srcNum>0){for(var i=0;i<srcNum;i++){var currSrc=srcs[i];lazyLoadScript(currSrc,function(){loadingProgress++;if(srcNum==loadingProgress){if('function'===typeof callback){callback();}else if(isArray(callback)){for(var i=0;i<callback.length;i++){(callback[i])();}}}});}}}
var isTimeout = false;
var lazyLoadFunction = null;
var lazyScriptLoaded = false;
var lazyScriptTimeout = 2000; //默认的超时时间2秒，这个数字2是业务部或用户体验部门来提出要求。
//在懒加载方法中对事件响应后绑定
lazyloadBindingFuc=function() {
$(".mycar, .myhelp, .myweb").bind({
mouseover: function() {
addhover(this);
},
mouseout: function() {
delhover(this);
}
});
}
lazyLoadFunction = function() {
if(lazyScriptLoaded&&isTimeout) { //一旦已经执行过，并且是在timeout的情况下执行，则需要加载da.js
lazyLoadScript(
"//res.suning.cn/javascript/sn_da/da_opt.js?v=2024053023",
function(){
lazyLoadScript("//res.suning.cn/javascript/sn_da/saSiteDsp.js?v=2024053023"
);});
return;
}
lazyScriptLoaded =true;//flag置为true
if (isTimeout) {
lazyLoadScript("//res.suning.cn/javascript/ShoppingArea/V9/ECode.calendar.js?v=2024053023",
function(){
lazyLoadScript("//res.suning.cn/javascript/sn_da/saSiteDsp.js?v=2024053023"
);});
} else {
lazyLoadScript("//res.suning.cn/javascript/ShoppingArea/V9/ECode.calendar.js?v=2024053023",
function(){
lazyLoadScript("//res.suning.cn/javascript/sn_da/da_opt.js?v=2024053023",
function(){
lazyLoadScript("//res.suning.cn/javascript/sn_da/saSiteDsp.js?v=2024053023"
);}
);}
);
}
}
addOnLoad(lazyloadBindingFuc);
addOnLoad(lazyLoadFunction);
//对lazyload设置 超时机制
function checkLazyScriptTimeout(){
isTimeout = true;
if(!lazyScriptLoaded){//检测lazy script是否已经加载
if(!!lazyLoadFunction){//检测下函数空间，以免servlet还没加载完全
lazyLoadFunction();//
}else{
setTimeout(checkLazyScriptTimeout, 1000);//在servlet还没加载完全的情况下，每过1秒，重新检测一次
}
}
}
setTimeout(checkLazyScriptTimeout, lazyScriptTimeout);
/*eval(function(p,a,c,k,e,r){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--)r[e(c)]=k[c]||e(c);k=[function(e){return r[e]}];e=function(){return'\\w+'};c=1};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p}('2 8;5(!8)8={};5(!8.K)8.K={};(4(){2 j=/^\\w*?.A.z$/,1f=9.P.2r,Q=(("10:"==9.P.Q)?"10://":"2l://"),14=16(),7="|",1e=P.T,1h=v(1x(1e));4 U(a){2 b=a.V?v(a.V):"V B",p=a.p?v(a.p):"p B",C=y 2i(),1m=(R(a,C),C)?v(C.2f("").1w(/\\s|\\|/2e,"")):"2d B",t=(t=9.S("2c"))?t.Y:"",1a=p+7+b+7+1m,J=(J=9.S("2b"))?J.Y:"",1g=Q+14+"/2a.25",N=1n(),O="O";1r(O,N,\'/\',"","");2 c=l("23"),Z=22 11=="2s"?11.13:"20 1Z 1X 13",17=N+7+c+7+1a+7+1h,L=a.T?a.T:\'\',M=(L?19(L):\'-\'),F=9.S("1W"),1c=(F?F.Y:""),1d=l(\'1S\').H(\'|\')[1],1y=l(\'1O\'),1j=l(\'1M\'),1l=l(\'1K\').H(\'|\')[0],1o=1g+"?"+"1J="+17+"&1I="+J+"&t="+t+"&1H="+Z+\'&1G=\'+M+\'&F=\'+1c+\'&1D=\'+1d+\'&1C=\'+1y+\'&M=\'+1l+\'&1z=\'+1j;1v(1o)}4 1n(){2 a=y X(),m=1u.21(1A*1u.1B()),1t=a.W().1E().1F(m);6 1t}4 l(a){2 b=9.1q.H("; ");1p(2 i=0;i<b.I;i++){2 c=b[i].H("=");5(c[0]==a)6 1L(c[1])}}4 1v(a){2 n="1N"+(y X()).W();2 i=1i[n]=y 1P();i.1Q=(i.1R=4(){1i[n]=G});i.1T=a+"&1U="+n;i=G}4 16(){5(j.1V(1f)){6"K.A.1b/8"}E{6"1Y.A.1b/8"}}4 15(){6 9.D}4 1r(a,b,c,d,e){2 f=a+"="+24(b);5(d!=""){2 g=y X();g.26(g.W()+d);f+=";27="+g.28()}5(c!=""){f+=";29="+c}2 h=15();5(h.u(".A.z")!=-1){f+=";D=.A.z"}E 5(h.u(".18.z")!=-1){f+=";D=.18.z"}E{f+=";D="+e}9.1q=f}4 19(r){2 a=\'-\';5(!q(r)){a=1s(r,\'2g\',\'&\')}6 a}4 1x(a){5(a.I>2h){a=a.1k(0,2j)}2k(a.u(7)!=-1){a=a.1w(7,"--")}6 a}4 R(n,a){5(n.12==3){a.2m(n.2n)}E 5(n.12==1){1p(2 m=n.2o;m!=G;m=m.2p){R(m,a)}}}4 v(s){6 s!=G?2q(s):""}4 1s(a,b,c){2 d="-",x;5(!q(a)&&!q(b)&&!q(c)){x=a.u(b);5(x>-1){2 e=a.u(c,x);5(e<0){e=a.I}d=a.1k(x+b.I+1,e)}}6 d}4 q(o){6(B==o||\'\'==o||\'-\'==o)}2 k=8.K;k.U=U})();',62,153,'||var||function|if|return|_tag|sa|document||||||||||||getCookieIndex||||id|IsEmpty|||_type|indexOf|_encode||idx|new|com|suning|undefined|_strings|domain|else|urlPattern|null|split|length|_errorCode|click|aHref|sid|oId|_snck|location|protocol|_getString|getElementById|href|sendDatasIndex|name|getTime|Date|value|_cityId|https|sn|nodeType|cityId|server|_getDomain|getServer|cDatas|cnsuning|GetSID|Datas|cn|urlPatternV|visitorID|_toUrl|hostName|clickUrl|_shortToUrl|window|memberID|substring|sessionID|_text|getOnlyIdIndex|url|for|cookie|_addCookie4Index|Pick|onlyId|Math|httpGifSendIndex|replace|_cutUrlToShort|loginUser|mid|100000|random|lu|vid|toString|concat|_sid|_cId|_snme|_snmk|_snmb|unescape|custno|log_|idsLoginUserIdLastTime|Image|onload|onerror|_snma|src|iId|test|URLPattern|get|clicksit|not|can|round|typeof|_snmp|escape|gif|setTime|expires|toGMTString|path|ajaxClick|errorCode|resourceType|text|ig|join|tid|301|Array|300|while|http|push|nodeValue|firstChild|nextSibling|encodeURIComponent|hostname|object'.split('|'),0,{}))*/
$(document).ready(function(){
if($("#anchorList li").length == 0){
$("#J-procon-desc").addClass("not-anchor");
$(".prod-detail-container").addClass('not-anchor');
}
$("dl[name^=item_],img[name^=item_],span[name^=item_],a[name^=item_],p[name^=item_],div[name^=item_],i[name^=item_],li[name^=item_],input[name^=item_],a[name^=reviewitem_],input[name^=reviewitem_],p[name^=reviewitem_]").live("click",function(){
sa.click.sendDatasIndex(this);
});
//分享附节点阻止了冒泡，另设分享
$('.share a[name^=item_],.share span[name^=item_]').on("click", function(){
sa.click.sendDatasIndex(this);
});
// bd.init({
// 'token' : 'other'
// });
var env = "prd";
if(sn.envName){
if(sn.envName == "PROD"){
env = "prd";
}else if(sn.envName == "SIT"){
env = "sit";
}else if(sn.envName == "XGPRE"){
env = "xgpre";
}else if(sn.envName == "PRE"){
env = "pre";
}
}
bd.init({
appCode : "OLSltniYhR1s2xr5",
env : env
});
_dfp.init({
appCode : "OLSltniYhR1s2xr5",
env : env,
error : function (e) {
}
});
});
//FourPage.initCluster();
CommonFourPage.autoPlayer();
FourPage.itemMainTab();//主tab切
iFourth.initDetailScroll();//详情锚点
//初始化横条dom
iFourth.fillProconToolbar();
iFourth.init();//加载页面效果
FourPage.lazyElems();
FourPage.lazyFunction();
FourPage.commGroup()//同级目录
//非捐助加载推荐
if(!sn.donateFlag){
FourPage.Recommend();//推荐
}
//展示举报
FourPage.showJubao();
initHistoryCookie(sn.partNumber,sn.vendorCode);//更新cookie
if($("#kernelParmeter").length>0&&$.trim($("#kernelParmeter").find("ul").html())==""){$("#kernelParmeter").hide()}
$("#cslpBox").html("").show();
iFourth.bindProServTooltip();//服务标签
$("img[src2]").Jlazyload({type: "image", placeholderClass: "err-product"});
//360度图片加载
if(sn.itemViewFlag){
iFourth.popTabFun();
}
$('#hbModel-pj').on('click',function(){
$("#productCommTitle").click();
});
//在线客服
setFixBarOnline();
//DOM结束后塞值防止DOM没加载结束值没塞进去
$("li[rel=#J-procon-comment]").html('<a name="item_'+sn.ninePartNumber+'_tab_pingjia" href="javascript:void(0);">评价（'+sn.reviewTotal+'）</a>');
if(typeof gProduct == "undefined" || gProduct.gors != "0"){
$("#tabAddCart").show();
}else{
$("#tabAddCart").hide();
}
if($("#callmeTile").length == 0){
$("#onlineTile").parent().hide();
}
//相关品牌
Recommend.lazyRelGroup();
//页尾
Recommend.lazyFooter();
iFourth.judgeCanvas();
function parseQueryString(url) {
var regUrl = /^[^\?]+\?([\w\W]+)$/;
var regPara = /([^&=]+)=([\w\W]*?)(&|$|#)/g;
var arrUrl = regUrl.exec(url);
var ret = {};
if (arrUrl && arrUrl[1]) {
var strPara = arrUrl[1];
var result;
while ((result = regPara.exec(strPara)) != null) {
ret[result[1]] = null != result[2]?result[2]:"";
}
}
return ret;
}
window.doSeoComponents = function () {
var reg = /^http(s)?:\/\/(.*?)\//;
var referrer = document.referrer;
var referrerHost = referrer && reg.exec(referrer);
referrerHost = (referrerHost && Array.isArray(referrerHost)) ? referrerHost[2] : '';
var seoReferrerList = ",www.baidu.com,m.baidu.com,so.m.sm.cn,www.so.com,m.so.com,www.sogou.com,wap.sogou.com,cn.bing.com,cn.google.com,so.toutiao.com,m.toutiao.com,nativeapp.toutiao.com,";
if (null != referrerHost && '' != referrerHost && seoReferrerList.indexOf(','+referrerHost+',') != -1) {
var categorys = {first:"502282",second:"502308",third:"502538"};
var coupons = new Array();
console.log(couponList);
if (null != couponList && couponList.length > 0) {
for (var i = 0; i < couponList.length; i++) {
var actObj = couponList[i];
if (null != actObj.activityType && actObj.activityType != "7") {
continue;
}
var obj = parseQueryString(actObj.activityLink);
coupons.push({
actId: actObj.activityId,
actKey: actObj.activitySecretKey,
channel: "",
cityId: sn.lesCityId,
bonusTrigerId: obj.bonusTrigerId==null?"":obj.bonusTrigerId,
mobileVisitWapFlag: "",
versionNo: '',
uuid: '',
sourceId: "2001",
salesPrice: actObj.couponValue,
activityDescription: actObj.activityDesc,
activityTypeId:actObj.activityId,
couponType:actObj.couponType,
couponTypeTag:actObj.couponShowType,
memberAttLimitType:actObj.memberAttributeList
});
}
}
var product = {
cityCode:sn.lesCityId,
prodNo:sn.partNumber,
shopCode:sn.vendorCode,
comeFrompage:"fourGoodpage",
shopName:"文轩网图书旗舰店",
classCode:sn.catenIds,
brandId:"0001400ZU",
distCode:getAddrCode(),
b2cGroupId:sn.categoryId,
goods_price:sn.promotionPrice,
goodsName:sn.itemDisplayName,
productImage:sn.fristPic,
sourceURL:"https://product.suning.com/0070067633/12318618432.html"
};
seoComponents.init({
mode:"compSe",
sourceChannel: "04",
platform: "p",
styles: {},
activityCode: "ACT0000012972",
gameId: "GM0217",
coupons: coupons,
categorys: categorys,
brand:"00014",
product:product
});
}
};
</script>
<script id="shoppingAllowanceDialog" type="text/html">
<div id="o2o-cjhb" sap-modid="23">
<div class="o2o-contain">
<div id="oto-bgg" class="oto-bgg" style='background: url("//image2.suning.cn/uimg/cms/img/154287473370364143.png")'>
<p class="o2o-p1" style='background-image: url("//image2.suning.cn/uimg/cms/img/154510130790775531.png")'></p>
{{if dialogMode == '5'}}
<p class="o2o-p2">活动太火爆 稍后尝试</p>
<br/>
{{else}}
<p class="o2o-p2"><a name="item_12318618432_gwjtmjhd_click" target="_blank" href="{{ruleUrl}}">{{bountyRulDescribe}} ></a></p>
{{if startTimeStr && endTimeStr}}
<p class="o2o-p3">{{startTimeStr}} 至 {{endTimeStr}}</p>
{{/if}}
{{/if}}
<div id="o2oDynamic">
<div class={{if dialogMode == '1'}}
"o2o-common o2o-avalible">
{{else if dialogMode == '4'}}
"o2o-common o2o-success">
{{else if dialogMode == '5'}}
"o2o-common o2o-avalible">
{{/if}}
{{if dialogMode == '5'}}
<div class="o2o-lkbg">刷新</div>
{{else}}
<div class="o2o-d-con">
{{if freeAllowanceObj }}
<div class="o2o-d-y" sendCategory="free_allowance" sa-data="{'eletp':'','eleid':'140000630'}">
<span class="o2o-zydh">抢{{freeAllowanceObj.freeAmount}}元</span>
<span class="o2o-zyxy">可领{{freeAllowanceObj.freeRemainCount}}次</span>
</div>
{{else}}
{{each surplusQuota as quota}}
<div class="{{if !point || point < quota.pointQuota}}o2o-d-n{{else}}o2o-d-y{{/if}}{{if dialogMode != '1'}} hide{{/if}}" {{if quota.sendCategory=="0"}}sa-data="{'eletp':'','eleid':'140000640'}"{{else if quota.sendCategory=="1"}}sa-data="{'eletp':'','eleid':'140000650'}"{{/if}} sendCategory="{{quota.sendCategory}}">
<span class="o2o-zydh">{{if quota.sendCategory=="1"}}抢{{quota.minAllowanceQuota}}-{{quota.maxAllowanceQuota}}元{{else if quota.sendCategory=="0"}}抢{{quota.allowanceQuota}}元{{/if}}</span>
<span class="o2o-zyxy">{{if !point || point < quota.pointQuota}}云钻不足{{else}}需{{quota.pointQuota}}云钻{{/if}}</span>
</div>
{{/each}}
{{/if}}
</div>
<div class="o2o-do-text{{if dialogMode != '4'}} hide{{/if}}"><i>恭喜，兑换成功(</i><i>5</i><i>s)</i></div>
<div class="o2o-done{{if dialogMode != '4'}} hide{{/if}}">获得{{if dialogMode == '4'}}{{exchangeAllowanceQuota}}{{/if}}元购物补贴</div>
{{/if}}
</div>
{{if point >= 0}}
<div class="o2o-my-money">
<span>我的云钻 : </span>
<i>{{point}}</i>
</div>
{{/if}}
{{if bonusUseAmount >= 0 && shopAllowanceRedPacketLinkSwitch == '1'}}
<div class="o2o-my-money">
<a href="//quan.suning.com/shoppingCoupon/shoppingCoupon_{{activityId}}.htm" target="_blank"><span>我的购物补贴 : </span>
<i>¥ {{bonusUseAmount}}</i></a>
</div>
{{/if}}
</div>
</div>
</div>
</div>
<!-- 风控验证 -->
<div class="identity-pop-form" id="vasIdentityPopForm" style="display: none">
<div class="idty-container">
<div class="clearfix" id="vasSlideWords" style="display: none">
<div class="lose-img"></div>
<div class="idty-prompt">
<p>活动太火爆，请滑动验证！</p>
</div>
</div>
<div class="clearfix" id="vasImgWords" style="display: none">
<div class="lose-img"></div>
<div class="idty-prompt">
<p>活动太火爆，请输入验证码验证！</p>
</div>
</div>
<div class="idty-area" id="vasSlideCheck" style="display: none">
<div>
<div style="width: 332px;height: 42px; text-align: center;background: #75C72B;"
id="vasSlideArea"></div>
</div>
</div>
<div class="idty-area" id="vasImgCheck" style="display: none">
<div class="identity-img ">
<div class=" clearfix ">
<div class="idty-input check-err check-correct" id="vasChenckInfo">
<input type="text" id="vasImgtext">
<i class="err-i" style="display: none"></i>
<i class="correct-i" style="display: none"></i>
</div>
<img src="" alt="" class="idtycode-img">
<a href="javascript:;" class="idty-change" onclick="shopAllowance.fk.imageCheck.changeValidate()">换一张</a>
</div>
<div class="err-box" style="display: none" id="vasErrbox"></div>
<a href="javascript:;" class="btn-idty" id="vasValidateButton">验证领取</a>
</div>
</div>
<div id="vasSMSCheck" style="display: none">
<div class="page1 SMS_security">
<div class="info info-tel">
<p>手机号码:<span class="tel-num" id="vasSmsTel"></span></p>
</div>
<p class="info info-code">
<input type="tel" class="code" id="vasSmsCode" placeholder="请输入验证码">
<a class="code1" id="vasGetSmsCode" href="javascript:;">获取验证码</a>
</p>
<p class="error-msg" style="display: none" id="vasSmsErrbox">验证码错误</p>
<div class="btn-box">
<a href="javascript:;" class="btn-idty" id="vasSMSButton">确定</a>
<a href="javascript:;" class="btn2" id="vasSMSCancel">取消</a>
</div>
</div>
</div>
</div>
</div>
</script></body>
</html> 
