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 有人认为编程是一门技术活,要有一定的天赋,非天资聪慧者不能及也.非也,这是近几年,对于技术这碗饭有 ...
随机推荐
- 【现代程序设计】homework-08
1. 理解C++变量的作用域和生命周期 a) 用少于10行代码演示你对局部变量的生命周期的理解 #include <iostream>int main() { ; ;i<;i++); ...
- 利用PowerDesigner比较2个数据库结构
主要实现思路 建立新旧数据库ODBC 导入原始数据模型 选择并比较对象 .PowerDesigner中可以对2个数据模型进行比较,所以想到用这个功能来实现对比数据库的目的.到底怎样利用PowerDes ...
- zookeeper 4 letter 描述与实践
命令示例描述 Conf echo conf | nc localhost 2181 (New in 3.3.0)输出相关服务配置的详细信息.比如端口.zk数据及日志配置路径.最大连接数,session ...
- IDEA中如何使用Maven进行打包。 IDEA版本是14
说实话,找了好半天的资料,也许是我的IDEA版本太高了网上资料稀缺,所以愣是没有找到打包的方法,只是自己瞎琢磨了,还好搞出来了,记录一下. 说文字说一下大概流程,其实很简单: 创建配置文件->创 ...
- MySQL出现无法删除行记录
今天mysql在删除一张InnoDB类型的表时,出现错误Error No. 1451 MYSQL: Cannot delete or update a parent row: a foreign ke ...
- js:语言精髓笔记5----语言分类
计算模型:源于对计算过程的不同认识: 1.基于不同计算模型一般分为://教科书的一般分类 命令式语言: 函数式语言: 逻辑式语言: 面向对象程序设计语言: 2.基于程序本质分类: //编程的经典法则 ...
- c# 使用正则表达式 提取章节小说正文全本篇
这一节主要内容是使用正则表达式提取网站的正文,主要面向于小说章节网站.其中涉及到一些其他知识点,比如异步读取.异步流写入等,代码中都会有详细的注解.现在流行的网络文学都是每日一更或几更,没有一个统一的 ...
- mysql的常用函数
原文地址参考:http://www.cnblogs.com/ringwang/archive/2008/07/05/1236292.html 1. 控制流函数 1.1 IFNULL(expr1,ex ...
- 关于用了SSH连接之后，但是Chrome中访问stackoverflow超慢的原因
FQ条件如下: SSH + Chrome + ProxySwitchySharp 其中ProxySwitchySharp已经设置了通配符: 但是打开 www.stackoverflow.com还是奇慢 ...
- Revit二次开发示例：EventsMonitor
在该示例中,插件在Revit启动时弹出事件监控选择界面,供用户设置,也可在添加的Ribbon界面完成设置.当Revit进行相应操作时,弹出窗体会记录事件时间和名称. #region Namespace ...