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

时间： 2024-08-03 09:06:41

js例子的相关文章

js例子下

6.滑动效果 <!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="C

定义 x(?=y) 匹配'x'仅仅当'x'后面跟着'y'.这种叫做正向肯定查找. 比如,/Jack(?=Sprat)/会匹配到'Jack'仅仅当它后面跟着'Sprat'./Jack(?=Sprat|Frost)/匹配‘Jack’仅仅当它后面跟着'Sprat'或者是‘Frost’.但是‘Sprat’和‘Frost’都不是匹配结果的一部分. x(?!y) 匹配'x'仅仅当'x'后面不跟着'y',这个叫做正向否定查找. 比如,/\d+(?!\.)/匹配一个数字仅仅当这个数字后面没有跟小数点的时候.正则

EazyUI主页框架搭建纯JS例子

原生JS例子

利用原生JS做一个班级统计表实现功能: 1.点击添加建立一行表格 2.点击删除,删除一行表格 3.点击每个单元格可以输入内容,焦点移走的时候保存内容思路分析: 1.建立简单的HTML的表格 2.通过JS向表格中添加元素 (1):添加tr td button 等元素 (2):添加删除按钮 3.通过DOM操作向表格中添加内容 (1):向每个td中添加点击事件 (2):向每个td中添加标记 (3):寻找标记,并在标记的td中添加 input标签 (4):焦点移除,删除标记,并且重新给每个td加上点

js例子记载

1.获取项目路径的,不一定有用,仅作参考用: 1 function getRootPath() { 2 var curWwwPath = window.document.location.href; //"http://localhost:8080/springMVC/jsonTest.jsp" 3 var pathName = window.document.location.pathname; // /springMVC/jsonTest.jsp 4 var pos = curWw

JS例子（大图轮播）

JS例子（子菜单下拉）

10+ 最佳的 Node.js 教程和实例

如果你正在找Node.js的学习资料及指南,那么请继续(阅读),我们的教程将会覆盖即时聊天应用.API服务编写.投票问卷应用.人物投票APP.社交授权. Node.js on Raspberry Pi等等. 以下是Node.js入门的简单介绍,如果你对Node.js略有了解可以直接跳过此部分. 那什么是Node.js呢? Node.js是迄今运用最多的服务端JavaScript运行时环境,使用JavaScript开发跨平台的实时WEB应用. Node.js基于Google的V8 JavaScri

JS第一堂课

jquery把JS优化.封装.简化,底层还是JS 前端:HTML网页内容,CSS网页外观,JS执行网页动作一个解决方案就是一个.sln文件,一个解决方案里面可以有多个项目 Javascript (一) 1. JavaScript是一种脚本语言,结构简单,使用方便,其代码可以直接放入HTML文档中,可以直接在支持JavaScript的浏览器中运行.JavaSript使得网页的交互性更强,更生动和灵活.当在浏览网页时做了某种操作就产生一个事件,JavaScript所编写的程序可对相应