JavaScript基础

。_饼干妹妹 提交于 2020-03-09 20:19:52

JavaScript的内置对象:

数组(array

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>隔行换色表格</title>

<script type="text/javascript">

// 通过原生的JavaScript改变标签的样式

function onlode(){

// 1.获得元素标签

var tr=document.getElementsByTagName("tr")//获取tr标签数组,以零开始。

// document.getElementsByName("checkOne")//通过name属性获得标签

// document.getElementsById("checkOne")//通过id属性获得标签

for( var i=2;i<tr.length;i+=2)

{

tr[i].style.background="#eee"

// tr[i].background="#eee"

}



}

</script>

</head>

<body onload="onlode()">  <!--//函数名不能以关键字命名-->

<table width="500" align="center" cellpadding="10px" border="1px" cellspacing="4px">

<!--align="center" 表格居中-->

<tr height="20px" bgcolor="burlywood">

<td align="center">序号</td>

<td align="center">课程名称</td>

</tr>

<tr height="20px">

<td>1</td>

<td>html</td>

</tr>

 <tr height="20px">

  <td>2</td>

<td>css</td>

 </tr>

             <tr height="20px">

               <td>3</td>

    <td>javaScript</td>

             </tr>

            <tr>

   <td>4</td>

   <td>html5</td>

    </tr>

    <tr>

   <td>5</td>

   <td>css3</td>

    </tr>

    <tr>

   <td>6</td>

   <td>jquery</td>

    </tr>

           

</table>

</body>

</html>

 

日期(date

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>获取系统时间</title>

<script type="text/javascript">

    function getNum(num){

    

     if(num.toString().length==1){

     num="0"+num;

     }

     return num ;//补零

    }

function getWeek(no){

var week;

switch(no)

 {

  case 0:

    week="星期天";

     break;

  case 1:

  week="星期一";

  break;

  case 2:

  week="星期二";

  break;

  case 3:

  week="星期三";

  break;

  case 4:

  week="星期四";

  break;

  

              case 5:

  week="星期五";

  break;

  case 6:

  week="星期六";//把星期写规范

  break;

 }

  return week;

  

}

 function getMyDate(){

  var  today=new Date();//获取当前系统时间

        var year=today.getFullYear();

        var month=today.getMonth()+1;//得到的月份比实际的少一

        var week= getWeek(today.getDay());//today.getday()得到的是星期不是日,不过得到的都是数字,要把它转成我们习惯的样子

        var day=getNum(today.getDate());//today.getDate()得到的是日不是日期

        var hour=getNum(today.getHours());

        var minutes=getNum(today.getMinutes());

        var seconds=getNum(today.getSeconds());

        var str=year+"-"+month+"-"+day+" "+hour+":"+minutes+":"+seconds+" "+week;

         document.getElementById("me").innerHTML=str;

         //.innerHtml标签的内容

 }

    setInterval("getMyDate()",1000);//为什么这个函数会执行,什么时候执行的



</script>

</head>

<body onload="getMyDate()">

<h1 id="me"></h1>



</body>

</html>

//function 函数可以有返回值(用有返回值的函数是也需要加HTML中return),可以是有参数(不要写传入数的类型)

//.value(常用于input,要求用户输入)与innerHTML(常用于一些块标签)的区别

 

数学(Math

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>双色球</title>

<script type="text/javascript">

function onLoad(){

var red=new Array();

for(var i=0;i<6;i++)

{



  var num=Math.floor(Math.random()*33+1);//在1-33范围内随机去一个整数

       red[i]=num;



}

var blue=Math.floor(Math.random()*16+1); //在1——16的范围内随机去一个整数

document.getElementById("red").innerHTML=red;

document.getElementById("red").style.color="red";

document.getElementById("blue").innerHTML=blue;

document.getElementById("blue").style.color="blue";



}



</script>

</head>

<body onload="onLoad()">

<h1>双色球开奖结果如下:</h1>

<span id="red"></span>

<span id="blue"></span>//span是个内联标签



</body>

</html>

 

多选:

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>全选和全不选</title>

<script>

function checkAll(){

// 通过JavaScript来改变标签的属性

//1.获取编号前面的复选框

var checkAllEle = document.getElementById("checkAll");

// var 可以表示所有的基本类型(与java不同的地方)

//2.对编号前面复选框的状态进行判断

if(checkAllEle.checked==true){

//3.获取下面所有的复选框

var checkOnes = document.getElementsByName("checkOne");

//4.对获取的所有复选框进行遍历

for(var i=0;i<checkOnes.length;i++){

//5.拿到每一个复选框,并将其状态置为选中

checkOnes[i].checked=true;

}

}else{

//6.获取下面所有的复选框

var checkOnes = document.getElementsByName("checkOne");

//7.对获取的所有复选框进行遍历

for(var i=0;i<checkOnes.length;i++){

//8.拿到每一个复选框,并将其状态置为未选中

checkOnes[i].checked=false;

}

}



}

</script>



</head>

<body>

<table border="1" width="500" height="50" align="center" >

<thead>

<tr>

<td colspan="4">

<input type="button" value="添加" />

<input type="button" value="删除" />

</td>

</tr>

<tr>

<th><input type="checkbox" onclick="checkAll()" id="checkAll"/></th>

<!--input 中的checkbox也可以有onclick事件-->

<th>编号</th>

<th>姓名</th>

<th>年龄</th>

</tr>

</thead>

<tbody>

<tr >

<td><input type="checkbox" name="checkOne"/></td>

<td>1</td>

<td>张三</td>

<td>22</td>

</tr>

<tr >

<td><input type="checkbox" name="checkOne"/></td>

<!--input的类型为checkbox时,有一个checked属性-->

<td>2</td>

<td>李四</td>

<td>25</td>

</tr>

<tr >

<td><input type="checkbox" name="checkOne"/></td>

<td>3</td>

<td>王五</td>

<td>27</td>

</tr>

<tr >

<td><input type="checkbox" name="checkOne"/></td>

<td>4</td>

<td>赵六</td>

<td>29</td>

</tr>

<tr >

<td><input type="checkbox" name="checkOne"/></td>

<td>5</td>

<td>田七</td>

<td>30</td>

</tr>

<tr >

<td><input type="checkbox" name="checkOne"/></td>

<td>6</td>

<td>汾九</td>

<td>20</td>

</tr>

</tbody>

</table>

</body>

</html>

通过JavaScript添加标签:

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>动态添加城市</title>

<script>

window.onload = function(){

document.getElementById("btn").onclick = function(){

// document 是一个文档对象,使用 document 对象可以对 HTML 文档进行检查、修改(getElement)或添加(createElement createNode)内容,并处理该文档内部的事件。

//  方法的写法:某个标签的事件=function(参数){}

//1.获取ul元素节点

var ulEle = document.getElementById("ul1");

//2.创建城市文本节点document.getTextNode()

var textNode = document.createTextNode("深圳");//深圳

//3.创建li元素节点document.creatextNode

var liEle = document.createElement("li");//<li></li>

//4.将城市文本节点添加到li元素节点中去(通过.append方法来附加元素)

liEle.append(textNode);//<li>深圳</li>

//5.将li添加到ul中去

ulEle.append(liEle);

}

}

</script>

</head>



<body>

<input type="button" value="添加新城市" id="btn"/>

<ul id="ul1">

<li>北京</li>

<li>上海</li>

<li>广州</li>

</ul>

</body>

</html>

<!--总结:js 写在head与body有什么不同,

head事件触发的时候才会执行,而body在页面被加载的时候就会运行,和HTML便签一样把内容显示在页面上-->

有参数的函数,onmouseover事件 ,onmouseout事件

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>表格隔行换色</title>

<script>

// 这就是编程的思维

function changeColor(id,flag){

// 设置参数的意义:为什么简化重复的代码把不变的写在方法中,变的弄成变量作为参数传入

if(flag=="over"){

document.getElementById(id).style.backgroundColor="red";

}else if(flag=="out"){

document.getElementById(id).style.backgroundColor="white";

}

}

</script>



</head>

<body>

<table border="1" width="500" height="50" align="center">

<thead>

<tr>

<th>编号</th>

<th>姓名</th>

<th>年龄</th>

</tr>

</thead>

<tbody>

<tr onmouseover="changeColor('tr1','over')" id="tr1" onmouseout="changeColor('tr1','out')">

<!--双引号里面的如果也要用要用到双引号的话就把双引号变成单引号-->

<td>1</td>

<td>张三</td>

<td>22</td>

</tr>

<tr onmouseover="changeColor('tr2','over')" id="tr2" onmouseout="changeColor('tr2','out')">

<td>2</td>

<td>李四</td>

<td>25</td>

</tr>

<tr onmouseover="changeColor('tr3','over')" id="tr3" onmouseout="changeColor('tr3','out')">

<td>3</td>

<td>王五</td>

<td>27</td>

</tr>

<tr onmouseover="changeColor('tr4','over')" id="tr4" onmouseout="changeColor('tr4','out')">

<td>4</td>

<td>赵六</td>

<td>29</td>

</tr>

<tr onmouseover="changeColor('tr5','over')" id="tr5" onmouseout="changeColor('tr5','out')">

<td>5</td>

<td>田七</td>

<td>30</td>

</tr>

<tr onmouseover="changeColor('tr6','over')" id="tr6" onmouseout="changeColor('tr6','out')">

<td>6</td>

<td>汾九</td>

<td>20</td>

</tr>

</tbody>

</table>

</body>

</html>

setInterval

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>首页</title>

<style>

#father{

border: 0px solid red;

width: 1300px;

height: 2170px;

margin: auto;

}

/*#logo{

border: 0px solid black;

width: 1300px;

height: 50px;

}*/

.top{

border: 0px solid blue;

width: 431px;

height: 50px;

float: left;

}

#top{

padding-top: 12px;

height: 38px;

}

#menu{

border: 0px solid red;

width: 1300px;

height: 50px;

background-color: black;

margin-bottom: 10px;

}

