JavaScript作业六 HTML5应用


【任务9-1】实现商品详情页面的框架结构。

<article id="main"> 
 <!--顶部区域 start-->
 <header class="top_bg">
 </header>
 <!--顶部区域 end--> 
 <!--logo和banner start-->
 <div class="logo">
 <img src="images/logo.jpg" >
 <img src="images/banner.jpg" >
</div>
 <!--logo和banner end--> 
 <!--菜单导航 start-->
 <nav class="nav_bg"></nav>
 <!--菜单导航 end--> 
 <!--中间部分 start-->
<section>
<div class="main">
 <nav class="menu"></nav>
 <!--中间区 start-->
 <div class="middle">
 <h1 class="pic_title">商品详情</h1>
 <div class="clear"></div>
 <div class="left_pic"></div>
 <article class="tab_content2 none"></article>
 <article class="tab_content3 none"></article>
 <!--品牌活动-->
 <h1 class="pic_title">看了又看</h1>
 <div class="clear"></div>
 <ul class="pic_list4"></ul>
 </div>
 <!--中间区 end--> 
 <!--右侧热门推荐 start-->
 <aside class="right_nav"></aside>
</div>
</section>
 <!--右侧热门推荐 end--> 
 <!--中间部分 end-->
 <footer>
 <div class="clear"></div>
 <div class="foot">
 <div class="foot_title"></div>
 <ul class="foot_list"></ul>
 <div class="clear"></div>
 <div class="foot_line"></div>
 </div>
</footer>
</article>

【任务9-2】商品详情页面的整体实现。

 

<div class="middle">
 <h1 class="pic_title">商品详情</h1>
 <div class="left_pic">
 <div id="box">
 <img src="images/showdetail/dd1.jpg" width="400" height="400" id="showGoodsPicture">
 <div id="shade"></div>
 </div>
 <ul class="small_piclist" id="goodsList">
 <li><img src="images/showdetail/dd1.jpg" onclick="changeGoodsImage(this)"></li>
 <li><img src="images/showdetail/dd1.jpg" onclick="changeGoodsImage(this)"></li>
 <li><img src="images/showdetail/dd1.jpg" onclick="changeGoodsImage(this)"></li>
 <li><img src="images/showdetail/dd1.jpg" onclick="changeGoodsImage(this)"></li>
 <li><img src="images/showdetail/dd1.jpg" onclick="changeGoodsImage(this)"></li>
 </ul>
 <canvas id="canvas" width="400px" height="400px"></canvas>
 </div>
 <div class="right">
 <h1 class="font16">冬季新款牛仔外套女中长款加厚<br/>
 女冬装连帽毛领加绒牛仔棉衣女风衣</h1>
 <img src="images/showdetail/pic_mess.jpg"> </div>
 <div class="clear"></div>
 <ul class="tab" id="goodsTabs">
 <li class="tab_active" onClick="changeGoodsInfo(this)">商品详情</li>
 <li onClick="changeGoodsInfo(this)">商品评价</li>
 <li onClick="changeGoodsInfo(this)">成交记录</li>
 </ul>
 <article class="tab_content1">
 <ul class="particulars">
 <li title=" 修身">服装版型: 修身</li>
 <li title=" 甜美">风格: 甜美</li>
 <li title=" 瑞丽">甜美: 瑞丽</li>
 <li title=" 中长款">衣长: 中长款</li>
 <li title=" 长袖">袖长:长袖</li>
 <li title=" 常规">袖型: 常规</li>
 <li title=" 带帽">领型:带帽</li>
 <li title=" 拉链">衣门襟:拉链</li>
 <li title=" 纯色">图案: 纯色</li>
 <li title=" 81%(含)-90%(含)">成分含量:81%(含)-90%(含)</li>
 <li title=" 棉">质地: 棉</li>
 <li title=" 25-29周岁">适用年龄: 25-29周岁</li>
 <li title=" 2015年冬季">年份季节:2015年冬季</li>
 <li title=" 深蓝色 蓝色">颜色分类: 深蓝色 蓝色</li>
 <li title=" M L XL 2XL">尺码:M L XL 2XL</li>
 </ul>
 <section> <img src="images/showdetail/detail1.jpg"> <img src="images/showdetail/detail2.jpg"> <img src="images/showdetail/dd1.jpg" class="img_border"> <img src="images/showdetail/detail1.jpg" class="img_border"> <img src="images/showdetail/dd1.jpg" class="img_border"><img src="images/showdetail/detail6.jpg" class="img_border"></section>
 </article>
 <article class="tab_content2 none"><img src="images/showdetail/pinglun.jpg"/></article>

