js 定时器，菜单栏实现，随机选择图片以及进度条。

最新推荐文章于 2024-04-20 11:16:57 发布

weixin_30895603

最新推荐文章于 2024-04-20 11:16:57 发布

阅读量119

点赞数

原文链接：http://www.cnblogs.com/liubofight/p/6488935.html

版权

最近通过看了一些js经典的案例的视屏，就想和大家一起分享一下。好了不逼逼了，直接上代码！

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>定时器</title>
 6     <style>
 7     body{
 8         padding: 120px;
 9     }
10             #divobj{
11                 width: 120px;
12                 height: 80px;
13                 background: #aac;
14                 margin-bottom: 40px;
15             }
16             #stop{
17                 width: 40px;
18                 height: 30px;
19                 background: #aaa;
20             }
21                 #star{
22                 width: 40px;
23                 height: 30px;
24                 background: #aaa;
25             }
26     </style>
27 </head>
28 <body>
29                 <div id="divobj">
30                     
31                 </div>
32               <button id="star">star</button>
33 
34               <button  id="stop">stop</button>
35 
36 </body>
37 
38 </html>

下面是JS代码

 1 <script>
 2           i=0;
 3           stopobj=document.getElementById('stop');
 4           starobj=document.getElementById('star');
 5           divobjs=document.getElementById('divobj');
 6 
 7         function start(){ 
 8               sobj=setInterval(function(){
 9              divobjs.innerHTML=++i;
10              },100);
11            }
12      start();//直接调用start，刷新就直接运行了
13         function  stop(){
14               clearInterval(sobj);
15            }
16   
17          stopobj.οnclick=function(){
18                stop();
19             }
20 
21          starobj.οnclick=function(){
22                start();//通过函数的调用节省了重复的代码量。
23            }
24 </script>

通过js来实现对菜单的制作，以下看代码

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>右键菜单栏</title>
 6     <style>
 7     #menu{
 8         width: 120px;
 9         height: 240px;
10         display: none;
11         position: absolute;
12         border: 1px solid  #aaa;
13         top: 0px;
14         right: 0px;
15     }
16     #menu ul{
17         list-style: none;
18         padding-left: 0px;
19         margin-top: 0px;
20     }
21     #menu ul li{
22         width: 120px;
23         height: 24px;
24         background: #fff;
25         margin-left: 18px;
26     }
27     #menu ul li a{
28          text-decoration: none;
29          font-family: '楷体';
30          font-size: 18px;
31          cursor: pointer;
32 
33     }
34      #menu ul li a:hover{
35         color: #aaa;
36      }
37     </style>
38 </head>
39 <body>
40     <div  id="menu">
41     <ul>
42     <li><a href="">后退</a></li>
43     <li><a href="">前进</a></li>
44     <li><a href="">刷新</a></li>
45     <li><a href="">全选</a></li>
46     <li><a href="">添加到收藏夹</a></li>
47     <li><a href="">打印</a></li>
48     <li><a href="">查看源码</a></li>
49     <li><a href="">发送</a></li>
50     <li><a href="">属性</a></li>
51     <li><a href="">审查属性</a></li>
52     </ul>
53     </div>
54 </body>
55 </html>

以下是js代码部分

 1 <script>
 2       document.οncοntextmenu=function(event){
 3         x=event.clientX;
 4         y=event.clientY;
 5         menu.style.left=x+15+'px';
 6          menu.style.top=y+15+'px';
 7          menu.style.display='inline';
 8      return false;//将原有的菜单栏隐藏起来
 9     }
10     //点击菜单栏中的属性，掩藏菜单栏
11     menu.οnclick=function(){
12         this.style.display='none';
13     }
14      //点击左键，掩藏菜单栏
15     document.οnclick=function(){
16         menu.style.display='none';
17     }

通过random数组的结合来实现对事件的选择

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>randomSelect</title>
 6 </head>
 7 <body>
 8     <img src="" alt="" id="imgobj">
 9 </body>
10 </html>

以下是js代码部分

 1 <script>
 2     function SelectImg(){
 3             arr=['1.jpg','1.jpg','2.jpg','3.jpg','4.jpg'];//数组的初始化
 4             key=Math.floor(Math.random()*arr.length);//floor函数取其数的下线，为整数。
 5             val=arr[key];
 6              imgs=document.getElementById('imgobj');
 7              imgs.src=val;
 8     }
 9      setInterval(SelectImg,500);;
10 </script>

进度条的实现

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>进度条</title>
 6     <style>
 7     #main{
 8         width: 1000px;
 9         height: 30px;
10         background: #ccc;  
11     }
12     #program{
13          width: 0px;
14         height: 30px;
15         background: #c00;  
16     }
17     #bid{
18         margin-top: 10px;
19     }
20     </style>
21 </head>
22 <body>
23     <div id="main">
24     <div id="program">
25     </div>
26     </div>
27     <button id='bid'>star</button>
28 </body>
29 </html>

以下是js代码部分

 1 <script>
 2 b=document.getElementById('bid');
 3 b.οnclick=function(){
 4     pro=0;
 5     v=1;
 6     sobj=setInterval(function(){
 7         pro+=v;
 8         if(pro>=50){
 9             v=5;
10         }
11         if(pro>=100){
12             clearInterval(sobj);
13         }
14         program.style.width=pro+'%';
15     },100);
16 }
17 </script>

感觉js的魅力实在是太大了，看起来很炫的效果，轻松地就能做出来，不仅如此学好了，学习jquey等一些插件，将会得心应手。也希望自己能够坚持下去吧！从今天开始，一个星期更新三次博客，给自己充电，大家一起来呀！

转载于:https://www.cnblogs.com/liubofight/p/6488935.html

weixin_30895603

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js 定时器，菜单栏实现，随机选择图片以及进度条。

最近通过看了一些js经典的案例的视屏，就想和大家一起分享一下。好了不逼逼了，直接上代码！ 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>定时器</title> 6 ...
复制链接

扫一扫