ul li{

display: inline;

color: white;

}

#clear{

clear: both;

}



#product{

border: 0px solid red;

width: 1300px;

height: 558px;

}

#product_top{

border: 0px solid blue;

width: 100%;

height: 45px;

padding-top: 8px;

}

#product_bottom{

border: 0px solid green;

width: 100%;

height: 500px;

}

#product_bottom_left{

border: 0px solid red;

width: 200px;

height: 500px;

float: left;

}

#product_bottom_right{

border: 0px solid blue;

width: 1094px;

height: 500px;

float: left;

}

#big{

border: 0px solid red;

width: 544px;

height: 248px;

float: left;

}

.small{

border: 0px solid blue;

width: 180px;

height: 248px;

float: left;

/*让里面的内容居中*/

text-align: center;

}



#bottom{

text-align: center;

}



a{

text-decoration: none;

}

</style>

<script>

function init(){

//书写轮片显示的定时操作

setInterval("changeImg()",3000);//表示每隔3秒就执行一次函数,

// //可以看成是系统中 的 一个函数,一个参数是方法,第二个是时间以毫秒为单位呢,常与

// clearInterval()一起用,不调用这个函数或是关闭窗口的话该方法就会虚幻调用下去

}



//书写函数

var i=0

function changeImg(){

i++;

//获取图片位置并设置src属性值

document.getElementById("img1").src="img/"+i+".jpg";

//一般字符串都打上“”,变量不用双引号



if(i==3){

i=0;

}

}

