Web前端學習記錄(十四)

寫在前面：

由於w小小的失誤，這篇其實應該是(十三)，害，這件事情說來話長，儘管想改一下名字，但時間的先後沒辦法呀，只好將錯就錯了。
w：一個人的表演，y在演視而不見。

實現購物列表頁面的熱門隨機推薦：

預覽如下：

都挺漂亮的，害，突然想起一個問題，她怎麼還不向我表白？再叫她多喝熱水試試。

hotAdvise.js

// Created by guoqy
//所有的推薦商品數據
var JSONData={
	name:"熱門推薦",
	srcPath:"images/shopshow/",
	data:[{href:"#",src:"s1.jpg",price:56.00},
		{href:"#",src:"s2.jpg",price:97.00},
		{href:"#",src:"s3.jpg",price:89.00},
		{href:"#",src:"s4.jpg",price:69.00},
		{href:"#",src:"s5.jpg",price:35.00},
		{href:"#",src:"s6.jpg",price:18.00},
		{href:"#",src:"s7.jpg",price:76.00},
		{href:"#",src:"s8.jpg",price:82.00},
		{href:"#",src:"s9.jpg",price:60.00},
		{href:"#",src:"yifu1.jpg",price:45.00},
		{href:"#",src:"yifu2.jpg",price:92.00},
		{href:"#",src:"yifu3.jpg",price:16.00},
		{href:"#",src:"yifu4.jpg",price:42.00},
		{href:"#",src:"yifu5.jpg",price:79.00}]
};
//指定窗口加載完畢時，調用的函數
window.onload=function(){
	var adviseContent='<h1 class="notice_title">'
		+JSONData.name+'</h1><ul class="pic_list3">';
	var turnShow=getRandomNum(9,0,14);
	for(var i=0;i<turnShow.length;i++){
		var index=turnShow[i];
		adviseContent=adviseContent+'<li><a href="'+JSONData.data[index].href
				+'"><img src="'+JSONData.srcPath+JSONData.data[index].src
				+'" width="80" height="80"/></a><p class="price2">￥'
				+JSONData.data[index].price+'元</p></li>';
	}
	adviseContent=adviseContent+'</ul>';
	document.getElementsByClassName("right_nav")[0].innerHTML=adviseContent;
};
//設置定時器，定時更新熱門推薦信息
window.setInterval("showHotAdvise()",2000);
//顯示熱門推薦信息
function showHotAdvise(){
	var adviseContent='<h1 class="notice_title">'
		+JSONData.name+'</h1><ul class="pic_list3">';
	var turnShow=getRandomNum(9,0,14);
	for(var i=0;i<turnShow.length;i++){
		var index=turnShow[i];
		adviseContent=adviseContent+'<li><a href="'+JSONData.data[index].href
				+'"><img src="'+JSONData.srcPath+JSONData.data[index].src
				+'" width="80" height="80"/></a><p class="price2">￥'
				+JSONData.data[index].price+'元</p></li>';
	}
	adviseContent=adviseContent+'</ul>';
	document.getElementsByClassName("right_nav")[0].innerHTML=adviseContent;
}
//返回num個不重複的隨機數,範圍在minNum~maxNum之間
function getRandomNum(num,minNum,maxNum){
	var array=new Array();
	for(var i=0;i<num;i++){
		do{
			var randomNum=Math.floor(Math.random()*maxNum+minNum);
			if(!checkNum(array,randomNum)){
				array.push(randomNum);
				break;
			}
		}while(true);
	}
	return array;
}
//數組array中包含num時返回true；否則返回false
function checkNum(array,num){
	for(var i=0;i<array.length;i++){
		if(array[i]==num){
			return true;
		}
	}
	return false;
}

show.css:

