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 有人认为编程是一门技术活,要有一定的天赋,非天资聪慧者不能及也.非也,这是近几年,对于技术这碗饭有 ...
随机推荐
- phpcmsv9 幻灯片管理模块_UTF8
幻灯片管理模块简介: .可创建多个位置,一个网站多个幻灯处调用互不影响. .独立模块,不修改系统内核,不用担心升级问题. .标签调用灵活. 安装: .复制本目录下面的phpcms目录到你的V9根目录下 ...
- 我对序列化（Serializable）的理解
转自:http://blog.tianya.cn/blogger/post_show.asp?BlogID=764&PostID=3231409 序列化是把一个对象的状态写入一个字节流的过程. ...
- 安装完最小化 RHEL/CentOS 7 后需要做的 30 件事情（二）转载自码农网
7. 安装 PHP PHP 是用于 web 基础服务的服务器端脚本语言.它也经常被用作通用编程语言.在最小化安装的 CentOS 中安装 PHP: # yum install php 安装完 php ...
- Mosquitto关于Connection lost的问题。
文章发自:http://www.cnblogs.com/hark0623/p/4175048.html 转发请注明 如果当你的客户端订阅(sub)mqtt时,发现出现Connection lost ...
- Android 编程下的 Secret Code
我们很多人应该都做过这样的操作,打开拨号键盘输入 *#*#4636#*#* 等字符就会弹出一个界面显示手机相关的一些信息,这个功能在 Android 中被称为 Android Secret Code, ...
- ural 1431. Diplomas
1431. Diplomas Time limit: 1.0 secondMemory limit: 64 MB It might be interesting for you to learn th ...
- extjs 2.0获取选中的radio的值
var temp=winFormPanel.getForm().findField('selectedType').getGroupValue();
- BZOJ3290 : Theresa与数据结构
CANCEL操作可以看作删点,X坐标可以离散化 将询问按Z坐标差分,转化成两个求Z<=某个数的和的询问 将操作CDQ分治 每次将前一半的修改.后一半的查询按照Z坐标排序 然后扫描线,每到一个询问 ...
- try {}里有一个return语句，那么紧跟在这个try后的finally {}里的code会不会被执行，什么时候被执行，还是在return之后执行？
这是一个很有趣的问题,我测试的结果是:是在return中间执行. 我在网上搜寻了一些资料,下面是参考代码: /** * */ package com.b510.test; /** * try {}里有 ...
- Genymotion填坑之路
Genymotion是一款android的模拟器,之前用的一台电脑直接装上就可以用,后来换了一台机器,一直报获取不到IP,后来网上各种找方法,偶然发现网上说的是硬件问题: 在BIOS中将CPU的vir ...