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 有人认为编程是一门技术活,要有一定的天赋,非天资聪慧者不能及也.非也,这是近几年,对于技术这碗饭有 ...
随机推荐
- 如何在多模型的情况下进行EF6的结构迁移
所谓多模型就是在一个数据库中包含两个不同模型,或者换句话说就是两个不同DbContext的数据都放到同一个数据库中.这里的多模型不是指多租户的数据库(有谁知道EF很好处理多租户数据库的方案,可以联系我 ...
- 【xml 报错】xml编译错误
---恢复内容开始--- 有时候在xml文件中,特别是于Spring相关的配置文件中,会出现一些不影响程序正常运行的编译错误,如: Referenced file contains errors (h ...
- 史上最全JS表单验证封装类
转自:http://www.cnblogs.com/linjiqin/p/3429919.html /************************************************* ...
- wait、notify、notifyAll和Condition
wait().notify()和notifyAll()是基于synchronized Condition是基于Lock的. Condition是在java 1.5中才出现的,它用来替代传统的Objec ...
- WireShark数据包分析数据封装
WireShark数据包分析数据封装 数据封装(Data Encapsulation)是指将协议数据单元(PDU)封装在一组协议头和尾中的过程.在OSI七层参考模型中,每层主要负责与其它机器上的对等层 ...
- 简单几何(圆与多边形公共面积) UVALive 7072 Signal Interference (14广州D)
题目传送门 题意:一个多边形,A点和B点,满足PB <= k * PA的P的范围与多边形的公共面积. 分析:这是个阿波罗尼斯圆.既然是圆,那么设圆的一般方程:(x + D/2) ^ 2 + (y ...
- POJ3252 Round Numbers（不重复全排列）
题目问区间有多少个数字的二进制0的个数大于等于1的个数. 用数学方法求出0到n区间的合法个数,然后用类似数位DP的统计思想. 我大概是这么求的,确定前缀的0和1,然后后面就是若干个0和若干个1的不重复 ...
- Color the Ball[HDU1199]
Color the Ball Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others)To ...
- BZOJ3560 : DZY Loves Math V
因为欧拉函数是非完全积性函数,所以可以考虑对每个数进行分解质因数,将每个质数的解乘起来即可. 对于一个质数$p$,设它在各个数中分别出现了$b_1,b_2,...b_n$次,那么由生成函数和欧拉函数的 ...
- BZOJ4347 : [POI2016]Nim z utrudnieniem
将石子从小到大排序,然后DP. 设$f[i][j][k]$表示考虑了前$i$堆的石子,当前扔掉的堆数模$d$为$j$,没有扔掉的石子的异或和为$k$的方案数. 因为石子排过序,所以转移的复杂度为$O( ...