V形
<!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
for( var i=0;i<5;i++ )
{
if( i<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:'+((5-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>
最新文章
- 6-1 bash脚本编程之四 整数测试及特殊变量
- NetApp 监控
- Discuz 网站移至 Ubuntu 14.04.4 LTS VPS 配置
- java -cp
- ADF_Controller系列4_通过创建ADF Menu作为页面向导(Part2)
- Java再学习——Executor,ExecutorService,ScheduledExecutorService与Executors
- winform学习日志(十九)----------真正三层架构之登录
- mysql笔记之集群
- Visual studio code离线安装插件
- localeCompare() 方法实现中文的拼音排序
- Redis常用命令【字符串】
- JavaEE学习之JAXB
- pytest 2.测试用例setup和teardown
- 爬虫之PyQuery
- python的pickle和shelve模块
- DEFINE_PER_CPU,如何实现“数组”
- 用Jquery去写树结构
- JSON解析工具——Jackson的简单使用
- Win10新建文件不自动刷新
- 从U盘安装linux(前人踩坑后人乘凉)
热门文章
- muduo buffer类的设计与使用
- golang 跨平台编译——go 在windows上编译Linux平台的程序(Cross Compilation from Windows to Linux/Ubuntu)
- C#如何使用右下角托盘图标notifyIcon
- 用yarn替代npm
- ubuntu11.04 编译ffmpeg2.7 并生成 ffplay进行流媒体測试
- 使用requireJS的shim參数,完毕jquery插件的载入
- TableLayout与MigLayout
- POJ 2080:Calendar
- 类型配置命名空间 —— XML schema
- 第九周 Leetcode 502. IPO (HARD)