</script>

</head>

<body onload="init()">

<div id="father">

<!--定时弹出广告图片位置-->

<img src="img/f001a62f-a49d-4a4d-b56f-2b6908a0002c_g.jpg" width="100%" style="display: none"/>



<!--1.logo部分-->

<div id="logo">

<div class="top">

<img src="img/logo2.png" height="46px"/>

</div>

<div class="top">

<img src="img/header.png" height="46px" />

</div>



<div class="top" id="top">

<a href="#">登录</a>

<a href="#">注册</a>

<a href="#">购物车</a>

</div>

</div>

<div id="clear">



</div>

<!--2.导航栏部分-->

<div id="menu">

<ul>

<a href="#"><li style="font-size: 20px;">首页</li></a>    

<a href="#"><li>手机数码</li></a>    

<a href="#"><li>家用电器</li></a>    

<a href="#"><li>鞋靴箱包</li></a>    

<a href="#"><li>孕婴保健</li></a>    

<a href="#"><li>奢侈品</li></a>

</ul>

</div>

<!--3.轮播图部分-->

<div id="">

<img src="img.1jpg" width="100%" id="img1"/>

</div>

<!--4.最新商品-->

<div id="product">

<div id="product_top">

   

<span style="font-size: 25px;padding-top: 8px;">最新商品</span>   

