<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>作业</title>

        <style type="text/css">

            *{

                margin: 0 auto;

                padding: 0;

            }

            #tc{

                width: 100px;

                height: 30px;

            }

            #taozi{

                width:100px;

                height: 70px;

                border: 1px solid transparent;

                text-align: center;

                line-height: 70px;

            }

            #taozi1{

                width: 150px;

                height: 70px;

                border: 1px solid transparent;

                text-align: center;

                line-height: 70px;

            }

            #xsys{

                width: 150px;

                height: 70px;

                background-color: cornflowerblue;

                color: white;

                border-radius: 10px;

                text-align: center;

                line-height: 70px;

                display: none;

            }

            .three{

                width: 1000px;

                height: 30px;

                color: blue;

                transition: 2s;

            }

            .four{

                width: 700px;

                height: 300px;

                color: white;

                background-color: red;

                transition: 2s;

            }

            #waiceng{

                width: 1350px;

                background-color: lightblue;

                overflow: hidden;

            }

            .neiceng{

                width: 1000px;

                height: 100px;

                background-color: white;

                margin-top: 30px;

                box-shadow: 1px 5px gray;

                border: 1px solid lightgray;

            }

            #wangyehuanfu{

                width: 300px;

                height: 50px;

            }

            #yangshi1{

                width: 76px;

                height: 45px;

                color: white;

                background-color: blue;

                text-align: center;

                line-height: 45px;

                float: left;

                border-radius: 15px;

            }

            #yangshi2{

                width: 76px;

                height: 45px;

                color: white;

                background-color: blue;

                text-align: center;

                line-height: 45px;

                float: left;

                margin-left: 30px;

                border-radius: 15px;

            }

            #topan{

                border-radius: 15px;

                width: 76px;

                height: 45px;

                color: white;

                background-color: blue;

                text-align: center;

                line-height: 45px;

            }

            #bottoman{

                border-radius: 15px;

                width: 76px;

                height: 45px;

                color: white;

                background-color: green;

                text-align: center;

                line-height: 45px;

                display: none;

            }

            .anceng{

                width: 800px;

                height: 100px;

                border-right: 5px solid darkcyan;

                position: absolute;

                margin: 0 0;

                z-index: -1;

            }

            .mingceng{

                width: 800px;

                height: 100px;

                position: absolute;

                margin: 0 0;

                z-index: 1;

            }

            .ganceng{

                width: 1000px;

                height: 100px;

                position: absolute;

                box-shadow: 0px 10px darkgray;

                margin: 0 0;

                z-index: -1;

            }

         </style>

</head>

     <body>

         <div id="waiceng">

     <div class="neiceng">

         1 说明事件

       <div id="tc" onclick="tanchu()">

                      按钮

        </div>

        </div>

        <div class="neiceng">

            2 鼠标移入下面显示按钮

        <div id="taozi"onmousemove="xianshi()" onmouseout="xiaoshi()">

        <div id="taozi1"><input type="button" value="&nbsp &nbsp"/>鼠标经过显示按钮</div>

        <div id="xsys" >

                 按钮

        </div>

        </div>

        </div>

        <div class="neiceng" style="height:300px ;">

            <div class="three" onmousemove="zg()" onmouseout="ka()">3 鼠标经过变窄变高，移出再恢复</div>

        </div>

        <div class="neiceng">

            <div class="mingceng" onmouseover="cxac()" >

                4 鼠标经过就弹出层（函数、变量）

            </div>

            <div class="anceng" onmouseout="cxmc()">

                4 鼠标经过就弹出层（函数、变量）

            </div>

        </div>

        <div class="neiceng">

            <div class="mingceng"  onclick="dtc1()">

                5 鼠标点击就弹出层（函数、变量、判断）

            </div>

            <div class="ganceng"  onclick="dtc2()" >

                5 鼠标点击就弹出层（函数、变量、判断）

            </div>

        </div>

        <div class="neiceng">

        6 网页换肤

        <div id="wangyehuanfu">

            <div id="yangshi1" onclick="ys1()">样式1</div>

            <div id="yangshi2" onclick="ys2()">样式2</div>

        </div>

        </div>

        <div class="neiceng">

        7 显示隐藏

         <div id="topan" onclick="xsyc()">显示隐藏</div>

         <div id="bottoman">显示隐藏</div>

         </div>

    </div>

    </body>

</html>

<script type="text/javascript">

    window.onload=function(){

    }

    function tanchu(){

        alert("弹出窗口");

    }

    function xianshi(){

        document.getElementById("xsys").style.display = "block";

        document.getElementById("taozi1").style.display="none";

    }

    function xiaoshi(){

        document.getElementById("xsys").style.display = "none";

        document.getElementById("taozi1").style.display="block";

    }

    function zg(){

        var zg = document.getElementsByClassName("three");

        zg[0].className = "four";

    }

    function ka(){

        var ka = document.getElementsByClassName("four");

        ka[0].className = "three";

    }

    function ys1(){

        document.getElementById("waiceng").style.backgroundColor = "yellowgreen"

    }

    function ys2(){

        document.getElementById("waiceng").style.backgroundColor = "grey"

    }

    function xsyc(){

          if(document.getElementById("bottoman").style.display == "none"){

              document.getElementById("bottoman").style.display = "block"

          }else{

              document.getElementById("bottoman").style.display = "none"

          }

    }

    function cxac(){

        document.getElementsByClassName("anceng")[0].style.zIndex = "10"

        document.getElementsByClassName("mingceng")[0].style.zIndex = "-1"

    }

    function cxmc(){

        document.getElementsByClassName("anceng")[0].style.zIndex = "-1"

        document.getElementsByClassName("mingceng")[0].style.zIndex = "10"

    }

    function dtc1(){

        document.getElementsByClassName("ganceng")[0].style.zIndex = "10"

        document.getElementsByClassName("mingceng")[1].style.zIndex = "-1"

    }

    function dtc2(){

        document.getElementsByClassName("ganceng")[0].style.zIndex = "-1"

        document.getElementsByClassName("mingceng")[1].style.zIndex = "10"

    }

