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 ...
随机推荐
- js弹出层的写法实例
点击后弹出界面,通过判断浏览器长宽自动设定页面宽度和登陆页面位置. <style> /*遮罩层 弹出层*/ .mask { width: 100%; background-color: r ...
- 【Oracle】恢复重做日志组
我们在Oracle的日常运维中,有可能会遇到重做日志组丢失的情况.下面我将模拟丢失不同状态的日志组,并分别给出解决办法: 重做日志有以下几种状态,如下: - CURRENT:此状态表示正在被 LGW ...
- WEB笔记-让HTML5向下兼容的策略
//给新标签增加块级元素声明 article,aside,dialog,figure,fotter,header,legend,nav,section{display:block} //添加css兹瓷 ...
- button提交表单 a标签提交表单
<form name="searchForm" id="searchForm" method="get" action="/ ...
- Steal 偷天换日 题解(From luoguBlog)
树形+背包 奇奇怪怪的dp. 考试的时候费了半天劲把题读完后思路基本正解, 然而也不知道为什么脑子鬼畜了一下打了个非递归建树? 而且链式前向星建边? 岔路口和藏品都搞成节点? 自己给自己找麻烦Orz. ...
- RN-第三方之react-native-pull 下拉刷新、上拉加载
有一个很好的下拉刷新.上拉加载库:react-native-pull地址:https://github.com/greatbsky/react-native-pull-demo 使用 import { ...
- 02 java学习安装jdk及其环境配置
SUN公司1995年正式推出的一款语言 其实之前,Sun公司1991年,James Gosling等人就开始开发Oak语言,希望用于控制嵌入有效电视交换盒,1994年更名为Java,之前来自 与jav ...
- python时间序列按频率生成日期
有时候我们的数据是按某个频率收集的,比如每日.每月.每15分钟,那么我们怎么产生对应频率的索引呢?pandas中的date_range可用于生成指定长度的DatetimeIndex.我们先看一下怎么生 ...
- jQuery默认select选择第一个元素
$("#id option:first").prop("selected", 'selected');
- vim/vi编辑器挂到后台ctrl + z
vim/vi编辑器通过CTRL+z将文件挂在到后台后,如果要再次进入,需通过jobs查看文件的序号,然后通过fg 序号进入文件进行编辑 (BaiduPictureToWord) [master@ins ...