<img src="img/title2.jpg" />

</div>

<div id="product_bottom">

<div id="product_bottom_left">

<img src="img/big01.jpg" width="100%" height="100%"/>

</div>

<div id="product_bottom_right">

<div id="big">

<a href="#"><img src="img/middle01.jpg" width="100%" height="100%"/></a>

</div>

<div class="small">

<img src="img/small03.jpg" />

<a href="#"><p style="color: gray;">电炖锅</p></a>

<p style="color: red;">¥399</p>

</div>

<div class="small">

<img src="img/small03.jpg" />

<a href="#"><p style="color: gray;">电炖锅</p></a>

<p style="color: red;">¥399</p>

</div>

<div class="small">

<img src="img/small03.jpg" />

<a href="#"><p style="color: gray;">电炖锅</p></a>

<p style="color: red;">¥399</p>

</div>

<div class="small">

<img src="img/small03.jpg" />

<a href="#"><p style="color: gray;">电炖锅</p></a>

<p style="color: red;">¥399</p>

</div>

<div class="small">

<img src="img/small03.jpg" />

<a href="#"><p style="color: gray;">电炖锅</p></a>

<p style="color: red;">¥399</p>

</div>

<div class="small">

<img src="img/small03.jpg" />

<a href="#"><p style="color: gray;">电炖锅</p></a>

<p style="color: red;">¥399</p>

</div>

<div class="small">

<img src="img/small03.jpg" />

<a href="#"><p style="color: gray;">电炖锅</p></a>

<p style="color: red;">¥399</p>

</div>

<div class="small">

<img src="img/small03.jpg" />

<a href="#"><p style="color: gray;">电炖锅</p></a>

<p style="color: red;">¥399</p>

</div>

<div class="small">

<img src="img/small03.jpg" />

<a href="#"><p style="color: gray;">电炖锅</p></a>

<p style="color: red;">¥399</p>

</div>

</div>

</div>

</div>

<!--5.广告图片-->
div id="">

<img src="../img/ad.jpg" width="100%"  />

</div>

<!--6.热门商品-->

<div id="product">

<div id="product_top">

   

<span style="font-size: 25px;padding-top: 8px;">热门商品</span>   

<img src="../img/title2.jpg" />

</div>

<div id="product_bottom">

<div id="product_bottom_left">

<img src="../img/big01.jpg" width="100%" height="100%"/>

</div>

<div id="product_bottom_right">

<div id="big">

<a href="#"><img src="../img/middle01.jpg" width="100%" height="100%"/></a>

</div>

<div class="small">

<img src="../img/small03.jpg" />

<a href="#"><p style="color: gray;">电炖锅</p></a>

<p style="color: red;">¥399</p>

</div>

<div class="small">

<img src="../img/small03.jpg" />

<a href="#"><p style="color: gray;">电炖锅</p></a>

<p style="color: red;">¥399</p>

</div>

<div class="small">

<img src="../img/small03.jpg" />

<a href="#"><p style="color: gray;">电炖锅</p></a>

<p style="color: red;">¥399</p>

</div>

<div class="small">

<img src="../img/small03.jpg" />

