JS初学者必备的几个经典案例（一）！！！
一：选中复选框按钮可用 和 倒计时10秒后按钮可用
这是倒计时10秒后按钮可用
<!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>
</head> <body>
<div>
<span id="daojishi">10</span>
<input disabled="disabled" type="button" value="注册" id="anniu" />
</div> </body> <script type="text/javascript">
var id;
id=window.setInterval("daojishi()",1000);
function daojishi()
{
//找到span
var anniu=document.getElementById("anniu");
var s = document.getElementById("daojishi");
var t=s.innerText;
t=t-1;
if(t<=0)
{
window.clearInterval(id);
anniu.removeAttribute("disabled");
} s.innerText=t;
} </script> </html>
选中复选框按钮可用！
<!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>
</head> <body>
<input type="button" value="按钮" disabled="disabled" id="anniu" />
<input type="checkbox" onclick="xuanzhong()" id="ck"/>
</body>
<script type="text/javascript">
function xuanzhong()
{
var anniu=document.getElementById("anniu");
var ck=document.getElementById("ck");
if(ck.checked)
{
anniu.removeAttribute("disabled");
}
else
{
anniu.setAttribute("disabled","disabled");
}
} </script>
</html>
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>
</head>
<style type="text/css">
.list{ width:150px; height:50px; list-style:none; text-align:center; line-height:50px; vertical-align:middle;}
.list1{ width:150px; height:50px; list-style:none; text-align:center; line-height:50px; vertical-align:middle;}
.list2{ width:150px; height:50px; list-style:none; text-align:center; line-height:50px; vertical-align:middle;}
.list3{ width:150px; height:50px; list-style:none; text-align:center; line-height:50px; vertical-align:middle;}
.list4{ width:150px; height:50px; list-style:none; text-align:center; line-height:50px; vertical-align:middle;}
</style>
<body>
<div style="width:150px; height:1000px;">
<ul>
<li class="list" style=" background-color:#F00" onclick="dianji('yi')">文件</li>
<div id="yi" style="width:150px; height:200px; display:none">
<ul>
<li class="list1">文件</li>
<li class="list1">编辑</li>
<li class="list1">格式</li>
<li class="list1">命令</li>
</ul>
</div>
<li class="list" style=" background-color:#0F0" onclick="dianji('er')">编辑</li>
<div id="er" style="width:150px; height:200px; display:none">
<ul>
<li class="list2">文件</li>
<li class="list2">编辑</li>
<li class="list2">格式</li>
<li class="list2">命令</li>
</ul>
</div>
<li class="list" style=" background-color:#00F" onclick="dianji('sa')">格式</li>
<div id="sa" style="width:150px; height:200px; display:none">
<ul>
<li class="list3">文件</li>
<li class="list3">编辑</li>
<li class="list3">格式</li>
<li class="list3">命令</li>
</ul>
</div>
<li class="list" style=" background-color:#FF0" onclick="dianji('si')">命令</li>
<div id="si" style="width:150px; height:200px; display:none">
<ul>
<li class="list4">文件</li>
<li class="list4">编辑</li>
<li class="list4">格式</li>
<li class="list4">命令</li>
</ul>
</div>
</ul>
</div>
</body>
<script type="text/javascript">
function dianji(a)
{
var a=document.getElementById(a);
if(a.style.display=="none")
{
a.style.display="block";
}
else
{
a.style.display="none";
}
}
</script>
</html>
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>
</head>
<style type="text/css">
*{ margin:0px auto; padding:0px;}
.list{ width:100px; height:50px; text-align:center; line-height:50px; vertical-align:middle; float:left; list-style:none;}
.ys{ width:100px; height:100px; float:left; margin-top:50px; margin-left:-100px;}
</style>
<body>
<<br /><<br />
<div style="width:400px; height:50px;">
<ul>
<li class="list" style="background-color:#F00" onmouseover="yishang('yi')" onmouseout="yichu('yi')">文件</li>
<div id="yi" class="ys" style="background-color:#F00;display:none"></div>
<li class="list" style="background-color:#0F0" onmouseover="yishang('er')" onmouseout="yichu('er')">编辑</li>
<div id="er" class="ys" style="background-color:#0F0;display:none"></div>
<li class="list" style="background-color:#00F" onmouseover="yishang('sa')" onmouseout="yichu('sa')">命令</li>
<div id="sa" class="ys" style="background-color:#00F;display:none"></div>
<li class="list" style="background-color:#FF0" onmouseover="yishang('si')" onmouseout="yichu('si')">帮助</li>
<div id="si" class="ys" style="background-color:#FF0;display:none"></div>
</ul>
</div>
</body>
<script type="text/javascript">
function yishang(a)
{
var a=document.getElementById(a);
if(a.style.display=="none")
{
a.style.display="block";
}
}
function yichu(a)
{
var a=document.getElementById(a); a.style.display="none"; }
</script>
</html>
5.下拉列表
<!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>
</head>
<style type="text/css">
*{ margin:0px auto; padding:0px;}
#yi{ width:200px; height:50px; border:1px solid #333; text-align:center; line-height:50px; vertical-align:middle;}
#yi:hover{ cursor:pointer}
.list{ width:200px; height:50px; border:1px solid #333; text-align:center; line-height:50px; vertical-align:middle; border-top:none;}
.list:hover{ cursor:pointer;}
</style>
<body>
<<br /><<br />
<div id="yi" onclick="dianji()">选项</div>
<div id="er" style="display:none">
<div class="list" onclick="xuan(this)">山东</div>
<div class="list" onclick="xuan(this)">河北</div>
<div class="list" onclick="xuan(this)">山西</div>
</div>
</body>
<script type="text/javascript">
function dianji()
{
var a=document.getElementById("er");
if(a.style.display=="none")
{
a.style.display="block";
}
else
{
a.style.display="none";
}
}
function xuan(a)
{
var yi=document.getElementById("yi");
var b=document.getElementById("er");
yi.innerHTML=a.innerHTML;
b.style.display="none";
}
</script>
</html>
6.进度条
<!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>
</head>
<style type="text/css">
*{ margin:0px auto; padding:0px;}
#yi{ width:1000px; height:10px; border:1px solid #999; border-radius:5px;}
</style>
<body>
<br /><<br />
<div id="yi">
<div id="er" style="width:0px; height:10px; background-color:#F00; float:left"></div>
</div>
</body>
<script type="text/javascript">
var id;
id=window.setInterval("jindu()",10);
function jindu()
{
var a=document.getElementById("er");
var k=a.style.width;
k=parseInt(k.substr(0,k.length-2))+2;
a.style.width=k+"px";
if(k>=1000)
{
window.clearInterval(id);
}
}
</script>
</html>
7.滚动条事件
<!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>
</head>
<style type="text/css">
*{ margin:0px auto; padding:0px;} </style>
<body>
<div id="yi" style="width:100%; height:30px; background-color:#F00"></div>
<div id="er" style="width:100%; height:60px; background-color:#000"></div>
<div id="sa" style="width:100%; height:800px; background-color:#009"></div>
</body>
<script type="text/javascript">
window.onscroll=function ()
{
var a=document.getElementById("er");
if(window.scrollY>=30)
{
a.style.position="fixed";
a.style.top="0px";
}
else
{
a.style.position="relative";
}
}
</script>
</html>
8.滑动
<!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>
</head>
<style type="text/css"> </style>
<body> <div id="yi" style="width:100px; height:300px; background-color:#F00; float:left"></div>
<div id="er" style="width:1000px; height:300px; background-color:#000; float:left;"> </div>
<div id="sa" style=" width:50px; height:50px; background-color:#CCC; position:relative; top:125px; left:75px; cursor:pointer;" onclick="dianji()"></div>
</body>
<script type="text/javascript">
var id;
function dianji()
{
id=window.setInterval("dong()",10);
} function dong()
{
var a=document.getElementById("yi");
var h=a.style.width;
h=parseInt(h.substr(0,h.length-2))+2;
if(h>=1100)
{
window.clearInterval(id);
return;
}
a.style.width=h+"px";
var b=document.getElementById("er");
var he=b.style.width;
he=parseInt(he.substr(0,he.length-2))-2;
b.style.width=he+"px";
var c=document.getElementById("sa");
var xiao=c.style.left;
xiao=parseInt(xiao.substr(0,xiao.length-2))+2;
c.style.left=xiao+"px";
}
</script>
</html>
JS初学者必备的几个经典案例（一）！！！的更多相关文章
- JS初学者必备的几个经典案例（二）！！！
一.写出当前年份的前后5年的日期表 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " ...
- (zhuan) 资源|TensorFlow初学者必须了解的55个经典案例
资源|TensorFlow初学者必须了解的55个经典案例 2017-05-27 全球人工智能 >>>>>>欢迎投稿:news@top25.cn<<< ...
- js中的经典案例--简易万年历
js中的经典案例--简易万年历 html代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8& ...
- javascript的理解及经典案例
js的简介: JavaScript是一种能让你的网页更加生动活泼的程式语言,也是目前网页中设计中最容易学又最方便的语言. 你可以利用JavaScript轻易的做出亲切的欢迎讯息.漂亮的数字钟.有广告效 ...
- jQuery基础的工厂函数以及定时器的经典案例
1. jQuery的基本信息: 1.1 定义: jQuery是JavaScript的程序库之一,它是JavaScript对象和实用函数的封装, 1.2 作用: 许多使用JavaScript能实现的交 ...
- Linux运维之道（大量经典案例、问题分析，运维案头书，红帽推荐）
Linux运维之道(大量经典案例.问题分析,运维案头书,红帽推荐) 丁明一 编 ISBN 978-7-121-21877-4 2014年1月出版 定价:69.00元 448页 16开 编辑推荐 1 ...
- HTML5 CSS3 经典案例：无插件拖拽上传图片 （支持预览与批量） （二）
转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/31513065 上一篇已经实现了这个项目的整体的HTML和CSS: HTML5 C ...
- python经典案例
前言:初学者对python的流程语句有一定的了解,但是运用起来总会磕磕碰碰.本文总结了一些初学者在学习python时做的经典案例 一.名片管理系统(限单个名片) info = {'name':'jam ...
- 汇总java生态圈常用技术框架、开源中间件，系统架构及经典案例等
转自:http://www.51testing.com/html/83/n-3718883.html 有人认为编程是一门技术活,要有一定的天赋,非天资聪慧者不能及也.非也,这是近几年,对于技术这碗饭有 ...
随机推荐
- CI框架分页类代码
model层 ; $page = $); ; }else{ $start = $page; } $data['results'] = $ ...
- poj 1811 大数分解
模板 #include<stdio.h> #include<string.h> #include<stdlib.h> #include<time.h> ...
- Harris角点
1. 不同类型的角点 在现实世界中,角点对应于物体的拐角,道路的十字路口.丁字路口等.从图像分析的角度来定义角点可以有以下两种定义: 角点可以是两个边缘的角点: 角点是邻域内具有两个主方向的特征点: ...
- loj 1300( 边双联通 + 判奇圈 ）
题目链接:http://acm.hust.edu.cn/vjudge/problem/viewProblem.action?id=27010 思路:首先Tarjan标记桥,然后对于dfs遍历整个图,我 ...
- ASP.NET获取客户端IP/用户名等信息
1. 在ASP.NET中专用属性: 获取服务器电脑名:Page.Server.ManchineName 获取用户信息:Page.User 获取客户端电脑名:Page.Request.UserHostN ...
- LightOJ1051 Good or Bad（DP）
这题感觉做法应该挺多吧,数据规模那么小. 我用DP乱搞了.. dp0[i][j]表示字符串前i位能否组成末尾有连续j个元音字母 dp1[i][j]表示字符串前i位能否组成末尾有连续j个辅音字母 我的转 ...
- Visual Studio 2013 EF5实体数据模型 EDMX 使用 T4模板生成后使用 ObjectContext对象
Visual Studio 2013 EF5实体数据模型 EDMX 使用 T4模板生成后的继承对象为DbContext,以前的熟悉的ObjectContext对象不见了,当然使用ObjectConte ...
- CodeForces Round 197 Div2
这次出的题水爆了,借着这个机会终于把CF的号变蓝了.A. Helpful Mathstime limit per test2 secondsmemory limit per test256 megab ...
- BZOJ1105 : [POI2007]石头花园SKA
考虑把所有石头翻到直线y=x同侧,此时可以保证篱笆长度最短. 这种最短的篱笆一共有4种可能,枚举每种可能然后$O(n)$检验求出答案即可. #include<cstdio> const i ...
- No FileSystem for scheme: 远程访问HDFS找不到shceme
问题描述: hadoop版本:hadoop-2.0.0-cdh4.3.0 在本地环境下能够找到scheme,但是通过maven打包fatjar 后放到其他机器上就出现找不到scheme. 看了代码,发 ...