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="" height="" />

        <img class="img" src="try/t01ec98d422ed9fab4a.jpg" width="" height="" style="display:none"/>

        <img  class="img" src="try/t017f330eeb8de34fc2.jpg" width="" height="" style="display:none"/>

</div>

</body>

<script type="text/javascript">

var img=document.getElementsByClassName("img");

var i=;

huan();

function huan(){

    xianshi();

    if(i>=img.length-){

        i=;

    }else{

        i++;

        }

    window.setTimeout("huan()",);

    }

function xianshi(){

    for(var a=;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=;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:%;

    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=;

function show(){

    if(a<){

        a++;

        }

        document.getElementById("nei").style.width=a+'%';

        window.setTimeout("show()",);

            }

</script>

</html>

问题：

 document.getElementById("nei").style.width=a+'%';我第一次在"a+'%'"这样写的，实现不了

        window.setTimeout("show()",5);对于settimeout（）的使用不大清晰
我想过尝试一下设计一个停止按钮，当你按下进度条停止，而进度条可以一直在走

js例子的更多相关文章

本地预览图片html和js例子
本地预览图片html和js例子,直接上代码吧. <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" ...
angular.js 例子
angular.js是一个前端的MVC框架,12年的时候曾近在一个portal平台的项目中使用过. 下面给出一个angular.js的典型例子,涵盖一些基础的知识点,用以复习备忘: <html ...
从零开始学习Node.js例子七发送HTTP客户端请求并显示响应结果
wget.js:发送HTTP客户端请求并显示响应的各种结果 options对象描述了将要发出的请求.data事件在数据到达时被触发,error事件在发生错误时被触发.HTTP请求中的数据格式通过MIM ...
一个取消事件的简单js例子(事件冒泡与取消默认行为)
先上代码: <div id='outer' onclick='alert("我是outer")'> <div id="middle" oncl ...
从零开始学习Node.js例子九设置HTTP头
server.js //basic server的配置文件 ; var server = require('./basicserver').createServer(); server.useFavI ...
从零开始学习Node.js例子八使用SQLite3和MongoDB
setup.js:初始化数据库 var util = require('util'); var async = require('async'); //npm install async var no ...
前向后瞻正则表达式及其JS例子
定义 x(?=y) 匹配'x'仅仅当'x'后面跟着'y'.这种叫做正向肯定查找. 比如,/Jack(?=Sprat)/会匹配到'Jack'仅仅当它后面跟着'Sprat'./Jack(?=Sprat|F ...
从零开始学习Node.js例子六 EventEmitter发送和接收事件
pulser.js /* EventEmitter发送和接收事件 HTTPServer和HTTPClient类,它们都继承自EventEmitter EventEmitter被定义在Node的事件(e ...
从零开始学习Node.js例子五服务器监听
httpsnifferInvoke.js var http = require('http'); var sniffer = require('./httpsniffer'); var server ...
从零开始学习Node.js例子四多页面实现数学运算续二(client端和server端)
1.server端支持数学运算的服务器,服务器的返回结果用json对象表示. math-server.js //通过监听3000端口使其作为Math Wizard的后台程序 var math = r ...

随机推荐

HangFire的定时任务和Quartz.NET总结（三）Quartz 配置
在一个Net Core需求中,需要在每天的凌晨三点去抓取两个电商仓库的剩余的每个料号的数量来写会自己的表中, 用到了HangFire的定时任务这篇文章讲的很详细记录下文章2 这篇更简单 Qu ...
JAVA 构建使用 Native 库
Java 使用Native文件,一般分解为下面几个步骤: 在Java代码中使用native关键字声明一个本地方法运行javah,获得包含该方法声明的C语言头文件(使用jni编程中的C函数名通常是相关 ...
我所理解的monad(4)：函子(functor)是什么--可把范畴简单的看成高阶类型
大致介绍了幺半群(monoid)后,我们重新回顾最初引用wadler(haskell委员会成员,把monad引入haskell的家伙)的那句话: 现在我们来解读这句话中包含的另一个概念:自函子(End ...
基于 react-navigation 父子组件的跳转链接
1.在一个页面中中引入一个组件,但是这个组件是一个小组件,例如是一个cell,单独的每个cell都是需要点击有链接跳转的,这个时候通常直接使用 onPress 的跳转就会不起作用正确的处理方法是,在 ...
给数组增加remove函数
//给数组增加indexOf函数Array.prototype.indexOf = function(val) { for (var i = 0; i < this.length; i++) { ...
Linux：只复制文件权限和所有者
在Linux上,怎么把一个文件的<权限和所有者>赋给另一个文件呢? chown命令可以设置所有者和用户组:chmod可以设置文件的权限.这两个命令都支持使用另一个文件做为引用(RFILE) ...
金蝶WAFII
[luogu 1092] 虫食算 (暴力搜索剪枝)
传送门 Description Input 包含四行. 第一行有一个正整数 (N≤26). 后面的三行,每行有一个由大写字母组成的字符串,分别代表两个加数以及和.这3个字符串左右两端都没有空格,从高位 ...
Nginx设置alias别名目录访问phpmyadmin
引言:Nginx服务器通过设置alias别名可以使特定的目录(phpmyadmin目录)不出现在网站根目录下面,即使网站根目录被攻破,也不会影响到phpmyadmin目录里面的文件. 说明: 站点:h ...
Java 实现邮件发送功能
1.新建model SendMail.java import java.util.Properties; public class SendMail { // 发送邮件的服务器的IP和端口 priva ...

js例子

js例子的更多相关文章

随机推荐

热门专题