<a href="#"><p style="color: gray;">电炖锅</p></a>

<p style="color: red;">¥399</p>

</div>

<div class="small">

<img src="../img/small03.jpg" />

<a href="#"><p style="color: gray;">电炖锅</p></a>

<p style="color: red;">¥399</p>

</div>

<div class="small">

<img src="../img/small03.jpg" />

<a href="#"><p style="color: gray;">电炖锅</p></a>

<p style="color: red;">¥399</p>

</div>

<div class="small">

<img src="../img/small03.jpg" />

<a href="#"><p style="color: gray;">电炖锅</p></a>

<p style="color: red;">¥399</p>

</div>

<div class="small">

<img src="../img/small03.jpg" />

<a href="#"><p style="color: gray;">电炖锅</p></a>

<p style="color: red;">¥399</p>

</div>

<div class="small">

<img src="../img/small03.jpg" />

<a href="#"><p style="color: gray;">电炖锅</p></a>

<p style="color: red;">¥399</p>

</div>

</div>

</div>

</div>

<!--7.广告图片-->

<div id="">

<img src="../img/footer.jpg" width="100%"/>

</div>

<!--8.友情链接和版权信息-->

<div id="bottom">

<a href="#">关于我们</a>

<a href="#">联系我们</a>

<a href="#">招贤纳士</a>

<a href="#">法律声明</a>

<a href="#">友情链接</a>

<a href="#">支付方式</a>

<a href="#">配送方式</a>

<a href="#">服务声明</a>

<a href="#">广告声明</a>

<p>

Copyright © 2005-2016 传智商城 版权所有

</p>

</div>

</div>

</body>

</html>

//图片轮播首先把图大小最好改成一样的,然后名字以一定的序号命名(比如1-9)

 

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>首页</title>

<style>

#father{

border: 0px solid red;

width: 1300px;

height: 2170px;

margin: auto;

}

/*#logo{

border: 0px solid black;

width: 1300px;

height: 50px;

}*/

.top{

border: 0px solid blue;

width: 431px;

height: 50px;

float: left;

}

#top{

padding-top: 12px;

height: 38px;

}

#menu{

border: 0px solid red;

width: 1300px;

height: 50px;

background-color: black;

margin-bottom: 10px;

}

ul li{

display: inline;

color: white;

}

#clear{

clear: both;

}



#product{

border: 0px solid red;

width: 1300px;

height: 558px;

}

#product_top{

border: 0px solid blue;

width: 100%;

height: 45px;

padding-top: 8px;

}

#product_bottom{

border: 0px solid green;

width: 100%;

height: 500px;

}

#product_bottom_left{

border: 0px solid red;

width: 200px;

height: 500px;

float: left;

}

#product_bottom_right{

border: 0px solid blue;

width: 1094px;

height: 500px;

float: left;

}

#big{

border: 0px solid red;

width: 544px;

height: 248px;

float: left;

}

.small{

border: 0px solid blue;

width: 180px;

height: 248px;

float: left;

/*让里面的内容居中*/

text-align: center;

}



#bottom{

text-align: center;

}



a{

text-decoration: none;

}

</style>

<script type="text/javascript">

function init(){

//书写轮图片显示的定时操作

setInterval("changeImg()",3000);



//1.设置显示广告图片的定时操作

time = setInterval("showAd()",3000);

}



//书写函数

var i=0

function changeImg(){

i++;

//获取图片位置并设置src属性值

document.getElementById("img1").src="../img/"+i+".jpg";

if(i==3){

i=0;

}

}



//2.书写显示广告图片的函数

function showAd(){

//3.获取广告图片的位置

var adEle = document.getElementById("img2");

//4.修改广告图片元素里面的属性让其显示

adEle.style.display = "block";

//5.清除显示图片的定时操作

clearInterval(time);

//6.设置隐藏图片的定时操作

time = setInterval("hiddenAd()",3000);

}



//7.书写隐藏广告图片的函数

