js例子

Posted 2020-09-24 *眉间缘*

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了js例子相关的知识，希望对你有一定的参考价值。

1.子菜单下拉

<!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>
<style type="text/css">
*{
    margin:0px auto;
    padding:0px;
    }
#caidanwai{
    width:800px;
    height:40px;
    margin-top:100px;
    }
#meau{
    width:404px;
    height:40px;
    border:1px solid #99F;
    }
.list{
    float:left;
    width:100px;
    height:40px;
    text-align:center;
    line-height:40px;
    vertical-align:middle;
    border-right:1px solid #99F;    
    }
.erji{
    width:0px;
    height:0px;
    float:left;
    }
.erjiwai{
    width:100px;
    height:120px;
    border:1px solid #99F;
    position:relative;
    top:41px;
    left:-102px;
    display:none;
    }
.leixing{
    width:100px;
    height:39px;
    text-align:center;
    line-height:40px;
    vertical-align:middle;
    border-bottom:1px solid #99F;
    }
</style>
</head>

<body>
<div id="caidanwai">
    <div id="meau">
        <div class="list" onmouseover="show(\'chanpin\')" onmouseout="hide(\'chanpin\')" >产品中心</div>
            <div class="erji">
                <div class="erjiwai" id="chanpin" onmouseover="xuanzhong(this)" onmouseout="yinc(this)">
                    <div class="leixing">食品</div>
                    <div class="leixing">家电</div>
                    <div class="leixing">手机</div>
                </div>
            </div>
        <div class="list" onmouseover="show(\'xinwen\')" onmouseout="hide(\'xinwen\')">新闻中心</div>
        <div class="erji">
                <div class="erjiwai" id="xinwen" onmouseover="xuanzhong(this)" onmouseout="yinc(this)">
                    <div class="leixing">体育</div>
                    <div class="leixing">娱乐</div>
                    <div class="leixing">军事</div>
                </div>
            </div>
        <div class="list">联系我们</div>
        <div class="list">关于我们</div>
    </div>
</div>
</body>
<script type="text/javascript">
function show(id){//点击显示下拉菜单
    var a=document.getElementById(id);
    a.style.display="block";
    }
function hide(id){//鼠标离开下来菜单隐藏
    var a=document.getElementById(id);
    a.style.display="none";
    }
function xuanzhong(a){
    a.style.display="block";
    }
 function yinc(a){
    a.style.display="none";
    }
</script>
</html>

我的问题有：再打代码时打错单词导致实现不了，还有就是，onmouseover，onmousemove用法有些不熟悉

2.图片轮播

<!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>
<style type="text/css">
*{
    margin:0px auto;
    padding:0px;
    }
#wai{
    width:1000px;
    height:500px;
    }

</style>
</head>

<body>
    <div id="wai" >
        <img  class="img" src="try/t0184016d6010089f01.jpg" width="1000" height="500" />
        <img class="img" src="try/t01ec98d422ed9fab4a.jpg" width="1000" height="500" style="display:none"/>
        <img  class="img" src="try/t017f330eeb8de34fc2.jpg" width="1000" height="500" style="display:none"/>
    
</div>
</body>
<script type="text/javascript">
var img=document.getElementsByClassName("img");
var i=0;
huan();
function huan(){                       
    xianshi();
    if(i>=img.length-1){
        i=0;
    }else{
        i++;
        }    
    window.setTimeout("huan()",2000);
    }
function xianshi(){
    
    for(var a=0;a<img.length;a++){
        img[a].style.display="none";
        }
    img[i].style.display="block";
    }

</script>
</html>

问题有：尝试用for循环，使用i代表循环次数和图片索引，没有完成

/*function huan(){                 
for(i=0;i<img.length-1;i++){
    img[i].style.display="block";
    if(i>=img.length-1){
        i=0
        }
    }
img[i].style.display="none";
window.setTimeout("huan()",2000);
}*/

3.选项卡效果

<!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>
<style type="text/css" >
*{
    margin:0px auto;
    padding:0px;
    }
#xuan{
    width:400px;
    height:30px;
    }
.wai{width:100px;
    height:30px;
    margin-top:100px;
    float:left}
.nei{
    width:800px;
    height:500px;
    }
</style>

</head>

<body>
<div id="xuan"> 
<div class="wai" style="background-color:#06F" onclick="dianji(\'one\')"></div>
<div class="wai" style="background-color:#0F0"  onclick="dianji(\'two\')" ></div>
<div class="wai" style="background-color:#C36" onclick="dianji(\'three\')"></div>
<div class="wai" style="background-color:#FF0" onclick="dianji(\'four\')"></div>
</div>
<div style="clear:both"></div>
<div class="nei"  id="one " style="background-color:#06F"></div>
<div class="nei" id="two" style="background-color:#0F0; display:none"></div>
<div class="nei" id="three" style="background-color:#C36; display:none"></div>
<div class="nei" id="four" style="background-color:#FF0; display:none"></div>
</body>
<script type="text/javascript">
function dianji(id){
    var a=document.getElementsByClassName("nei");
    for(i=0;i<a.length;i++){
    a[i].style.display="none";
        }
document.getElementById(id).style.display="block";
    }

</script>
</html>

问题有：当对第一个选项卡点击2次，下面的内容不再显示

4.进度条制作

<!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>
<style type="text/css">
*{
margin:0px auto;
padding:0px;    
    }
#wai{
    width:300px;
    height:30px;
    border:1px solid #3FF;
    margin-top:100px;
    float:left

    
    }
#nei{
    width:0%;
    height:30px;
    background-color:#F00;
    float:left
    }
#dj{
    margin-top:130px;
    }

</style>
</head>

<body>
<div id="wai">
<div id="nei"></div>
</div>
<input type="button" value="点击" id="dj" onclick="show()" />
</body>
<script type="text/javascript">
var a=0;
function show(){
    if(a<100){
        a++;
        }
        document.getElementById("nei").style.width=a+\'%\';
        window.setTimeout("show()",5);
            
            }
    

</script>
</html>

问题：

 document.getElementById("nei").style.width=a+\'%\';我第一次在"a+\'%\'"这样写的，实现不了
        window.setTimeout("show()",5);对于settimeout（）的使用不大清晰
我想过尝试一下设计一个停止按钮，当你按下进度条停止，而进度条可以一直在走

以上是关于js例子的主要内容，如果未能解决你的问题，请参考以下文章

分享几个实用的代码片段（附代码例子）

谷歌浏览器调试jsp 引入代码片段，如何调试代码片段中的js

VSCode自定义代码片段——JS中的面向对象编程

VSCode自定义代码片段9——JS中的面向对象编程

js代码片段: utils/lcoalStorage/cookie