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 有人认为编程是一门技术活,要有一定的天赋,非天资聪慧者不能及也.非也,这是近几年,对于技术这碗饭有 ...
随机推荐
- ActiveMQ Exception: java.io.EOFException: Chunk stream does not exist
解决办法: 方法1. 去掉延迟功能:<broker xmlns="http://activemq.apache.org/schema/core " brokerName=&q ...
- android获取string.xml的值（转）
为什么需要把应用中出现的文字单独存放在string.xml文件中呢? 一:是为了国际化,当需要国际化时,只需要再提供一个string.xml文件,把里面的汉子信息都修改为对应的语言(如,English ...
- CC2540开发板学习笔记（二）——按键
一.实验内容 用按键S1控制LED1的亮和灭 二.实验过程 1.电路原理: 可以看出,当S按下P0.0和P0.1接地,反之则接高电压. 2.寄存器使用: 依旧应该首先进行3个基本寄存器的设定,对LED ...
- linux中的staff和wheel
linux中的staff和wheel wheel组就类似于一个管理员的组通常在UNIX下,即使我们是系统的管理员,也不推荐用root用户登录来进行系统管理.一般情况下 用普通用户登录,在需要root权 ...
- js上传和预览图片
[1].[代码] [HTML]代码 跳至 [1] <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ...
- Redis Set 命令
1.Set set是string类型的无序集合,其参考来源应该属于STL中的Set. •set元素最大可以包含(2的32次方-1)个元素. •set的是通过hash table实现的,ha ...
- 2015ACM/ICPC亚洲区长春站 A hdu 5527 Too Rich
Too Rich Time Limit: 6000/3000 MS (Java/Others) Memory Limit: 262144/262144 K (Java/Others)Total ...
- 今年暑假不AC[HDU2037]
今年暑假不AC Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others)Total Sub ...
- python 中chr()，unichr()，ord()的用法
chr()根据整数返回对应的字符,也就是讲ascii转换为字符 unichr()将整数返回成unicode字符 ord()将字符转换成ascii码
- topcoder SRM 592 DIV2 LittleElephantAndPermutationDiv2
#include <iostream> #include <vector> #include <algorithm> #include <iterator&g ...