function hiddenAd(){

//8.获取广告图片并设置其style属性的display值为none

document.getElementById("img2").style.display= "none";

//9.清除隐藏广告图片的定时操作

clearInterval(time);

}



</script>

<script type="text/javascript" src="1.js" ></script>

</head>

<body onload="init()">

<div id="father">

<!--定时弹出广告图片位置-->

<img src="img/f001a62f-a49d-4a4d-b56f-2b6908a0002c_g.jpg" width="100%" style="display: none" id="img2"/>



<!--1.logo部分-->

<div id="logo">

<div class="top">

<img src="img/logo2.png" height="46px"/>

</div>

<div class="top">

<img src="img/header.png" height="46px" />

</div>

<div class="top" id="top">

<a href="#">登录</a>

<a href="#">注册</a>

<a href="#">购物车</a>

</div>

</div>

<div id="clear">



</div>

<!--2.导航栏部分-->

<div id="menu">

<ul>

<a href="#"><li style="font-size: 20px;">首页</li></a>    

<a href="#"><li>手机数码</li></a>    

<a href="#"><li>家用电器</li></a>    

<a href="#"><li>鞋靴箱包</li></a>    

<a href="#"><li>孕婴保健</li></a>    

<a href="#"><li>奢侈品</li></a>

</ul>

</div>

<!--3.轮播图部分-->

<div id="">

<img src="img/1.jpg" width="100%" id="img1"/>

</div>

<!--4.最新商品-->

<div id="product">

<div id="product_top">

   

<span style="font-size: 25px;padding-top: 8px;">最新商品</span>   

<img src="img/title2.jpg" />

</div>

<div id="product_bottom">

<div id="product_bottom_left">

<img src="img/big01.jpg" width="100%" height="100%"/>

</div>

<div id="product_bottom_right">

<div id="big">

<a href="#"><img src="img/middle01.jpg" width="100%" height="100%"/></a>

</div>

<div class="small">

<img src="img/small03.jpg" />

<a href="#"><p style="color: gray;">电炖锅</p></a>

<p style="color: red;">¥399</p>

</div>

<div class="small">

<img src="img/small03.jpg" />

<a href="#"><p style="color: gray;">电炖锅</p></a>

<p style="color: red;">¥399</p>

</div>

<div class="small">

<img src="img/small03.jpg" />

<a href="#"><p style="color: gray;">电炖锅</p></a>

<p style="color: red;">¥399</p>

</div>

<div class="small">

<img src="img/small03.jpg" />

<a href="#"><p style="color: gray;">电炖锅</p></a>

<p style="color: red;">¥399</p>

</div>

<div class="small">

<img src="img/small03.jpg" />

<a href="#"><p style="color: gray;">电炖锅</p></a>

<p style="color: red;">¥399</p>

</div>

<div class="small">

<img src="img/small03.jpg" />

<a href="#"><p style="color: gray;">电炖锅</p></a>

<p style="color: red;">¥399</p>

</div>

<div class="small">

<img src="img/small03.jpg" />

<a href="#"><p style="color: gray;">电炖锅</p></a>

<p style="color: red;">¥399</p>

</div>

<div class="small">

<img src="img/small03.jpg" />

<a href="#"><p style="color: gray;">电炖锅</p></a>

<p style="color: red;">¥399</p>

</div>

<div class="small">

<img src="img/small03.jpg" />

<a href="#"><p style="color: gray;">电炖锅</p></a>

<p style="color: red;">¥399</p>

</div>

</div>

</div>

</div>

<!--5.广告图片-->

<div id="">

<img src="../img/ad.jpg" width="100%"  />

</div>

<!--6.热门商品-->

<div id="product">

<div id="product_top">

   

<span style="font-size: 25px;padding-top: 8px;">热门商品</span>   

<img src="../img/title2.jpg" />

</div>

<div id="product_bottom">

<div id="product_bottom_left">

<img src="../img/big01.jpg" width="100%" height="100%"/>

</div>

<div id="product_bottom_right">

<div id="big">

<a href="#"><img src="../img/middle01.jpg" width="100%" height="100%"/></a>

