首页 > 代码库 > 习题 导航栏 选项卡 图片左右切换

习题 导航栏 选项卡 图片左右切换

导航栏

1、函数
字符串函数

var s=new string();

var ss="hello world";

var sss=""HELLO, WORLD";

alert(ss.toLowerCase());——转换成小写

alert(sss.toUpperCase());——转换成大写

alert(ss.substr(2,3));——截取字符串,从索引2开始,截取3个字符长度,不写后面的数字是截到最后

alert(ss.substring(2,3));——截取字符串,从第2个位置截取到第3个位置

sss.splite(",");——将字符串按照指定的字符分开

ss.length属性,字符串长度

ss.indexof("world");——查找world在字符串中第一次出现的位置,没有的话返回-1

ss.lastIndexof("o");——查找o在字符串中最后一次出现的位置

时间日期函数

var d=new Date();——当前时间

var dd=new Date(1999,3,2);——定义时间

dd.getFullYear();——取年份

dd.getMonth();——取月份,取出来的少1

dd.getDate();——取日期

dd.getDay();——取星期几

...

dd.setFullYear();——设置年份,设置月份的时候注意+1

数学函数

math.ceil();——取上限

math.floor();——取下限

math.sqrt();——开平方

math.round();——四舍五入

math.random();——随机数,0-1之间

2、全部事件
onclick ——单击事件
ondblclick——双击事件

onmouseover——鼠标移入
onmouseout——鼠标移除

onfocus——获取焦点
onblur——失去焦点

onkeyup——按键抬起时触发

window.onload——按键按下时触发

window.onresize——尺寸改变时触发

window.onload——页面加载完触发


3、补充


阻止事件冒泡: window.event ? window.event.cancelBubble = true : e.stopPropagation();

 

 

选项卡

 1 <!DOCTYPE html>
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5     <title></title>
 6     <style type="text/css">
 7         .div1 {
 8             width: 100px;
 9             height: 30px;
10             background-color: green;
11             float: left;
12             margin-right: 10px;
13         }
14 
15         .div2 {
16             position: absolute;
17             top: 43px;
18             width: 650px;
19             height: 300px;
20             background-color: pink;
21             z-index: 100;
22         }
23     </style>
24 </head>
25 <body>
26     <div class="div1"></div>
27     <div class="div1"></div>
28     <div class="div1"></div>
29     <div class="div1"></div>
30     <div class="div1"></div>
31     <div class="div1"></div>
32 
33     <div class="div2" style="z-index: 101;">111111</div>
34     <div class="div2">222222</div>
35     <div class="div2">333333</div>
36     <div class="div2">444444</div>
37     <div class="div2">555555</div>
38     <div class="div2">666666</div>
39 </body>
40 </html>
41 <script type="text/javascript">
42     var oDiv1s = document.getElementsByClassName(div1);
43     var oDiv2s = document.getElementsByClassName(div2);
44     var zind = 102;
45 
46     for (var i = 0; i < oDiv1s.length; i++) {
47         oDiv1s[i].index = i;
48         //点击事件
49         oDiv1s[i].onclick = function () {
50             for (var j = 0; j < oDiv1s.length; j++) {
51                 oDiv1s[j].style.backgroundColor = "green";
52             }
53             this.style.backgroundColor = "red";
54 
55             //选项卡切换代码
56             oDiv2s[this.index].style.zIndex = zind;
57             zind++;
58 
59         }
60 
61         //移入事件
62         oDiv1s[i].onmouseover = function () {
63             if (this.style.backgroundColor != "red") {
64                 this.style.backgroundColor = "blue";
65             }
66         }
67 
68         //移出事件
69         oDiv1s[i].onmouseout = function () {
70             if (this.style.backgroundColor == blue) {
71                 this.style.backgroundColor = "green";
72             }
73         }
74     }
75 
76 </script>

 

 

 

图片 左右切换

 

1 <!DOCTYPE html>
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5     <title></title>
 6     <style type="text/css">
 7         .imgboss {
 8             position: relative;
 9             width: 400px;
10             height: 226px;
11             background-color: red;
12         }
13 
14             .imgboss img {
15                 position: absolute;
16                 width: 100%;
17                 height: 100%;
18                 display: none;
19             }
20 
21         .btn_img {
22             width: 30px;
23             height: 60px;
24             background-color: #e0e0e0;
25             position: absolute;
26             z-index: 1000;
27             top: 50%;
28             margin-top: -30px;
29             text-align: center;
30             line-height: 60px;
31             font-size: 33px;
32             font-weight: bold;
33             cursor: pointer;
34         }
35     </style>
36 </head>
37 <body>
38 
39     <div class="imgboss">
40         <img class="img_item" src="img/dota_img1.jpg" style="display: block;" />
41         <img class="img_item" src="img/dota_img2.jpg" />
42         <img class="img_item" src="img/dota_img3.jpg" />
43         <img class="img_item" src="img/dota_img4.jpg" />
44         <img class="img_item" src="img/dota_img5.jpg" />
45 
46         <div class="btn_img" id="btn_left"><</div>
47         <div class="btn_img" id="btn_right" style="right: 0px;">></div>
48     </div>
49 
50 
51 </body>
52 </html>
53 <script type="text/javascript">
54     var count = 0;
55     var oImgs = document.getElementsByClassName("img_item");
56 
57     document.getElementById("btn_left").onclick = function () {
58         move(0);
59     }
60 
61     document.getElementById("btn_right").onclick = function () {
62         move(1);
63     }
64 
65     function move(a) {
66         for (var i = 0; i < oImgs.length; i++) {
67             oImgs[i].style.display = "none";
68         }
69 
70         if (a == 0) {
71             count--;
72             if (count < 0) {
73                 count = oImgs.length - 1;
74             }
75         }
76         else {
77             count++;
78             if (count > (oImgs.length - 1)) {
79                 count = 0;
80             }
81         }
82 
83         oImgs[count].style.display = "block";
84     }
85 
86 
87 
88 </script>

 

习题 导航栏 选项卡 图片左右切换