0
点赞
收藏
分享

微信扫一扫

JavaScript4——DOM编程

左手梦圆 2022-03-20 阅读 67
javascripthtmlcss
加载失败

<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>主页面</title>
<style type="text/css">
body{
	margin-top: 0px;
	margin-right: auto;
	margin-bottom: 0px;
	margin-left: auto;
	text-align:center;
}
</style>
</head>

<body>
<img src="images/flow.jpg" alt="鲜花" /><br />
<a href="javascript:location.href='flower.html'">查看鲜花详情</a>  
<a href="javascript:location.reload()">刷新本页</a>
</body>

 

<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>鲜花详情页面</title>
<style type="text/css">
body{
	font-size:12px;
	line-height:20px;
	margin-top: 0px;
	margin-right: 10px;
	margin-bottom: 0px;
	margin-left: 10px;
}
p{font-size:14px;
  font-weight:bold;
}
</style>
</head>

<body>
<img src="images/flow.jpg" />
<p style="text-align:right;"><a href="javascript:history.back()">返回主页面</a></p>
<p>服务提示：</p>非节日期间，可指定时间段送达；并且允许指定送达收货人的最快时间为两小时；节日期间，只保证当日送达。<br />
配送范围：<br />
　　 鲜花配送范围：北京、上海、深圳、天津、广州、重庆等各大中城市。<br />
　　 蛋糕、果篮配送范围：全国大中城市。<br />
　　 绿植配送范围：仅限于直辖市，省会城市市区。<br />
　　 更多详细的配送区域与相应配送费率请点击这里！<br />
配送方式：<br />
　　 专业鲜花、蛋糕礼品速递机构，送货上门。 <br />
服务时间：<br />
　　 全年365天，节假日不休息，24小时接单； 每日送花时间：8:00-20：00。<br />
　　 其它时间送花酌情加收10-30服务费用。 <br />
替换原则：<br />由于地域或季节的限制，需要更换主花材时，我们将电话向订货人提出更换建议，假如在有效配送时间内得不到订货人的确认，我们将采用同等价值或相同寓意的花材代替。实际送花以图片为参考，以商品规格文字说明为主。鲜花为手工做品，实际花束可能会与图示有些出入，但我们保证鲜花的主花材品种、新鲜程度、数量、颜色与说明一致。<br />
</body>

 

 

<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>显示和隐藏图片</title>
<script type="text/javascript">
function hidden_b2(){
document.getElementById("b2").style.visibility="hidden";
}
function none_b2(){
document.getElementById("b2").style.display="none";
}
</script>
</head>
<body>
<img src="images/book1.jpg" alt="book1" id="b1" />
<img src="images/book2.jpg" alt="book2" id="b2" />
<img src="images/book3.jpg" alt="book3" id="b3" /><br />
<input name="btn1" type="button" value="visibility隐藏图b2" onclick="hidden_b2()" />
<input name="btn2" type="button" value="display隐藏图b2" onclick="none_b2()" />
</body>

 

 

7.5 制作简单的树形菜单

<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>制作简单的树形菜单</title>
<style type="text/css">
body{font-size:13px;
     line-height:20px;
	 }
a{font-size: 13px;
  color: #000000;
  text-decoration: none;
  }
a:hover{font-size:13px;
       color: #ff0000;
	   }
img {
	vertical-align: middle;
	border:0;
}
.no_circle{list-style-type:none;  /*设置列表项标志的类型为无*/
   display:none;
	}
</style>
<script  type="text/javascript">
function show(){
if(document.getElementById("art").style.display=='block'){
    document.getElementById("art").style.display='none';  //触动的ul如果处于显示状态，即隐藏
 }
else{
	document.getElementById("art").style.display='block';  //触动的ul如果处于隐藏状态，即显示
   }
}
</script>
</head>

<body>
<b><img src="images/fold.gif">树形菜单：</b>  
<ul><a href="javascript:onclick=show() "><img src="images/fclose.gif">文学艺术</a></ul>
<ul id="art" class="no_circle">
<li><img src="images/doc.gif" >先锋写作</li>
           <li> <img src="images/doc.gif" >小说散文</li>
            <li><img src="images/doc.gif" >诗风词韵</li>
            </ul>
</body>

运行结果： 

 

<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>TAB切换</title>
<style type="text/css">
.div_bg{
	background-image:url(images/index-rightbg.jpg);
	background-repeat:no-repeat;
	width:302px;
	height:290px;
	margin-top: 10px;
	margin-right: auto;
	margin-bottom: 0px;
	margin-left: auto;
	}