@charset "utf-8";
/* CSS Document */
body{
	font-size:12px;
	font-family:microsoft yahei;
	margin:0;
	color:#000
}
*{
	padding:0;
	margin:0
}
li,ul{
	list-style:none
}
a{
	color:#000;
	text-decoration:none
}
a:hover{
	color:#ce2626;
	text-decoration:none
}
img{
	border:none
}
.font16{
	font-size:16px;
	font-weight:700
}
.clear{
	clear:both
}
.floatl{
	float:left
}
.floatr{
	float:right
}
.main{
	margin:10px auto;
	width:1200px
}
/*頭部*/
.top_bg{
	border-bottom:1px solid #ccc;
	font-size:12px;
	font-family:"宋體";
	line-height:30px;
	background:#f7f7f7;
	height:30px
}
.top_content{
	width:1200px;
	margin:0 auto
}
.logo{
	margin:5px auto;
	width:1200px
}
.nav_bg{
	background:#ce2626;
	width:100%;
	color:#fff
}
.nav_content{
	width:1200px;
	margin:0 auto;
	height:40px;
	line-height:40px
}
.nav{
	width:700px;
	float:left;
	margin-left:200px
}
.nav li{
	font-size:16px;
	font-weight:700;
	color:#fff;
	width:80px;
	float:left;
	text-align:center;
	margin-right:15px
}
.orange{
	font-weight:700;
	color:#f60
}
.nav_active{
	background:#b12121
}
a.white{
	color:#fff;
	text-decoration:none
}
a.white:hover{
	color:#ff0;
	text-decoration:none
}

/*下接菜單*/
.xl{
	display:inline-block;
	position:relative
}
/*修改width：120px->130px */
.droparrow{
	position:relative;
	border:1px solid transparent;
	width:130px;
	height:30px;
	display:inline-block;
	padding-left:5px;
	z-index:1000
}
/*去購物車的掉hover效果*
/*.droparrow:hover{background:#fff;width:120px;height:30px;display:inline-block;border:1px solid #ccc;border-bottom:none;padding-left:5px;cursor:pointer}*/
.xl>.dropdown{
	background:#fff;
	width:285px;
	height:225px;
	border:1px solid #ccc;
	padding:5px;
	position:absolute;
	right:0;
	top:30px;
	z-index:999;
	overflow-y:auto;
	overflow-x:hidden;
	display:none
}
/*去購物車的掉hover效果*/
/*.xl:hover>.dropdown{display:block}*/

