zoukankan      html  css  js  c++  java
  • 变化的盒子

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>金字塔</title>
    <style type="text/css">
    button{
    margin: 50px 50px 0px 50px;
    background-color: pink;
    150px;
    height: 50px;
    border-color: yellow;
    font-size: 25px;
    }
    div{
    margin: 10px 50px 0px 50px;
    150px;
    text-align: center;
    }
    div h3{
    height: 150px;
    150px;
    line-height: 150px;
    border-radius: 75px;
    background-color: pink;
    color: red;
    }
    .circle{
    box-shadow:10px 10px 10px gray
    outline:none
    }
    </style>
    <script type="text/javascript">

    window.onload=function(){
    function $ (id) {
    return document.getElementById(id);
    }
    $('btn').onclick=function(){

    if ($('btn').innerHTML=="我变") {
    $('bordet').innerHTML="<h3>看我变</h3><h3>再看我变</h3><h3>变完了</h3>";
    $('btn').innerHTML="返回";
    $('btn').style.className= "circle";
    $('btn').style.outline = "none";
    }else{
    $('bordet').innerHTML="<h3>看我72变</h3>";
    $('btn').innerHTML="我变";
    $('btn').style.borderColor = "red";
    $('btn').style.borderWidth = "10px";
    $('btn').style.outline = "none";
    }

    }

    }


    </script>
    </head>

    <body>

    <button id="btn">我变</button>
    <div id="bordet"><h3>看我72变</h3></div>
    <button>11</button>

    </body>
    </html>

  • 相关阅读:
    oracle保留小数,例如0.00
    线程池读取List<T>实例
    Linq XML
    C# 反射 表达式树 模糊搜索
    MVC权限模块
    .NET-提取字符串实践总结
    2014,码农梦想,先从态度开始!
    Biztalk开发系列之二. (AS2配置)
    测试2
    Biztalk Http 适配器使用.开发系列(一)
  • 原文地址:https://www.cnblogs.com/future-zmy/p/6013912.html
Copyright © 2011-2022 走看看