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 ...
随机推荐
- 项目平台统一（前后端IDE、代码风格）
项目平台统一(前后端IDE.代码风格) 记录人:娄雨禛 前端:Webstorm(HTML+CSS+JavaScript) 后端:IntelliJ IDEA(Java) 代码风格:Java风格代码 代码 ...
- APICloud开发小技巧（二）
1.apicloud中 json.字符串之间的互转 $api.jsonToStr(ret); $api.strToJson(ret) 2.页面的来回跳转 例如已经打开了一个页面,跳转走,改变数据在跳 ...
- mysql 是如何保证在高并发的情况下autoincrement关键字修饰的列不会出现重复
转载自 https://juejin.im/book/5bffcbc9f265da614b11b731/section/5c42cf94e51d45524861122d#heading-8 mysql ...
- phtoshop CC2018破解简单过程
1.下载adobe photoshop cc 2018(可以用360安全卫士下载)-->并安装2.下载破解补丁,破解补丁下载地址:http://www.xue51.com/soft/1377.h ...
- PAT_A1141#PAT Ranking of Institutions
Source: PAT A1141 PAT Ranking of Institutions (25 分) Description: After each PAT, the PAT Center wil ...
- [MySQL优化案例]系列 — RAND()优化
众所周知,在MySQL中,如果直接 ORDER BY RAND() 的话,效率非常差,因为会多次执行.事实上,如果等值查询也是用 RAND() 的话也如此,我们先来看看下面这几个SQL的不同执行计划和 ...
- WERTYU（WERTYU, UVa10082）
把手放在键盘上时,稍不注意就会往右错一 位.这样,输入Q会变成输入W,输入J会变成输 入K等.键盘如图所示. 输入一个错位后敲出的字符串(所有字母均大写),输出打字员本来想打出的句子.输入保 证合法, ...
- 51nod1081 子段求和
给出一个长度为N的数组,进行Q次查询,查询从第i个元素开始长度为l的子段所有元素之和. 例如,1 3 7 9 -1,查询第2个元素开始长度为3的子段和,1 {3 7 9} -1.3 + 7 + 9 = ...
- [模板]FFT
郝神并没有令我明白这个. 但是巨神的题解太强了. #include <iostream> #include <complex> #include <cmath> # ...
- Hexo系列(四) NexT主题配置
Hexo 框架允许我们更换合适的主题,以便于构建不同风格的网站,这里介绍目前最常使用的一款主题之一 -- NexT 一.NexT 安装 在正式开始讲解 NexT 安装之前,我们必须明确以下几个概念: ...