</div>

<div class="small">

<img src="img/small03.jpg" />

<a href="#"><p style="color: gray;">电炖锅</p></a>

<p style="color: red;">¥399</p>

</div>

<div class="small">

<img src="img/small03.jpg" />

<a href="#"><p style="color: gray;">电炖锅</p></a>

<p style="color: red;">¥399</p>

</div>

<div class="small">

<img src="img/small03.jpg" />

<a href="#"><p style="color: gray;">电炖锅</p></a>

<p style="color: red;">¥399</p>

</div>

<div class="small">

<img src="img/small03.jpg" />

<a href="#"><p style="color: gray;">电炖锅</p></a>

<p style="color: red;">¥399</p>

</div>

<div class="small">

<img src="img/small03.jpg" />

<a href="#"><p style="color: gray;">电炖锅</p></a>

<p style="color: red;">¥399</p>

</div>

<div class="small">

<img src="img/small03.jpg" />

<a href="#"><p style="color: gray;">电炖锅</p></a>

<p style="color: red;">¥399</p>

</div>

<div class="small">

<img src="img/small03.jpg" />

<a href="#"><p style="color: gray;">电炖锅</p></a>

<p style="color: red;">¥399</p>

</div>

<div class="small">

<img src="../img/small03.jpg" />

<a href="#"><p style="color: gray;">电炖锅</p></a>

<p style="color: red;">¥399</p>

</div>

<div class="small">

<img src="../img/small03.jpg" />

<a href="#"><p style="color: gray;">电炖锅</p></a>

<p style="color: red;">¥399</p>

</div>

</div>

</div>

</div>

<!--7.广告图片-->

<div id="">

<img src="../img/footer.jpg" width="100%"/>

</div>

<!--8.友情链接和版权信息-->

<div id="bottom">

<a href="#">关于我们</a>

<a href="#">联系我们</a>

<a href="#">招贤纳士</a>

<a href="#">法律声明</a>

<a href="#">友情链接</a>

<a href="#">支付方式</a>

<a href="#">配送方式</a>

<a href="#">服务声明</a>

<a href="#">广告声明</a>

<p>

Copyright © 2005-2016 传智商城 版权所有

</p>

</div>

</div>

</body>

</html>

//让标签不显示就是把他的display:none;显示就为display:block;

//在函数中在调用某个样式的时候先要.style

//setinterval(“函数”。一段时间每隔多少时间就执行一次,没有返回值

//clearinteral(time),time是之前的setinterval函数,作用是清楚setinterval函数的作用

Select(省级联动)

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>注册页面重新布局</title>

<style type="text/css">

.top{

border: 1px solid red;

width: 32.9%;

height: 50px;

float: left;

}



#clear{

clear: both;

}

#menu{

border: 1px solid blue;

width: 99%;

height: 40px;

background-color: black;

}

#menu ul li{

display: inline;

color: white;

font-size: 19px;

}

#bottom{

text-align: center;

}

#contanier{

border: 1px solid red;

width: 99%;

height: 600px;

background: url(../img/regist_bg.jpg);

position: relative;

}

#content{

border: 5px solid gray;

width: 50%;

height: 60%;

position: absolute;

top: 100px;

left: 300px;

background-color: white;

padding-top: 50px;

}



</style>



<script>

//1.创建一个二维数组用于存储省份和城市

var cities = new Array(4);

cities[0] = new Array("武汉市","黄冈市","襄阳市","荆州市");

cities[1] = new Array("长沙市","郴州市","株洲市","岳阳市");

cities[2] = new Array("石家庄市","邯郸市","廊坊市","保定市");

cities[3] = new Array("郑州市","洛阳市","开封市","安阳市");



