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 ...
随机推荐
- Azure Service Bus
Azure Service Bus 是类似Rabbit的一个队列的应用. 找了两个基本的教程 First(但是这个,没有写怎么去链接账户) Sec:这个有 Third(讲的也很好) Windo ...
- 【sqli-labs】 less7 GET - Dump into outfile - String (导出文件GET字符型注入)
使用此漏洞需要知道WEB程序的根路径并且MYSQL的secure-file-priv配置应为可写入该路径 添加单引号,发现错误被屏蔽 对应的SQL语句应为 ')) ... 字段还是3个 在数据库中执行 ...
- （转）Bootstrap 之 Metronic 模板的学习之路 - （5）主题&布局配置
https://segmentfault.com/a/1190000006736457 Theme Setup 主题配置 Metronic comes with 6 color themes,defa ...
- JSP状态管理_1_Cookie
http协议的无状态性:当浏览器发送请求飞服务器时,服务器相应客户端请求:但当同一个浏览器再次发送请求给浏览器时,服务器并不知道它就是刚才那个客户端. 保存用户状态的两大机制:Session,Cook ...
- webpack学习（四）— webpack-dev-server
webpack提供给我们检查压缩代码的功能之外,还提供了1个服务器的插件,这就是webpack-dev-server,利用这个差价我们可以启动个web服务器并时时更新我们的修改. 下面以1个简单的例子 ...
- day8 面向对象编程基础
活在当下的程序员应该都听过“面向对象编程”一词,也经常有人问能不能用一句话解释下什么是“面向对象编程”,我们先来看看比较正式的说法. 把一组数据结构和处理它们的方法组成对象(object),把相同行为 ...
- Jmeter的参数签名测试
简介 参数签名可以保证开发的者的信息被冒用后,信息不会被泄露和受损.原因在于接入者和提供者都会对每一次的接口访问进行签名和验证. 签名sign的方式是目前比较常用的方式. 第1步:接入者把需求访问的接 ...
- Linux基础：find命令总结
本文只总结一些常用的用法,更详细的说明见man find和 info find. find命令 find命令常用来查找文件或目录,可以根据给定的路径和表达式查找所需的文件或目录.该工具是由findut ...
- [POI2005]BAN-Bank Notes
[POI2005]BAN-Bank Notes POI真好玩.. 如果没有记录方案的话就是一个简单的二进制或单调队列优化多重背包的问题. 但是非常难受的是要记录方案. 而且空间只给了\(64MB\), ...
- 设置随机 User-Agent
本文转载自以下网站: Scrapy 中设置随机 User-Agent 的方法汇总 https://www.makcyun.top/web_scraping_withpython14.html 一行代码 ...