.shop_pic li{
	float:left;
	margin:0 3px;
	line-height:20px
}
.shop_pic li p{
	text-align:center;
	color:gray
}
.shop_pic img{
	border:1px solid #ccc
}
.shop_pic img:hover{
	border:1px solid #f60
}
.shopcart{
	background:url(../images/shoppingcart.png) no-repeat;
	width:16px;
	height:16px;
	display:inline-block;
	float:left;
	margin:5px 5px 0 0
}
/*左側導航*/
.right_arrow{
	background:url(../images/arrow_r.jpg) no-repeat;
	width:20px;
	height:20px;
	display:inline-block;
	float:right
}
.menu{
	width:220px;
	float:left;
	border:1px solid #e5e4e1
}
.menu li{
	float:left;
	width:220px;
	border-bottom:1px solid #e5e4e1;
	height:33px;
	line-height:33px;
	background:#fafafa;
	font-size:14px;
	text-align:left
}
.menu li .title{
	height:33px;
	background:#e5e4e1;
	font-size:15px;
	text-indent:20px;
	text-align:left;
	width:100%;
	line-height:33px;
	display:inline-block
}
.red_dot{
	font-size:25px;
	margin-right:10px;
	background:url(../images/red_dot.gif) no-repeat;
	width:8px;
	height:8px;
	display:inline-block;
	margin-left:10px
}
/*中間部分*/
.middle{
	float:left;
	width:690px
}
.pic_list{
	float:left
}
.pic_list dl{
	float:left;
	width:152px;
	margin:0 10px 10px
}
.price{
	font-size:15px;
	font-weight:700;
	color:red;
	float:left
}
.price2{
	font-size:12px;
	font-weight:700;
	color:red;
	text-align:center
}
.font12{
	font-size:12px;
	color:#ccc;
	float:right
}
.pic_list dl img{
	padding:5px;
	border:1px solid #ccc;
	margin-bottom:10px
}
.pic_list dl dd{
	float:left
}
.pic_title{
	background:#ff9c01;
	line-height:40px;
	font-size:16px;
	text-indent:20px;
	text-align:left;
	width:680px;
	float:left;
	color:#fff;
	margin:0 10px 10px
}
.pic_list2 li{
	float:left
}
.pic_list2{
	margin:0 6px 0 12px
}
.pic_list2 li{
	width:160px;
	float:left;
	margin:5px 4px
}
/*右側公告*/
.right_nav{
	width:280px;
	border:1px solid #eee;
	float:right
}
.notice_title{
	background:#eee;
	line-height:40px;
	font-size:16px;
	text-indent:20px;
	text-align:left
}
/*foot*/
.footer{
	width:100%;
	background:#efefef;
	height:310px;
	margin-top:15px
}
.foot_title{
	background:#6a6665;
	width:100%;
	height:40px;
	padding-top:8px
}
.foot_pic{
	margin:0 auto;
	width:1200px
}
.foot_pic li{
	width:210px;
	float:left;
	text-align:center
}
.padding-bottom{
	padding-bottom:10px
}
.padding-top{
	padding-top:10px
}
.foot_line{
	border-bottom:1px solid #ccc;
	font-size:12px;
	margin-top:10px
}
.line1{
	background:url(../images/line1.jpg) no-repeat;
	width:20px;
	height:100px;
	display:inline-block
}
.red1{
	background:url(../images/red1.jpg) no-repeat;
	width:35px;
	height:31px;
	display:block
}
.red2{
	background:url(../images/red2.jpg) no-repeat;
	width:35px;
	height:31px;
	display:block
}
.red3{
	background:url(../images/red3.jpg) no-repeat;
	width:35px;
	height:31px;
	display:block
}
.foot_list>li{
	float:left;
	width:170px
}
.foot_list{
	width:1100px;
	margin:0 auto;
	padding-top:20px
}
.foot_list li ul{
	padding-left:10px
}

.pic_list3 li{
	margin:5px;
	float:left;
	width:83px
}
.pic_list3 li img{
	border:1px solid #ccc
}
.gotop{
	background:url(../images/shopshow/gotop.jpg) no-repeat;
	width:60px;
	height:60px;
	position:fixed;
	bottom:20px;
	right:0
}

shoppingShow.html:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>漫步時尚廣場-購物列表</title>
    <link href="css/show.css" rel="stylesheet" type="text/css">

    <script type="text/javascript" src="js/hotAdvise.js"></script>
</head>
<body>
<!--頂部區域 start-->
<div class="top_bg">
  <div class="top_content">
    <div class="floatl"><img src="images/star.jpg">收藏 | HI，歡迎來訂購 ！<a href="../manageadmin/login.html" class="orange">[請登錄]</a> <a href="../register/register.html"  class="orange"> [免費註冊]</a></div>
    <div class="floatr">客戶服務<img src="images/arrow.gif">&nbsp;網站導航<img src="images/arrow.gif">&nbsp;
      <div class="xl">
      	<!--購物車-->
        <div class="droparrow" onclick="showCar()"><span class="shopcart"></span>我的購物車
        	<span class="orange">0</span>件<img src="images/arrow.gif"/></div>
        <!--下拉菜單-->
        <div class="dropdown" id="dropdown" style="display: none" 
        	ondrop="drop(event)" ondragover="allowDrop(event)"> 
          <!--<div class="gwc"></div><h3>購物車爲空，現在去挑選幾件商品</h3></div>-->
          <ul class="shop_pic">
            <!--<li><a href="#"><img src="images/shopshow/s1.jpg" /></a>
              <p>1件<a href="#"><span class="orange floatr">刪除</span></a></p>
            </li>
            <li><a href="#"><img src="images/shopshow/s2.jpg" /></a>
              <p>2件<a href="#"><span class="orange floatr">刪除</span></a></p>
            </li>
            <li><a href="#"><img src="images/shopshow/s3.jpg" /></a>
              <p>1件<a href="#"><span class="orange floatr">刪除</span></a></p>
            </li>
            <li><a href="#"><img src="images/shopshow/s6.jpg" /></a>
              <p>1件<a href="#"><span class="orange floatr">刪除</span></a></p>
            </li>
            <li><a href="#"><img src="images/shopshow/s7.jpg" /></a>
              <p>1件<a href="#"><span class="orange floatr">刪除</span></a></p>
            </li>
            <li><a href="#"><img src="images/shopshow/s8.jpg" /></a>
              <p>1件<a href="#"><span class="orange floatr">刪除</span></a></p>
            </li>-->
          </ul>
        </div>
      </div>
    </div>
  </div>