......
 </div>

 

【任务9-3】使用HTML 5对后台中的商品添加页面进行重构。

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8"> 
 <title>添加商品页面</title>
 <link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css"> 
 <script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
 <script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
 
</head>
<body>

<ol class="breadcrumb col-sm-6 col-md-offset-3">
 位置:
 <li><a href="#">首页</a></li>
 <li><a href="#">添加商品</a></li>
</ol>

<div class="panel panel-default col-sm-6 col-md-offset-3">
 <div class="panel-body tabson">
<form class="form-horizontal" role="form">
 <div class="form-group">
 <label for="lastname" class="col-sm-2 control-label">商品缩略图:</label>
 <div class="col-sm-6">
 <input id="f_upload" type="file" class="file" />
 </div>
 </div>

<div class="form-group">
 <label for="firstname" class="col-sm-2 control-label">商品名称:</label>
 <div class="col-sm-6">
 <input type="text" class="form-control" id="goodsName" 
 placeholder="请输入商品名称">
 </div>
 </div>

<div class="form-group">
 <label for="firstname" class="col-sm-2 control-label">商品分类:</label>
 <div class="col-sm-3">
 <select class="form-control" id="goodsType">
 <option>请选择分类</option>
 <option>男装</option>
 <option>女装</option>
 <option>童装</option>
 <option>运动</option>
 <option>其他</option>
 </select>
 </div>
 </div>

<div class="form-group">
 <label for="firstname" class="col-sm-2 control-label">商品单价:</label>
 <div class="input-group col-sm-6">
 <input type="text" class="form-control" id="unitPrice">
 <span class="input-group-addon">元</span>
 </div>
 </div>

<div class="form-group">
 <label for="firstname" class="col-sm-2 control-label">团购价:</label>
 <div class="input-group col-sm-6">
 <input type="text" class="form-control" id="groupPrice">
 <span class="input-group-addon">元</span>
 </div>
 </div>

<div class="form-group">
 <label for="firstname" class="col-sm-2 control-label">商品数量:</label>
 <div class="input-group col-sm-6">
 <input type="text" class="form-control" id="number">
 <span class="input-group-addon">件</span>
 </div>
 </div>


 <div class="form-group">
 <label for="firstname" class="col-sm-2 control-label">发布日期:</label>
 <div class="col-sm-6">
 <input type="text" class="form-control" id="publishDate" 
 placeholder="请输入发布日期">
 </div>
 </div>

<div class="form-group">
 <label for="firstname" class="col-sm-2 control-label">是否审核:</label>
 <div class="col-sm-3">
 <select class="form-control" id="isChecked">
 <option>请选择</option>
 <option>已审核</option>
 <option>未审核</option>
 </select>
 </div>
 </div>

<div class="form-group">
 <label for="lastname" class="col-sm-2 control-label">商品描述:</label>
 <div class="col-sm-6">
 <textarea class="form-control" rows="4" id="content"></textarea>
 </div>
 </div>

<div class="form-group">
 <div class="col-sm-offset-2 col-sm-10">
 <input type="" type="submit" class="btn btn-danger" id="btnPublish" value="马上发布" />
 </div>
 </div>
</form>
 </div>
</div>

</body>
</html>

 

