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 ...

随机推荐

MyEclipse加入jquery.js文件missing semicolon的错误
今天打开项目,发现有一个小红叉,虽然不影响项目的编译和运行,但是看着非常影响心情.原因是jquery-1.8.2.min.js报了一堆missing semicolon的错误.之所以会这样,其实是My ...
python核心编程中的对象值比较VS对象身份比较(转载)
转载地址: https://blog.csdn.net/Mluka/article/details/51076786 在python核心编程第四章中,P69在优化下面这段代码时提出了:对象值比较VS对 ...
BRAFT EDITOR富文本编辑器
https://braft.margox.cn/demos/basic 官方文档 import React from 'react' import Uploading from '../Upl ...
团体程序设计天梯赛-练习集-L1-042. 日期格式化
L1-042. 日期格式化世界上不同国家有不同的写日期的习惯.比如美国人习惯写成“月-日-年”,而中国人习惯写成“年-月-日”.下面请你写个程序,自动把读入的美国格式的日期改写成中国习惯的日期. 输 ...
【转】VMWare vCenter 6.0安装配置
版权声明: 专注于"GIS+"前沿技术的研究与交流,将云计算技术.大数据技术.容器技术.物联网与GIS进行深度融合,探讨"GIS+"技术和行业解决方案:文章允许 ...
Lua的五种变量类型、局部变量、全局变量、lua运算符、流程控制if语句_学习笔记02
Lua的五种变量类型.局部变量.全局变量 .lua运算符 .流程控制if语句 Lua代码的注释方式: --当行注释 --[[ 多行注释 ]]-- Lua的5种变量类型: 1.null 表示 ...
Java 并行 (2): Monitor
转自:http://www.cnblogs.com/tomsheep/archive/2010/06/09/1754419.html 1. 什么是Monitor? Monitor其实是一种同步工具,也 ...
一步一步实现基于GPU的pathtracer（二）：求交算法
不管是哪种全局光照算法,最根本的都要落实到光线与物体的求交.主要分为光线与参数曲面和非参数曲面的求交,典型的参数曲面有球.盒.圆柱等基本体及基本体的组合体,以及一些更为复杂的参数曲面.非参数曲面就是所 ...
[POI2012]OKR-A Horrible Poem
正解:对于一个区间l,r,它的循环节长度一定是它的因数. 然后如果循环节是这个长度,那么[l+len,r]一定等于[l,r-len]. 然后每次询问的时候就把它的长度的最小质因子提出来. BZOJ上都 ...
[CodeForces]1042D
大意:求一个序列有几个子序列的和小于给定值,里面的数有正有负,序列长度≤200000. 列个式子,其实求的是sum[r]-sum[l-1]<T sum[r]-T<sum[l-1] 所以我们 ...

js例子

js例子的更多相关文章

随机推荐

热门专题