</div>
<!--頂部區域 end-->
<div class="clear"></div>
<!--logo和banner start-->
<div class="logo"><a href="../index.html"><img src="images/logo.jpg" ></a><img src="images/banner.jpg" class="floatr "></div>
<!--logo和banner  end--> 

<!--菜單導航欄 start-->
<div class="nav_bg">
  <div class="nav_content">
    <ul class="nav">
      <li ><a href="shoppingIndex.html" class="white">首頁</a></li>
      <li class="nav_active" ><a href="shoppingShow.html"  class="white">最新上架</a></li>
      <li>品牌活動</li>
      <li>原廠直供</li>
      <li>團購</li>
      <li>限時搶購</li>
      <li>促銷打折</li>
    </ul>
  </div>
</div>
<!--菜單導航欄 end--> 
<!--中間部分 start-->
<div class="main"> 
  <!--購物分類 start-->
  <ul class="menu">
    <li ><span class="title">女裝</span></li>
    <li><span class="red_dot"></span><a href="#" >上衣</a><span class="right_arrow"></span></li>
    <li><span class="red_dot"></span><a href="#" >下裝</a><span class="right_arrow"></span></li>
    <li><span class="red_dot"></span><a href="#" >連衣裙</a><span class="right_arrow"></span></li>
    <li><span class="red_dot"></span><a href="#" >內衣</a><span class="right_arrow"></span></li>
    <li><span class="title">男裝</span></li>
    <li><span class="red_dot"></span><a href="#" >T恤</a><span class="right_arrow"></span></li>
    <li><span class="red_dot"></span><a href="#" >短褲</a><span class="right_arrow"></span></li>
    <li><span class="red_dot"></span><a href="#" >襯衫</a><span class="right_arrow"></span></li>
    <li><span class="title">童裝</span></li>
    <li><span class="red_dot"></span><a href="#" >上衣</a><span class="right_arrow"></span></li>
    <li><span class="red_dot"></span><a href="#" >褲子</a><span class="right_arrow"></span></li>
    <li><span class="title">運動</span></li>
    <li><span class="red_dot"></span><a href="#" >運動褲</a><span class="right_arrow"></span></li>
    <li><span class="red_dot"></span><a href="#" >跑步鞋</a><span class="right_arrow"></span></li>
  </ul>
  <!--購物分類end--> 
  <!--中間區 start-->
  <div class="middle">
    <h1 class="pic_title">最新上架</h1>
    <div class="pic_list">
    <script type="text/javascript">
		var images=["yifu1.jpg","yifu2.jpg","yifu3.jpg","yifu4.jpg","yifu5.jpg","yifu6.jpg","yifu7.jpg","yifu8.jpg",];
		var prices=["198.00","69.00","160.00","210.00","70.00","146.00","69.00","239.00"];
		var buyers=[324,534,643,678,567,4567,1345,789];
		var contents=["冬季新款牛仔外套加厚連帽毛領加絨牛仔棉衣","2015夏新款韓版 透氣舒適簡約半截袖T恤衫","韓版甜美氣質亮片熱氣球字母中長款圓領短袖T恤","2015款秋新款甜美學院立領中袖套頭格子襯衫娃娃衫","2015款秋新款甜美學院立領中袖套頭格子襯衫娃娃衫","大碼女裝胖mm2015夏裝新款韓版顯瘦露肩鏤空連衣裙","v領雪紡背心女夏外穿雙層吊帶打底衫百搭顯瘦無袖上衣","韓版印花無袖短裙背心裙女 高腰連衣裙A字裙秋季"];
		
		for(var i=0;i<images.length;i++){
			var goodsInfo="<dl><div><img src='images/shopshow/"+images[i]+"' /></div><dt><span class='price'>￥"+prices[i]
				+"元</span><span class='font12'>"+buyers[i]+"人購買</span></dt><dd>"
				+contents[i]+"</dd></dl>";
			document.write(goodsInfo);
		}
	</script>