</script>

JS 作业的更多相关文章

  1. js作业

    1.一张纸的厚度是0.0001米,将纸对折,对折多少次厚度超过珠峰高度8848米var sum=0;i=0;a=0.0001;for(i=0;i<100;i++){ a=a*2; sum=sum ...

  2. Javascript作业—取字符串的第一个只出现一次的字母

    js作业 取字符串第一个只出现一次的字母 <script type='text/javascript'> //取a-z字符串中第一个只出现一次的字母 function firstUniqu ...

  3. 用JavaScript输出表格

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...

  4. Python之路【第十二篇续】jQuery案例详解

    jQuery 1.jQuery和JS和HTML的关系 首先了HTML是实际展示在用户面前的用户可以直接体验到的,JS是操作HTML的他能改变HTML实际展示给用户的效果! 首先了解JS是一门语言,他是 ...

  5. javaScript额外笔记

    --------------------------------------------------------Part 1javascript:脚本语言辅助开发:网页的前台开发三大块:1.HTML ...

  6. CSS基础问题

    1.css引入问题 本来以为css引入是很简单的问题,但是在写demo中,使用连接方式引入就出现了问题,找了半天,还是说一下问题吧. 在引入时没有写rel="stylesheet" ...

  7. 分享：计算机图形学期末作业！！利用WebGL的第三方库three.js写一个简单的网页版“我的世界小游戏”

    这几天一直在忙着期末考试,所以一直没有更新我的博客,今天刚把我的期末作业完成了,心情澎湃,所以晚上不管怎么样,我也要写一篇博客纪念一下我上课都没有听,还是通过强大的度娘完成了我的作业的经历.(当然作业 ...

  8. kettle作业中的js如何写日志文件

    在kettle作业中JavaScript脚本有时候也扮演非常重要的角色,此时我们希望有一些日志记录.下面是job中JavaScript记录日志的方式. job的js写日志的方法. 得到日志输出实例 o ...

  9. 树莓派.使用Node.js来制作一个作业检查仪

    先上图 前段时间, 花了点时间给女儿做了个数学习题的小程序 首页 做题界面(题目每次都随机生成, 加减乘除都有) 做题记录 现在问题来了, 怎么才能随时知道作业有没有完成呢? 每次打开做题记录页面刷新 ...

随机推荐

  1. Java设计模式之 — 适配器(Adapter)

    转载请注明出处:http://blog.csdn.net/guolin_blog/article/details/9400141 今天一大早,你的leader就匆匆忙忙跑过来找到你:“快,快,紧急任务 ...

  2. orcale 多表连接

    多表连接:

  3. 解读grub.conf文件

    我们将来看看grub.conf文件内语句,(注:...)内的东西是我们的解读内容. # grub.conf generated by anaconda # # Note that you do not ...

  4. 【ACM】nyoj_540_奇怪的排序_201308050951

    奇怪的排序时间限制:1000 ms  |  内存限制:65535 KB 难度:1描述 最近,Dr. Kong 新设计一个机器人Bill.这台机器人很聪明,会做许多事情.惟独对自然数的理解与人类不一样, ...

  5. uva：10763 - Foreign Exchange（排序）

    题目:10763 - Foreign Exchange 题目大意:给出每一个同学想要的交换坐标 a, b 代表这位同学在位置a希望能和b位置的同学交换.要求每一位同学都能找到和他交换的交换生. 解题思 ...

  6. jQuery中的closest()和parents()的差别

    jQuery中的closest()和parents()的差别 jQuery中closest()和parents()的作用非常类似,都是向上寻找符合选择器条件的元素,可是他们之间有一些细微的差别,官网也 ...

  7. HDU 5355 Cake

    HDU 5355 Cake 更新后的代码: 今天又一次做这道题的时候想了非常多种思路 最后最终想出了自觉得完美的思路,结果却超时 真的是感觉自己没救了 最后加了记忆化搜索,AC了 好了先说下思路吧.不 ...

  8. JS禁用微信复制链接、禁用转发

    $(function () { function onBridgeReady() { WeixinJSBridge.call('hideOptionMenu'); } if (typeof Weixi ...

  9. Linux命令（十一）——Shell程序设计二（循环控制语句）

    1.if语句 (1)两路分支的if语句 (2)多路条件判断分支的if语句 2.测试语句 (1)文件测试 (2)字符串测试 (3)数值测试 (4)用逻辑操作符进行组合的测试语句 3.case语句 4.f ...

  10. ASIHTTPRequest框架的简单使用

    ASIHttpRequest是一款及其强劲的HTTP訪问开源项目.让简单的API完毕复杂的功能,如:异步请求,队列请求,GZIP压缩.缓存,断点续传,进度跟踪,上传文件.HTTP认证.在新版本号中,还 ...