• JS无聊之作


    代码
    <!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>

    <script>

    var handleUp;
    var handleDown;
    function changeUp()
    {
        var div    = document.getElementById('div1');
        
                if(parseInt(div.style.height)<=200)
            {            
             div.style.height    =(parseInt(div.style.height)+8).toString()+'px';
             div.style.width    =(parseInt(div.style.width)+8).toString()+'px';        
            }
                else if(parseInt(div.style.height)>200)
            {      
            clearInterval(handleUp);
            showDown();
            }
            changeColor();    

    }
    function changeDown()
    {
        var div    = document.getElementById('div1');            
        div.style.height    =(parseInt(div.style.height)-8).toString()+'px';
        div.style.width    =(parseInt(div.style.width)-8).toString()+'px';    
            
           if(parseInt(div.style.height)==0)
       {
           clearInterval(handleDown);
           showUp();
       }
           changeColor();    
    }

    function showUp()
    {
    handleUp    =setInterval("changeUp()",20);
    var div    = document.getElementById('div1');
    }

    function showDown()
    {
    handleDown    =setInterval("changeDown()",20);
    }

    function changeColor()
    {
        var div    = document.getElementById('div1');
        var width    =parseInt(div.style.height,10);
            if(width>=0&&width<=9)
        {
            div.style.backgroundColor    ='#C0C0C0';
        }
            else if(width>=10&&width<=19)
        {
            div.style.backgroundColor    ='lavender';
        }
            else if(width>=20&&width<=29)
        {
            div.style.backgroundColor    ='plum';
        }
            else if(width>=30&&width<=39)
        {
            div.style.backgroundColor    ='highlight';
        }
            else if(width>=40&&width<=49)
        {
            div.style.backgroundColor    ='goldenrod';
        }
            else if(width>=50&&width<=59)
        {
            div.style.backgroundColor    ='Fuchsia';
        }
            else if(width>=60&&width<=69)
        {
            div.style.backgroundColor    ='slategray';
        }
            else if(width>=70&&width<=99)
        {
            div.style.backgroundColor    ='#9999FF';
        }
            else if(width>=100&&width<=139)
        {
            div.style.backgroundColor    ='#003333';
        }
            else if(width>=140&&width<=159)
        {
            div.style.backgroundColor    ='tomato';
        }
            else if(width>=160&&width<=179)
        {
            div.style.backgroundColor    ='deepskyblue';
        }
            else if(width>=180&&width<=210)
        {
            div.style.backgroundColor    ='hotpink';
        }
    }
    </script>
    </head>

    <body>
    <input  type="button" onclick="showUp();this.disabled='disabled'"  value="click me!"/><br />
    <div id="div1" style="margin-left:auto; margin-right:auto; 0px; height:0px;"></div>

    </body>
    </html>
  • 相关阅读:
    winform 单选框， 图像控件，图像列表，状态栏，定时器，绘图
    学习资料链接，csdn博客
    c# 基本控件，窗口程序
    Gmap.net 怎么导入离线地图
    修改MFC主窗口界面标题和图标的方法
    vc6.0缓冲区
    vc6.0编译出错，删除多余的文件，清空重新编译
    Tomcat插件与Jetty插件在MyEclipse中的配置
    div里面的内容超出自身高度时，显示省略号
    aptana studio 3 自动换行（无需插件）
  • 原文地址：https://www.cnblogs.com/qixuejia/p/1829465.html
Copyright © 2020-2023  润新知