zoukankan html css js c++ java

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{
    800px;
    height:40px;
    margin-top:100px;
    }
#meau{
    404px;
    height:40px;
    border:1px solid #99F;
    }
.list{
    float:left;
    100px;
    height:40px;
    text-align:center;
    line-height:40px;
    vertical-align:middle;
    border-right:1px solid #99F;    
    }
.erji{
    0px;
    height:0px;
    float:left;
    }
.erjiwai{
    100px;
    height:120px;
    border:1px solid #99F;
    position:relative;
    top:41px;
    left:-102px;
    display:none;
    }
.leixing{
    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{
    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{
    400px;
    height:30px;
    }
.wai{100px;
    height:30px;
    margin-top:100px;
    float:left}
.nei{
    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{
    300px;
    height:30px;
    border:1px solid #3FF;
    margin-top:100px;
    float:left

    
    }
#nei{
    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（）的使用不大清晰
我想过尝试一下设计一个停止按钮，当你按下进度条停止，而进度条可以一直在走

查看全文

相关阅读:
Tomcat Jboss,jetty,Apache WebLogic区别与比较(阿里面试)
zookeeper 负载均衡核心机制-实现原理包含ZAB协议(滴滴，阿里面试)
六大Web负载均衡原理与实现
 LVS(Linus Virtual Server)：三种IP负载均衡方式比较+另三种Web负载均衡方式
 JTable动态刷新数据
 java当中的定时器的4种使用方式
 java如何判断编码是否是utf8编码
 Java多线程-线程的同步与锁
 java中需要用equals来判断两个字符串值是否相等
 libcurl使用easy模式阻塞卡死等问题的完美解决---超时设置

原文地址：https://www.cnblogs.com/NCL--/p/7067566.html