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>
时间： 2024-08-24 14:55:38

JS初学者必备的几个经典案例（一）！！！的相关文章

JS初学者必备的几个经典案例（二）！！！

一.写出当前年份的前后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-eq

网络机器人的识别与攻防的经典案例

本文我们介绍一个网络机器人的识别与攻防的经典案例.使用到的代码见本人的superword项目: https://github.com/ysc/superword/blob/master/src/main/java/org/apdplat/superword/tools/ProxyIp.java 我们的目的是要使用机器人自动获取站点http://ip.qiaodm.com/ 和站点http://proxy.goubanjia.com/ 的免费高速HTTP代理IP和端口号. 不过他们未对机器人进行识

javascript的理解及经典案例

js的简介: JavaScript是一种能让你的网页更加生动活泼的程式语言,也是目前网页中设计中最容易学又最方便的语言. 你可以利用JavaScript轻易的做出亲切的欢迎讯息.漂亮的数字钟.有广告效果的跑马灯及简易的选举,还可以显示浏览器停留的时间.让这些特殊效果提高网页的可观性. javascript现在可以再网页上做很多很多事情,网页特效,操作dom,html5游戏(基于html5和JavaScript的结合),动画等等特效,还可以实现拉去后台数据(通过ajax),不仅可以做前台还可以做后

HTML5 CSS3 经典案例：无插件拖拽上传图片 （支持预览与批量） （二）

转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/31513065 上一篇已经实现了这个项目的整体的HTML和CSS: HTML5 CSS3 经典案例:无插件拖拽上传图片 (支持预览与批量) (一) 这篇博客直接在上篇的基础上完成,最终效果: 效果图1: 效果图2: 好了,请允许我把图片贴了两遍,方便大家看效果了~ 可以看出我们的图片的li的html其实还是挺复杂的,于是我把html文档做了一些修改: <span style=&quo

多线程十大经典案例之一 双线程读写队列数据

本文配套程序下载地址为:http://download.csdn.net/detail/morewindows/5136035 转载请标明出处,原文地址:http://blog.csdn.net/morewindows/article/details/8646902 欢迎关注微博:http://weibo.com/MoreWindows 在<秒杀多线程系列>的前十五篇中介绍多线程的相关概念,多线程同步互斥问题<秒杀多线程第四篇一个经典的多线程同步问题>及解决多线程同步互斥的常用方法

java多线程经典案例

/** * 典型案例:子线程执行10次,主线程执行100次,两者交替50次. */ package cn.itcast.lesson4; public class TestWaitNotify { public static void main(String[] args){ final Business business= new Business(); new Thread( new Runnable() { public void run() { for(int i=1;i<=50;i++

android 布局属性大全---初学者必备

Android功能强大,界面华丽,但是众多的布局属性就害苦了开发者,下面这篇文章结合了网上不少资料,花费本人一个下午搞出来的,希望对其他人有用. 第一类:属性值为true或false android:layout_centerHrizontal 水平居中 android:layout_centerVertical 垂直居中 android:layout_centerInparent 相对于父元素完全居中 android:layout_alignParentBottom 贴紧父元素的下边缘 and

秒杀多线程第十六篇 多线程十大经典案例之一 双线程读写队列数据

版权声明:本文为博主原创文章,未经博主允许不得转载. 目录(?)[+] 本文配套程序下载地址为:http://download.csdn.net/detail/morewindows/5136035 转载请标明出处,原文地址:http://blog.csdn.net/morewindows/article/details/8646902 欢迎关注微博:http://weibo.com/MoreWindows 在<秒杀多线程系列>的前十五篇中介绍多线程的相关概念,多线程同步互斥问题<秒杀多

拍卖行与邮件系统——设计者与开发者协作的经典案例

此文仅代表作者本人观点,如有槽点,欢迎吐槽. 设计者与开发者 设计者与开发者,游戏行业内直白的说法就是策划.美术跟程序.但不管在任何行业,这两者之间的关系都既像战友又像敌人.设计者的想法往往是完美的,而开发者的想法却是实际的,就好像梦想与现实一样.我听说过这样的话:美术设计的效果是100%的话,程序呈现出的效果能达到80%就已经很完美了.这当然不是在黑程序,程序出于某些原因无法完全实现效果(资源尺寸,资源通用性,性能考虑等等),毕竟梦想和现实是有差距的.在此案例中,我们仅讨论策划与程序. 拍卖行