td{font-size:14px;line-height:20px;color: #414141;}
.white{font-size:14px;
       color:#FFFFFF;
	   padding-top:5px;
	   cursor:pointer;
	   }
.white:hover{font-size:14px;
             color:#FFFFFF;
			 padding-top:5px; 
			 cursor:pointer;
			 }
a {
	color: #06329b;text-decoration: none;line-height:24px;
}
a:hover {
	color: #cc0000;text-decoration: none;line-height:24px;
}
.bg{background-image:url(images/right-menu1.gif);
	   background-repeat:no-repeat;
	   height:40px;
	   width:95px;
	   text-align:center;}
.nobg{background-image:url(images/right-menu2.gif);
	   background-repeat:no-repeat;
	   height:40px;
	   width:95px;
	   text-align:center;}
</style>

</head>

<body><div class="div_bg"><table width="290" border="0" cellspacing="0" cellpadding="0" style=" margin:0px auto 0px auto;">
  <tr>
    <td style="height:35px;" colspan="5"></td>
  </tr>
  <tr>
    <td id="bg1"><a class="white" onMouseOver="chgtt(1);">小说</a></td>
	<td style="width:1px;"></td>
    <td id="bg2"><a class="white" onMouseOver="chgtt(2);">非小说</a></td>
				  <td  style="width:1px;"></td>
    <td id="bg3"><a class="white" onMouseOver="chgtt(3);">少儿</a></td>
  </tr> 
  <tr>
    <td colspan="5" style="padding-top:10px; padding-left:5px; text-align:left;"><div id="book1" style="display:block;"><a 
                  href="product.aspx?product_id=9292071" 
                  target=_blank>1.时间旅行者的妻子</a><br><a 
                  href="product.aspx?product_id=9301784" 
                  target=_blank>2.女心理师（下）</a><br><a 
                  href="product.aspx?product_id=9213024" 
                  target=_blank>3.鬼吹灯之精绝古城</a><br><a 
                  href="product.aspx?product_id=9272710" 
                  target=_blank>4.女心理师（上）</a><br><a 
                  href="product.aspx?product_id=9304960" 
                  target=_blank>5.小时候</a><br><a 
                  href="product.aspx?product_id=9174964" 
                  target=_blank>6.追风筝的人</a><br><a 
                  href="product.aspx?product_id=9288517" 
                  target=_blank>7.盗墓笔记2</a><br><a 
                  href="product.aspx?product_id=9189377" 
                  target=_blank>8.输赢</a>
		 </div>
<div id="book2" style="display:none;"><a 
                  href="product.aspx?product_id=8960640" target=_blank>1.你在为谁工作,人生若只如初见</a><br><a 
                  href="product.aspx?product_id=9253577"  target=_blank>2.高效能人士的七个..</a><br><a 
                  href="product.aspx?product_id=9258919" 
                  target=_blank>3.求医不如求己</a><br><a 
                  href="product.aspx?product_id=9057812" 
                  target=_blank>4.人体使用手册</a><br><a 
                  href="product.aspx?product_id=8891083" 
                  target=_blank>5.孩子，把你的手给我</a><br><a 
                  href="product.aspx?product_id=9240993" 
                  target=_blank>6.别笑！我是英文单词书</a><br><a 
                  href="product.aspx?product_id=9265395" 
                  target=_blank>7.人体经络使用手册</a><br><a 
                  href="product.aspx?product_id=9277013" 
                  target=_blank>8.股市稳赚</a>
		 </div>
	<div id="book3" style="display:none;"><a 
                  href="product.aspx?product_id=9284655" 
                  target=_blank>1.斯凯瑞金色童书·..神奇校车1（全10册）</a><br><a 
                  href="product.aspx?product_id=9036740" 
                  target=_blank>2.哈利·波特与“混..</a><br><a 
                  href="product.aspx?product_id=9213954" 
                  target=_blank>3.不一样的卡梅拉（..</a><br><a 
                  href="product.aspx?product_id=9187891" 
                  target=_blank>4.它们是怎么来的</a><br><a 
                  href="product.aspx?product_id=8688091" 
                  target=_blank>5.五·三班的坏小子..</a><br><a 
                  href="product.aspx?product_id=482002" 
                  target=_blank>6.男生日记</a><br><a 
                  href="product.aspx?product_id=142600" 
                  target=_blank>7.哈利·波特与魔法石</a><br><a 
                  href="product.aspx?product_id=9033155" 
                  target=_blank>8.噼里啪啦丛书(全7册)</a>
		 </div></td>
  </tr>
</table>

 <script type="text/javascript">
              //设当前显示层
				function chgtt(d1)	{
					var NowFrame;
					if(Number(d1))	{
						 NowFrame=d1;
					 }
					 else
					 {
						 NowFrame=1;
					 }
					 
					for(var i=1;i<=3;i++){
					   if(i==NowFrame)	{
	document.getElementById("book"+NowFrame).style.display ="block";   //当前层
	document.getElementById("bg"+NowFrame).className="bg";
					}
					else
					{
			document.getElementById("book"+i).style.display ="none";    //隐藏其他层
			document.getElementById("bg"+i).className="nobg";
		               }	
					}
			       
				}
				window.onLoad=chgtt() ;
</script> 
</div>

 

<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>全选效果</title>
<style type="text/css">
.bg{
	background-image: url(images/list_bg.gif);
	background-repeat: no-repeat;
	width: 730px;
}
td{text-align:center;
font-size:13px;
line-height:25px;
}
body{margin:0}
</style>
 <script type="text/JavaScript">
 function check(){
 var oInput=document.getElementsByName("product");
 for (var i=0;i<oInput.length;i++){
    if (document.getElementById("all").checked==true){
 		 oInput[i].checked=true;
 	 }else{
         oInput[i].checked=false;
     }
   }
}
</script>
</head>

<body><table border="0" cellspacing="0" cellpadding="0" class="bg">
  <tr>
    <td style="height:40px;"></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr style="font-weight:bold;">
    <td><input id="all" type="checkbox" value="全选" onclick="check();" />全选</td>
    <td>商品图片</td>
    <td>商品名称/出售者/联系方式</td>
    <td>价格</td>
  </tr>
  <tr>
	<td colspan="4"><hr style="border:1px  #CCCCCC dashed" /></td>
    </tr>
  
  <tr>
    <td><input name="product" type="checkbox" value="1" /></td>
    <td><img src="images/list0.jpg" alt="alt" /></td>
    <td>杜比环绕，家庭影院必备，超真实享受<br />
    出售者：ling112233<br />
    <img src="images/online_pic.gif" alt="alt" /> 
	<img src="images/list_tool_fav1.gif" alt="alt" /> 收藏</td>
    <td>一口价<br />
    2833.0 </td>
  </tr>
  <tr>
	<td colspan="4"><hr style="border:1px  #CCCCCC dashed" /></td>
    </tr>
  <tr>
    <td><input name="product" type="checkbox" value="2" /></td>
    <td><img src="images/list1.jpg" alt="alt" /></td>
    <td>NVDIA 9999GT 512MB 256bit极品显卡，不容错过<br />
      出售者：aipiaopiao110 <br />
    <img src="images/online_pic.gif" alt="alt" /> 
	<img src="images/list_tool_fav1.gif" alt="alt" /> 收藏</td>
    <td>一口价<br />
    6464.0 </td>
  </tr>
  <tr>
	<td colspan="4"><hr style="border:1px  #CCCCCC dashed" /></td>
    </tr>
  <tr>
    <td><input name="product" type="checkbox" value="3" /></td>
    <td><img src="images/list2.jpg" alt="alt" /></td>
    <td>精品热卖：高清晰，30寸等离子电视<br />
      出售者：阳光的挣扎 <br />
    <img src="images/online_pic.gif" alt="alt" /> 
	<img src="images/list_tool_fav1.gif" alt="alt" /> 收藏</td>
    <td>一口价<br />
    18888.0 </td>
  </tr>
  <tr>
	<td colspan="4"><hr style="border:1px  #CCCCCC dashed" /></td>
    </tr>
   <tr>
    <td><input name="product" type="checkbox" value="4" /></td>
    <td><img src="images/list3.jpg" alt="alt" /></td>
    <td>Sony索尼家用最新款笔记本 <br />
      出售者：疯狂的镜无<br />
    <img src="images/online_pic.gif" alt="alt" /> 
	<img src="images/list_tool_fav1.gif" alt="alt" /> 收藏</td>
    <td>一口价<br />
     5889.0 </td>
  </tr>
  <tr>
	<td colspan="4"><hr style="border:1px  #CCCCCC dashed" /></td>
    </tr>
</table>

</body>

 

举报

相关推荐

JavaScript4：函数和闭包

javascript匿名函数赋值

JavaScript DOM编程

htmlhtml5javascript

JavaScript Dom编程

javascript

JavaScript之DOM编程

javascript前端开发语言

JavaScript之——DOM编程

javascript前端

高性能JavaScript DOM编程

javascriptViewUIi++数组HTML办公效率

【JavaScript】49_DOM编程：DOM修改与demo

超链接htmlJavaScript前端vue前端开发指尖人生

【JavaScript】44_DOM编程初步

原型链超链接ClickJavaScript前端开发指尖人生

JavaScript DOM编程艺术—javascript实现移动元素动画

javascripthtml指定位置虚拟化云计算

JavaScript简单的判断练习 dom编程

javascript
0 条评论
加载失败