<!--      <dl>
        <div><a href="shoppingDetail.html" target="_blank"><img src="images/shopshow/yifu1.jpg" /></a></div>
        <dt><span class="price">￥198.00元</span><span class="font12">324人購買</span></dt>
        <dd>冬季新款牛仔外套加厚連帽毛領加絨牛仔棉衣</dd>
      </dl>
      <dl>
        <div><img src="images/shopshow/yifu2.jpg" /></div>
        <dt><span class="price">￥69.00元</span><span class="font12">534人購買</span></dt>
        <dd>2015夏新款韓版 透氣舒適簡約半截袖T恤衫</dd>
      </dl>
      <dl>
        <div><img src="images/shopshow/yifu3.jpg" /></div>
        <dt><span class="price">￥160.00元</span><span class="font12">643人購買</span></dt>
        <dd>韓版甜美氣質亮片熱氣球字母中長款圓領短袖T恤</dd>
      </dl>
      <dl>
        <div><img src="images/shopshow/yifu4.jpg" /></div>
        <dt><span class="price">￥210.00元</span><span class="font12">678人購買</span></dt>
        <dd>2015款秋新款甜美學院立領中袖套頭格子襯衫娃娃衫</dd>
      </dl>
      <dl>
        <div><img src="images/shopshow/yifu5.jpg" /></div>
        <dt><span class="price">￥70.00元</span><span class="font12">567人購買</span></dt>
        <dd>2015款秋新款甜美學院立領中袖套頭格子襯衫娃娃衫</dd>
      </dl>
      <dl>
        <div><img src="images/shopshow/yifu6.jpg" /></div>
        <dt><span class="price">￥146.00元</span><span class="font12">4567人購買</span></dt>
        <dd>大碼女裝胖mm2015夏裝新款韓版顯瘦露肩鏤空連衣裙</dd>
      </dl>
      <dl>
        <div><img src="images/shopshow/yifu7.jpg" /></div>
        <dt><span class="price">￥69.00元</span><span class="font12">1345人購買</span></dt>
        <dd>v領雪紡背心女夏外穿雙層吊帶打底衫百搭顯瘦無袖上衣</dd>
      </dl>
      <dl>
        <div><img src="images/shopshow/yifu8.jpg" /></div>
        <dt><span class="price">￥239.00元</span><span class="font12">789人購買</span></dt>
        <dd>韓版印花無袖短裙背心裙女 高腰連衣裙A字裙秋季 </dd>
      </dl>-->
    </div>
    <!--品牌活動-->
    <h1 class="pic_title">品牌活動</h1>
    <ul class="pic_list2">
      <script type="text/javascript">
	  	var images=["dress1.jpg","dress2.jpg","dress3.jpg","dress4.jpg"];
		var contents=["獨家定製 V 雙層歐根紗裏襯 色織時裝料大牌範蓬蓬長裙","夏季新款 子域D5656E 簡約通勤腰帶修身大擺短袖連衣裙","愛美斯 2015夏季優雅顯瘦大擺長裙 中長款復古印花淑女裙","億婷2015夏女裝新品顯瘦飄逸黑白豎條紋闊腿褲七分褲裙"];
		for(var i in images){
			var goodsInfo="<li><img src='images/shopshow/"+images[i]+"' /><p>"
				+contents[i]+"</p></li>";
			document.write(goodsInfo);
		}
	  </script>
