zoukankan      html  css  js  c++  java
  • v形 加强版

    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>无标题文档</title>
    </head>
    <style>
    #div1{position:relative;}
    #div1 div{50px;height:50px;background:blue;color:#fff;font-size:20px;text-align:center;line-height:50px;position:absolute;}
    </style>
    <script>
    window.onload = function()
    {

    var oTxt = document.getElementById('txt1');
    var oBtn = document.getElementById('btn1');
    var oDiv = document.getElementById('div1');

    oBtn.onclick = function()
    {
    //0 0*50
    //1 1*50
    //2 2*50
    //3 1*50
    //4 0*50

    //( oTxt.value + 2 );//从页面当中获取的任何数据都是一个字符串类型的 string

    //alert( typeof 222 );

    //
    oDiv.innerHTML = '';

    var num = parseInt( oTxt.value );

    if( num%2==0 )
    {
    alert( '请输入一个奇数' );
    }
    else
    {
    for( var i=0;i<num;i++ )
    {
    if( i<(num-1)/2 )
    {
    oDiv.innerHTML +='<div style="left:'+(i*50)+'px;top:'+(i*50)+'px;">'+i+'</div>';
    }
    else
    {
    oDiv.innerHTML +='<div style="left:'+(i*50)+'px;top:'+((num-1-i)*50)+'px;">'+i+'</div>';
    };
    };
    };


    };

    };
    </script>

    <body>
    <input type="text" value="" id="txt1"> <input type="button" id="btn1" value="按钮">

    <div id="div1">

    </div>


    </body>
    </html>

  • 相关阅读:
    三周#学习进度总结
    四则运算(修改版)
    是否需要有代码规范?
    结对项目:代码复审+PSP
    二周#学习进度总结
    GitHub注册流程(中英对比)
    四则运算:我的设计和设想(未完成版)
    Spring4总结
    Hibernate5总结
    Struts2总结
  • 原文地址:https://www.cnblogs.com/gyc51/p/8329655.html
Copyright © 2011-2022 走看看