function changeCity(val){



//7.获取第二个下拉列表

var cityEle = document.getElementById("city");



//9.清空第二个下拉列表的option内容

cityEle.options.length=0;



//2.遍历二维数组中的省份

for(var i=0;i<cities.length;i++){

//注意,比较的是角标

if(val==i){

//3.遍历用户选择的省份下的城市

for(var j=0;j<cities[i].length;j++){

//alert(cities[i][j]);

//4.创建城市的文本节点

var textNode = document.createTextNode(cities[i][j]);

//5.创建option元素节点

var opEle = document.createElement("option");

//6.将城市的文本节点添加到option元素节点

opEle.appendChild(textNode);

//8.将option元素节点添加到第二个下拉列表中去

cityEle.appendChild(opEle);

}

}

}

}

</script>



</head>

<body>

<div>



<!--1.logo部分的div-->

<div>

<!--切分为3个小的div-->

<div class="top">

<img src="../img/logo2.png" height="47px"/>

</div>

<div class="top">

<img src="../img/header.png" height="47px"/>

</div>

<div class="top" style="padding-top: 15px;height: 35px;">

<a href="#">登录</a>

<a href="#">注册</a>

<a href="#">购物车</a>

</div>

</div>

<!--清除浮动-->

<div id="clear">



</div>

<!--2.导航栏部分的div-->

<div id="menu">

<ul>

<li >首页</li>

<li >电脑办公</li>

<li >手机数码</li>

<li >孕婴保健</li>

<li >鞋靴箱包</li>

</ul>

</div>

<!--3.中间注册表单部分div-->

<div id="contanier">

<div id="content">

<table border="1" align="center" cellpadding="0" cellspacing="0" width="70%" height="70%" bgcolor="white">

<form method="get" action="#" onsubmit="return checkForm()">

<tr>

<td colspan="2" align="center">

<font size="5">会员注册</font>

</td>



</tr>

<tr>

<td>

用户名

</td>

<td>

<input type="text" name="username" id="username" onfocus="showTips('username','必须以字母开头')" onblur="check('username','用户名不能为空')" /><span id="usernamespan"></span>

</td>

</tr>

<tr>

<td>密码</td>

<td>

<input type="password" name="password" id="password" onfocus="showTips('password','密码长度不能低于6位!')" onblur="check('password','密码不能为空!')" /><span id="passwordspan"></span>

</td>

</tr>

<tr>

<td>确认密码</td>

<td>

<input type="password" name="repassword" />

</td>

</tr>

<tr>

<td>email</td>

<td>

<input type="text" name="email" id="email" />

</td>

</tr>

<tr>

<td>姓名</td>

<td>

<input type="text" name="name" />

</td>

</tr>

<tr>

<td>籍贯</td>

<td>

<select onchange="changeCity(this.value)">

<option>--请选择--</option>

<option value="0">湖北</option>

<option value="1">湖南</option>

<option value="2">河北</option>

<option value="3">河南</option>

</select>

<!--//select常用的事件onchange

//checkbox,radio常用的属性checked(常用于做判断)

//button 常用的事件onclick-->



<select id="city">



</select>

</td>

</tr>

<tr>

<td>性别</td>

<td>

<input type="radio" name="sex" value="男"/>男

<input type="radio" name="sex" value="女"/>女

</td>

</tr>

<tr>

<td>出生日期</td>

<td>

<input type="text" name="birthday" />

</td>

</tr>

<tr>

<td>验证码</td>

<td>

<input type="text" name="yanzhengma" />

<img src="../img/yanzhengma.png" />

</td>

</tr>

<tr>

<td colspan="2">

<input type="submit" value="注册" />

</td>

</tr>

</form>

</table>

</div>

</div>

<!--4.广告图片的div-->

<div id="">

<img src="../img/footer.jpg" width="99%" />

</div>

<!--5.超链接与版权信息的div-->

<div id="bottom">

<a href="#">关于我们 </a>

<a href="#">联系我们 </a>

<a href="#">招贤纳士 </a>

<a href="#">法律声明</a>

<a href="#">友情链接</a>

<a href="#">支付方式</a>

<a href="#">配送方式 </a>

<a href="#">服务声明 </a>

<a href="#">广告声明 </a>

<p>Copyright © 2005-2016 传智商城 版权所有 </p>

</div>

</div>

</body>

</html>

 

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!