<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
</head>
<style>
#div1{position:relative;}
#div1 div{width: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>

最新文章

  1. .Net程序员之Python基础教程学习----字符串的使用 [Second Day]
  2. 使用IOS7原生API进行二维码条形码的扫描
  3. 在unity5中减少Draw Calls(SetPass Calls)[转]
  4. July 11th, Week 29th Monday, 2016
  5. Java&amp;MySQL Type Mapping
  6. ASP.NET Identity 系列笔记目录
  7. [ Android 五种数据存储方式之三 ] —— SQLite存储数据
  8. 201521123074 《Java程序设计》第10周学习总结
  9. 深入java虚拟机学习 -- 内存管理机制
  10. 第三节:框架前期准备篇之利用Newtonsoft.Json改造MVC默认的JsonResult
  11. layui select配合input实现动态模糊搜索
  12. javaMail实现收发邮件(二)
  13. jzoj4229
  14. html5 canvas路径绘制2
  15. Arraylist静态初始化
  16. Think in Java(二):初始化与清理
  17. HTML-利用CSS和JavaScript制作一个切换图片的网页
  18. Selenium 入门到精通系列:六
  19. java运行环境(JRE)
  20. .net开发CAD2008无法调试的解决方法

热门文章

  1. console command
  2. 背包系统学习笔(tu)记(cao)
  3. springMVC之异常处理
  4. canvas绘图数学知识总结
  5. spring 的核心接口
  6. H264--2--语法及结构[5]
  7. Flask的flask-sqlalchemy
  8. nginx目录列表和目录访问权限设置
  9. 编译Ruby2.0 问题解决
  10. nginx - ubutun下安装nginx(详述编译方法)