<!--      <li><img src="images/shopshow/dress1.jpg" />
        <p>獨家定製 V 雙層歐根紗裏襯 色織時裝料大牌範蓬蓬長裙</p>
      </li>
      <li><img src="images/shopshow/dress2.jpg" />
        <p>夏季新款 子域D5656E 簡約通勤腰帶修身大擺短袖連衣裙</p>
      </li>
      <li><img src="images/shopshow/dress3.jpg" />
        <p>愛美斯 2015夏季優雅顯瘦大擺長裙 中長款復古印花淑女裙 </p>
      </li>
      <li><img src="images/shopshow/dress4.jpg" />
        <p>億婷2015夏女裝新品顯瘦飄逸黑白豎條紋闊腿褲七分褲裙</p>
      </li>-->
    </ul>
  </div>
  <!--中間區 end--> 
  
  <!--右側熱門推薦 start-->
  <div class="right_nav" id="right_nav">    
  <!--  
  <h1 class="notice_title">熱門推薦</h1>
  <ul class="pic_list3">
      <li><a href="#"><img src="images/shopshow/s1.jpg" /></a>
        <p class="price2">￥56.00元</p>
      </li>
      <li><a href="#"><img src="images/shopshow/s2.jpg" /></a>
        <p class="price2">￥97.00元</p>
      </li>
      <li><a href="#"><img src="images/shopshow/s3.jpg" /></a>
        <p class="price2">￥89.00元</p>
      </li>
      <li><a href="#"><img src="images/shopshow/s4.jpg" /></a>
        <p class="price2">￥69.00元</p>
      </li>
      <li><a href="#"><img src="images/shopshow/s5.jpg" /></a>
        <p class="price2">￥89.00元</p>
      </li>
      <li><a href="#"><img src="images/shopshow/s6.jpg" /></a>
        <p class="price2">￥93.00元</p>
      </li>
      <li><a href="#"><img src="images/shopshow/s7.jpg" /></a>
        <p class="price2">￥58.00元</p>
      </li>
      <li><a href="#"><img src="images/shopshow/s8.jpg" /></a>
        <p class="price2">￥69.00元</p>
      </li>
      <li><a href="#"><img src="images/shopshow/s9.jpg" /></a>
        <p class="price2">￥78.00元</p>
      </li>
    </ul>-->
    <!--使用腳本的方向定時更新推,下面引入腳本代碼也可以放在<head>標籤之內薦信息-->
    
  </div>  
  <!--右側熱門推薦 end--> 
  
</div>

