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 ...
随机推荐
- HEK_费用报表审核无审核权限，有些字段无法编辑的问题处理
Q:HEK_费用报表审核无审核权限,有些字段无法编辑的问题处理 A:设置AP员工->给AP员工分配审批权限->绑定员工和ERP账号 1.将审核人设置为AP员工 2.分配给员工审批权限 3. ...
- logger日志
Level 描述 ALL 各级包括自定义级别 DEBUG 指定细粒度信息事件是最有用的应用程序调试 ERROR 错误事件可能仍然允许应用程序继续运行 FATAL 指定非常严重的错误事件,这可能导致应用 ...
- django分页功能，templatetags的应用
django 将不会将得到的html代码自动转化 from django.utils.html import format_html html =''' <a href='http://www. ...
- 题解 P3258 【[JLOI2014]松鼠的新家】(From luoguBlog)
唯一能得分的题也被自己搞炸了,好的. 考场上读完题基本认定和lca脱不了干系,想了一会确认是树剖. 那么问题来了,考前一节课刚发现自己之前打的树剖是错的. 而且就算是错的我也没信心考场调出来. 于是打 ...
- XML的解析方式
//解析和输出XML public void showXml() { string filepath = Application.dataPath + @"/my.xml"; if ...
- Uoj #274. 【清华集训2016】温暖会指引我们前行 LCT维护边权_动态最小生成树
Code: 行#include<bits/stdc++.h> #define ll long long #define maxn 1000000 #define inf 100000000 ...
- tornado服务器运行django应用
在jumpserver项目中看到的 def main(): from django.core.wsgi import get_wsgi_application import tornado.wsgi ...
- 0223实战：MySQL Sending data导致查询很慢的问题详细分析
转自博客http://blog.csdn.net/yunhua_lee/article/details/8573621 [问题现象] 使用sphinx支持倒排索引,但sphinx从mysql查询源数据 ...
- Java 集合之Collection 接口和遍历方法
这几篇是我按网上的教程来实习的. URL: http://www.cnblogs.com/jbelial/archive/2013/03/27/2981395.html 打代码的感觉挻好的.. 注意在 ...
- 【转】kafka概念入门[一]
转载的,原文:http://www.cnblogs.com/intsmaze/p/6386616.html ---------------------------------------------- ...