【任务10-1】实现商品详情页面中的商品切换效果。 {#yui_3_17_2_1_1524803723682_271}  

//切换商品展示区中的图像
function changeGoodsImage(thumb) {
 //设置当前缩略图在商品展示区显示对应的大图
 var showGoodsPicture = document.getElementById("showGoodsPicture"); 
 showGoodsPicture.src = thumb.src;
 //获取商品缩略图对应的li元素集合
 var goodsList = document.getElementById("goodsList");
 var items=goodsList.getElementsByTagName("li");
 //遍历li元素集合,将所有的图像边框颜色改为默认样式
 for (var i = 0; i < items.length; i++) {
 var thumbImages=items[i].getElementsByTagName("img");
 thumbImages[0].style.borderColor = "";
 }
 //设置当前缩略图为选中状态
 thumb.style.borderColor = "red";
}
//Tab标签的切换
function changeGoodsInfo(obj){
 var currentSelect=0;
 var goodsTabs=document.getElementById("goodsTabs");
 //获得商品的信息标签(商品详情、商品评价、成交记录)
 var goodsTitles=goodsTabs.getElementsByTagName("li");
 for(var i=0;i<goodsTitles.length;i++){
 goodsTitles[i].className="";
 //判断当前元素对应的位置
 if(obj==goodsTitles[i]){
 currentSelect=i;
 }
 }
 //当前标签处于激活状态
 obj.className="tab_active";
 //设置标签对应的内容部分
 var middleDiv=document.getElementsByClassName("middle");
 var tabCotents=middleDiv[0].getElementsByTagName("article");
 for(var j=0;j<tabCotents.length;j++){
 if(currentSelect==j){
 tabCotents[j].className="tab_content"+(j);
 }else{
 tabCotents[j].className="none tab_content"+(j);
 }
 console.log(tabCotents[j].className);
 }
}

   

【任务10-2】实现商品详情页面中的放大镜效果。

   

/*放大镜效果部分*/
//获取元素的纵坐标(相对于body)
function getTop(e){
 var offset=e.offsetTop;
 if (e.offsetParent!=null){
 offset+=getTop(e.offsetParent);
 }
 return offset;
}
//获取元素的横坐标(相对于body)
function getLeft(e){
 var offset=e.offsetLeft;
 if(e.offsetParent!=null){
 offset+=getLeft(e.offsetParent);
 }
 return offset;
}

function zoomPicture() {
 var box=document.getElementById("box");
 var showGoodsPicture=document.getElementById("showGoodsPicture");
 var canvas=document.getElementById("canvas");
 var shade=document.getElementById("shade");
 if(showGoodsPicture==null) {
 return false;
 }
 //绑定鼠标移出所触发的事件
 box.onmouseout=function(){
 shade.style.display="none";
 canvas.style.display="none";
 document.body.style.cursor="default";
 };
 //绑定鼠标移动所触发的事件
 box.onmousemove =function(ev){
 //设定鼠标的样式
 document.body.style.cursor="move";
 var box = document.getElementById("box");
 var shadeX, shadeY;
 //获取box对象的左侧到浏览器窗口左侧的距离
 var boxX=getLeft(box);
 //获取box对象的顶部到浏览器窗口顶部的距离
 var boxY=getTop(box);
 //计算阴影区域的左上角的x坐标
 shadeX=ev.pageX-boxX-100;
 //计算阴影区域的左上角的y坐标
 shadeY=ev.pageY-boxY-100;
 //防止阴影区域移到图片之外
 if(shadeX<0){
 shadeX=0;
 }
 else if(shadeX>200){
 shadeX=200;
 }
 if(shadeY<0){
 shadeY=0;
 }
 else if(shadeY>200){
 shadeY=200;
 }
 //使用Canvas绘制遮罩区域,并进行放大
 var context=canvas.getContext("2d");
 shade.style.display="block";
 shade.style.left=shadeX+"px";
 shade.style.top=shadeY+"px";
 canvas.style.display="inline";
 context.clearRect(0, 0, 400, 400);
 var image=new Image();
 image.src=showGoodsPicture.src;
 context.drawImage(image, (shade.offsetLeft) * 2, (shade.offsetTop) * 2, 
 400, 400, 0, 0, 400, 400);
 }
}

【任务10-3】实现购物列表中的购物车拖拽效果。

// Created by guoqy
//购物车的显示与隐藏
function showCar(){
 var shopCar = document.getElementsByClassName("dropdown")[0];
 var rightNav = document.getElementsByClassName("right_nav")[0];
 switch(shopCar.style.display){
 case "":
 case "none":
 shopCar.style.display = "block";
 rightNav.style.position = "relative";
 //下移热门推荐模块
 //rightNav.style.top = "100px";
 shopCar.innerHTML = loadCar();
 break;
 case "block":
 shopCar.style.display = "none";
 rightNav.style.position = "static";
 break;
 }
}

//定义一个商品对象
var goods={goodsSrc: null, goodsNum: 1};

//设置拖拽效果
function drag(e){
 e=e||event;
 e.dataTransfer.effectAllowed = "copy";
 //IE需通过服务器访问方式,FF、chrome支持本地方式进行访问
 e.dataTransfer.setData("text", e.target.src); //IE兼容写法
 //e.dataTransfer.setData("text/plain", e.target.src); //标准写法
}

//拖拽释放效果
function drop(e){
 //方式拖拽事件传播
 allowDrop(e);
 //从拖拽事件中获取数据
 var data=e.dataTransfer.getData("text");
 //e.target.id=="dropdown",表示目标对象是div(dropdown)
 //e.target.parentNode.id=="dropdown"表示目标对象是dropdown的直接子元素UL
 //e.target.parentNode.parentNode.id=="dropdown" 表示目标对象是UL中的LI
 //e.target.parentNode.parentNode.parentNode.id=="dropdown"表示目标对是<a>元素
 //e.target.parentNode.parentNode.parentNode.parentNode.id=="dropdown"表示目标对象是<img>元素
 if(e.target.id=="dropdown" || e.target.parentNode.id=="dropdown" 
 || e.target.parentNode.parentNode.id=="dropdown" 
 || e.target.parentNode.parentNode.parentNode.id=="dropdown" 
 || e.target.parentNode.parentNode.parentNode
 .parentNode.id=="dropdown"){
 //从localStorage中尝试根据Src读取数据
 var newGoods=readFromStorage(data);
 //如果localStorage中存在当前商品,则在原基础上加1
 if (newGoods!=null){
 for(var i=0; i<localStorage.length; i++){
 if(data==newGoods.goodsSrc) {
 newGoods.goodsNum+=1;
 goods=newGoods;
 break;
 }
 }
 }else{
 //如果localStorage中,没有该商品,创建一个新对象,且商品数量为1
 goods.goodsSrc=data;
 goods.goodsNum=1;
 }
 //把处理后的商品信息存储到localStorage
 localStorage.setItem(data, JSON.stringify(goods));
 //重新加载并刷新页面中的购物车
 document.getElementsByClassName("dropdown")[0].innerHTML=loadCar();
 }
}
//阻止被拖拽的图片在新窗口打开
function allowDrop(e){
 e.preventDefault();//通知浏览器不再执行事件相关的默认动作
 e.stopPropagation();//阻止事件冒
}
//根据key读取localStorage的值并封装成JSON
function readFromStorage(key){
 var jsonStr=localStorage.getItem(key);
 var newGoods=JSON.parse(jsonStr);
 return newGoods;
}

//加载购物车
function loadCar(){
 //localStorage不为空时,将购物车中的信息读出来并显示到页面中
 if(localStorage.length!=0){
 var ulObject=document.createElement("ul");
 ulObject.className="shop_pic";
 for(var i=0; i<localStorage.length; i++){
 var key=localStorage.key(i);
 goods=readFromStorage(key);
 if(goods!=null) {
 var liObject=document.createElement("li");
 liObject.innerHTML='<a href="#"><img src="'+goods.goodsSrc
 +'" width="80px" height="96px"/></a><p>'+goods.goodsNum
 +'件<a href="javascript:void(0)" onclick="delStorage(this)"><span class="orange floatr">删除</span></a></p>';
 }
 ulObject.appendChild(liObject);
 }
 return ulObject.outerHTML;
 }
 return "购物车还是空的,赶快加点东西吧~";
}

//从localStorage中删除某个元素
function delStorage(element){
 //获得被点击的<a>元素的对应的img标签的src属性
 var targetSrc=element.parentNode.parentNode.childNodes[0]
 .childNodes[0].src;
 //根据src属性读取localStorage中的商品
 var delGoods=readFromStorage(targetSrc);
 delGoods.goodsNum-=1;
 //如果商品数量等于0,则移除该商品
 if(delGoods.goodsNum==0){
 localStorage.removeItem(targetSrc);
 }else{
 //如果商品数量大于0,将修改后的信息保存到localStorage中
 localStorage.setItem(targetSrc,JSON.stringify(delGoods));
 }
 //删除成功后,重新加载并更新页面中的购物车
 document.getElementsByClassName("dropdown")[0].innerHTML=loadCar();
}

//窗口加载时,为允许拖拽的图片添加draggable属性和ondragstart事件
window.onload=function(){
 var pic_list=document.getElementsByClassName("pic_list")[0];
 var pic_list_div=pic_list.getElementsByTagName("div");
 for(var i=0;i<pic_list_div.length;i++){
 var image=pic_list_div[i].getElementsByTagName("img")[0];
 image.setAttribute("draggable",true);
 image.ondragstart=drag;
 }
}

声明:May丶乘剑的部落小阁|版权所有,违者必究|如未注明,均为原创|本网站采用BY-NC-SA协议进行授权

转载:转载请注明原文链接 - JavaScript作业六 HTML5应用


一个努力、偶尔懈怠的"搬砖"的人