<!--中間部分 end--> 
<!--底部 start-->
<div class="clear"></div>
<div class="footer">
  <div class="gotop"></div>
  <div class="foot_title">
    <ul class="foot_pic">
      <li><img src="images/gray1.jpg" ></li>
      <li><img src="images/gray2.jpg" ></li>
      <li><img src="images/gray3.jpg" ></li>
      <li><img src="images/gray4.jpg" ></li>
      <li><img src="images/gray5.jpg" ></li>
    </ul>
  </div>
  <ul class="foot_list">
    <li>
      <div class="floatl">
        <p class="red1"></p>
        <p class="line1"></p>
      </div>
      <ul class="floatl">
        <li class="font16 padding-bottom">新手指導</li>
        <li>用戶註冊</li>
        <li>電話下單</li>
        <li>購物流程</li>
        <li>購物保障</li>
        <li>服務協議</li>
      </ul>
    </li>
    <li>
      <div class="floatl">
        <p class="red2"></p>
        <p class="line1"></p>
      </div>
      <ul class="floatl">
        <li class="font16 padding-bottom">支付方式</li>
        <li>貨到付款</li>
        <li>商城卡支付</li>
        <li>支付寶、網銀支付</li>
        <li>優惠券抵用</li>
      </ul>
    </li>
    <li>
      <div class="floatl">
        <p class="red3"></p>
        <p class="line1"></p>
      </div>
      <ul class="floatl">
        <li class="font16 padding-bottom">配送方式</li>
        <li>閃電發貨</li>
        <li>滿百包郵</li>
        <li>配送範圍及時間</li>
        <li>商品驗收及簽收</li>
        <li>服務協議</li>
      </ul>
    </li>
    <li>
      <div class="floatl">
        <p class="red3"></p>
        <p class="line1"></p>
      </div>
      <ul class="floatl">
        <li class="font16 padding-bottom">售後服務</li>
        <li>退換貨協議</li>
        <li>關於發票</li>
        <li>退換貨流程</li>
        <li>退換貨運費</li>
      </ul>
    </li>
    <li>
      <div class="floatl">
        <p class="red3"></p>
        <p class="line1"></p>
      </div>
      <ul class="floatl">
        <li class="font16 padding-bottom">關於帳號</li>
        <li>修改個人信息</li>
        <li>修改密碼</li>
        <li>找回密碼</li>
      </ul>
    </li>
    <li>
      <div class="floatl">
        <p class="red3"></p>
        <p class="line1"></p>
      </div>
      <ul class="floatl">
        <li class="font16 padding-bottom">優惠活動</li>
        <li>競拍須知</li>
        <li>搶購須知</li>
      </ul>
    </li>
  </ul>
  <div class="clear"></div>
  <div class="foot_line"></div>
  <p align="center" class="padding-top">Copyright  2015-2020  Q- Walking Fashion E&S 漫步時尚廣場（QST教育）版權所有<Br/>
    中國青島 高新區河東路8888號  青軟教育集團    諮詢熱線：400-658-0166  400-658-1022 </p>
  <p align="center"><img src="images/foot_pic.jpg"></p>
  <div class="clear"></div>
</div>

<!--底部 end-->
</body>
</html>

後記：

算是結束了這次失誤吧，害，像我這種強迫症的人看着真的難受，以後會細心一點的，加油↖(^ω)↗。
感謝相遇，相遇不分早晚，這是一件很“隨意”的事，“隨意”到這件事的發生沒有時間也不規定地點，只是在對的時間裏恰巧碰上了彼此生命中那個對的那個人。也許相遇是在那個秋菊爭豔的季節，邂逅了一曲高山流水的琴音；也許是在墨染文字的清香裏，邂逅了心有靈犀的相知；也許是在風光旖旎的美景中，邂逅了那份期盼已久的守候。
就是一句再簡單在尋常不過的問候，可能時間洗禮後我們都會成爲彼此生命中的演員。

Web前端學習記錄(十四)

寫在前面：

實現購物列表頁面的熱門隨機推薦：

hotAdvise.js

show.css:

shoppingShow.html:

後記：

Power Automate Desktop 安裝完，登錄後老是提示one driver 錯誤

再談23種設計模式（3）：行爲型模式（學習筆記）

微前端學習筆記(4):從微前端到微模塊之EMP與hel-micro方案探索

微前端學習筆記（1）：微前端總體架構概述，從微服務發微

985 碩士程序員，空窗 4 個月沒有 Offer！

一文搞懂 Spring 循環依賴

賽博鬥地主——使用大語言模型扮演Agent智能體玩牌類遊戲。

VScode右鍵打開(添加到右鍵)

記一次 .NET某工控視覺自動化系統卡死分析

WindowsServer--SQL Server搭建主從同步實現讀寫分離 - 事務性分發

Web前端學習記錄(十五)

我心中的你是春天的樣子

數據庫的操作：訂貨管理練習

java集合：簡單使用ArrayList，Arrays，HashMap，HashSet

java：手寫模擬Sting類的split函數

Mac下配置sublime實現LaTeX

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結