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()的使用不大清晰我想过尝试一下设计一个停止按钮,当你按下进度条停止,而进度条可以一直在走
            
时间: 06-22

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

前向后瞻正则表达式及其JS例子

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

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

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所编写的程序可对相应

2015-09-28 第七节课 (js简介、声明变量、数据类型)

vs新建步骤 文件——新建项目——web——空白web应用程序——取名.位置.确定——此时软件会自动生成一个sln文件(解决方案),一解决方案下面可以有多个项目. 点击项目——新建文件夹css和js和image——新建html页面取名demo1 (推荐设置:工具——选项——可以设置下字体和颜色:文本编辑器——把常用的几种语言设上行号颜色提示) 什么是Javascript ? Javascript 是一种脚本语言,是一种脚本语言,结构简单,使用方便,其代码可以直接放入HTML文档中,可以直接在支持

JS第一次课

1.如何写js: 写js可以在外部js文件写,也可以直接在head里面写: <script type="text/javascript"> function ShowMsg() { alert("这是我的第一个js例子"); }</script> 2.命名规范:为了增强代码的可读性,让团队成员都能看懂,遵循命名规范. (1)js是区分大小写的,非常严格. (2)js是弱类型,统一用var声明变量,如: 整形: var iNum=10; 浮点:

typeahead 表单,为用户提供提示或数据。自动补全typeahead.js

typeahead.js功能强但不支持响应式 官网:https://twitter.github.io/typeahead.js/ 例子:https://twitter.github.io/typeahead.js/examples/ 引用: <script src="https://twitter.github.io/typeahead.js/releases/latest/typeahead.bundle.js"></script> <link hre

2015.7.15 第七课 课程重点(js、声明变量、数据类型)

1.vs新建步骤 文件——新建项目——web——空白web应用程序——取名.位置.确定——此时软件会自动生成一个sln文件(解决方案),一解决方案下面可以有多个项目. 点击项目——新建文件夹css和js和image——新建html页面取名demo1 (推荐设置:工具——选项——可以设置下字体和颜色:文本编辑器——把常用的几种语言设上行号颜色提示) 2.什么是js JavaScript是一种脚本语言,结构简单,使用方便,其代码可以直接放入HTML文档中,可以直接在支持JavaScript的浏览器中