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 ...
随机推荐
- 在 ef 中执行 DbContext.Table.AddRange(Enitites).ToList() 会发生什么
在 ef 中执行 DbContext.Table.AddRange(Enitites).ToList() 会发生什么 昨天和朋友摸鱼,无意之间聊到了执行 DbContext.Table.AddRang ...
- HDU_5690_快速幂，同余的性质
All X Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/65536 K (Java/Others) Problem D ...
- 移动端mui常用方法
本文分享一些用Mui的时候所采的坑 1.mui中上拉刷新事件a标签中的链接.元素onclick事件在手机上点击不了 mui('body').on('tap','a',function(){docume ...
- python tips:迭代器与可迭代对象
for循环 for i in s: print(i) 在上述for循环中,不断地将s中的值赋值给i,然后打印出来.这种只针对s中元素的循环称为对s的迭代,能够迭代的s称为可迭代的. python为了实 ...
- python PIL图像处理-生成图片验证码
生成效果如图: 代码 from PIL import Image,ImageDraw,ImageFont,ImageFilter import random # 打开一个jpg图像文件: im = I ...
- Codeforces Round #548 (Div. 2) A. Even Substrings
You are given a string
- linux下关闭键盘的重复击键
https://askubuntu.com/questions/576421/disable-keyboard-repeat-from-command-line You can use the xse ...
- 11、mybatis的映射xml中参数类型的别名
在mapper.xml中,定义很多的statement,statement需要parameterType指定输入参数的类型.需要resultType指定输出结果的映射类型. 如果在指定类型时输入类型全 ...
- 【习题 4-2 Uva201】Squares
[链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 注意那个星号的数量... 然后V x y的话,是从(y,x)向(y+1,x)连线. H x y才是从(x,y)向(x,y+1)连线 ...
- （9）使用JdbcTemplate【从零开始学Spring Boot】
整体步骤: (1) 在pom.xml加入jdbcTemplate的依赖: (2) 编写DemoDao类,声明为:@Repository,引入JdbcTemplate (3) 编写DemoS ...