<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
#input1{margin-left: 200px;}
#div1{position: relative;top: 100px;margin: 0 200px;}
li{width: 50px; height: 50px; background: red;border: 1px solid beige;
font-size: 25px; text-align: center; line-height: 50px;margin: 0;
list-style-type: none;color: beige;position: absolute;
left: 0;top 100px;
}
</style>
<script type="text/javascript">
window.onload=function(){
var oSpan=document.getElementById('span1');
var oInput=document.getElementById('input1');
var num=0;


oInput.onclick=function(){
num++;
oSpan.innerHTML=''

for(var i=0;i<5;++i){
oSpan.innerHTML+='<li></li>';
}
var aLi=document.getElementsByTagName('li');

if(num==1){
for(var j=0;j<aLi.length;++j){
if(j<(aLi.length/2)){
aLi[j].style.top=-j*50+'px';
aLi[j].innerHTML=j;
aLi[j].style.left=j*50+'px';
}else{
aLi[j].style.top=-(aLi.length-1-j)*50+'px';
aLi[j].innerHTML=j;
aLi[j].style.left=j*50+'px';
}
}
}else if(num==2){
for(var j=0;j<aLi.length;++j){
if(j<(aLi.length/2)){
aLi[j].style.top=j*50+'px';
aLi[j].innerHTML=j;
aLi[j].style.left=j*50+'px';
}else{
aLi[j].style.top=j*50+'px';
aLi[j].innerHTML=j;
aLi[j].style.left=(aLi.length-j-1)*50+'px';
}
}
}else if(num==3){
for(var j=0;j<aLi.length;++j){
if(j<(aLi.length/2)){
aLi[j].style.top=j*50+'px';
aLi[j].innerHTML=j;
aLi[j].style.left=j*50+'px';
}else{
aLi[j].style.top=(aLi.length-j-1)*50+'px';
aLi[j].innerHTML=j;
aLi[j].style.left=j*50+'px';
}
}
}else if(num==4){
num=0;
for(var j=0;j<aLi.length;++j){
if(j<(aLi.length/2)){
aLi[j].style.top=j*50+'px';
aLi[j].innerHTML=j;
aLi[j].style.left=-j*50+'px';
}else{
aLi[j].style.top=j*50+'px';
aLi[j].innerHTML=j;
aLi[j].style.left=-(aLi.length-j-1)*50+'px';
}
}
}
};
};
</script>
</head>
<body>
<input id="input1" type="button" value="按钮"/><br/>
<div id="div1">
<span id="span1"></span>
</div>
</body>
</html>

自动生成V字型的更多相关文章

  1. 原生js，一些小应用（逢10进一，生成V字，多个div抖动）

    第一题:每隔10个div换一行.并且鼠标移入 改变opacity. <!DOCTYPE html> <html lang="en"> <head> ...

  2. JS随机生成100个DIV每10个换行(换色，生成V字和倒V)

    附图 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8& ...

  3. 一个自动生成插入与更新SQL语句的小类

    无需关注字段类型,只要传入字段名与值的集合,自动生成Ms sql server SQL语句.详见Test()方法 using System; namespace Fan.iData.SqlUtilit ...

  4. JAVA自动生成正则表达式工具类

    经过很久的努力,终于完成了JAVA自动生成正则表达式工具类.还记得之前需要正则,老是从网上找吗?找了想修改也不会修改.现在不用再为此烦恼了,使用此生成类轻松搞定所有正则表达式.赶快在同事面前炫一下吧. ...

  5. h5 录音 自动生成proto Js语句 UglifyJS-- 对你的js做了什么 【原码笔记】-- protobuf.js 与 Long.js 【微信开发】-- 发送模板消息 能编程与会编程 vue2入坑随记(二) -- 自定义动态组件 微信上传图片

    得益于前辈的分享,做了一个h5录音的demo.效果图如下: 点击开始录音会先弹出确认框: 首次确认允许后,再次录音不需要再确认,但如果用户点击禁止,则无法录音: 点击发送 将录音内容发送到对话框中.点 ...

  6. 遗传编程（GA，genetic programming）算法初探，以及用遗传编程自动生成符合题解的正则表达式的实践

    1. 遗传编程简介 0x1:什么是遗传编程算法,和传统机器学习算法有什么区别 传统上,我们接触的机器学习算法,都是被设计为解决某一个某一类问题的确定性算法.对于这些机器学习算法来说,唯一的灵活性体现在 ...

  7. 使用python自动生成docker nginx反向代理配置

    由于在测试环境上用docker部署了多个应用,而且他们的端口有的相同,有的又不相同,数量也比较多,在使用jenkins发版本的时候,不好配置,于是想要写一个脚本,能在docker 容器创建.停止的时候 ...

  8. JavaScript自动生成博文目录导航

    转载于:JavaScript自动生成博文目录导航 我们在写博客的时候,如果博文里面有目录,会给人结构清晰.一种一目了然的感觉,看目录就知道这篇博文要讲解的内容,并且点击目录标题就可以跳转到 具体的内容 ...

  9. mybatis generator maven插件自动生成代码

    如果你正为无聊Dao代码的编写感到苦恼,如果你正为怕一个单词拼错导致Dao操作失败而感到苦恼,那么就可以考虑一些Mybatis generator这个差价,它会帮我们自动生成代码,类似于Hiberna ...

随机推荐

  1. SpringBoot源码解析：tomcat启动分析

    >> spring与tomcat的启动分析:war包形式 tomcat:xml加载规范 1.contex-param: 初始化参数 2.listener-class: contextloa ...

  2. C#之字符串篇

    大杂烩 一.类型转换    字符串转整形: int a = int.Parse(""); //不能转换null int b = Convert.ToInt32("&quo ...

  3. R语言排序:sort()，rank()，order()示例

    > x<-c(97,93,85,74,32,100,99,67) > sort(x) [1] 32 67 74 85 93 97 99 100 > order(x) [1] 5 ...

  4. php无刷新上传图片和文件

    核心思想:通过Html的iframe标签属性操作顶级窗口,再用php动态无刷新上传图片文件. 示例如下: demo |------uploads #存放上传的文件 |------index.php | ...

  5. 百度编辑器 ueditor 内容编辑自动套P标签，及p标签 替换

    如图,红框为回车键和shift+回车 :    ===>>  ueditor.all.js中: 1: 搜索修改成false:allowDivTransToP: false 再搜索并修改以下 ...

  6. 【转载】使用Pandas创建数据透视表

    使用Pandas创建数据透视表 本文转载自:蓝鲸的网站分析笔记 原文链接:使用Pandas创建数据透视表 目录 pandas.pivot_table() 创建简单的数据透视表 增加一个行维度(inde ...

  7. URL、URN、URI的区别？

    URL.URN.URI区别 既然Web应用程序的文件等资源是放在服务器上,而服务器是因特网(Internet)上的主机,当然必须要有个方法,告诉浏览器到哪里取得文件等资源.通常会听到有人这么说:“你要 ...

  8. Windows7 + Ubuntu双系统安装过程记录

    本文为在已安装Windows7系统的前提下安装Ubuntu Kylin 14.10系统的过程以及期间出现的各种问题的记录. Ubuntu系统下载 Ubuntu Kylin中文官方网站:http://w ...

  9. mysql 最大连接数 & 连接池

    MySQL最大连接数 关于最大连接数:http://mg123.lofter.com/post/1a5f3e_996f838 可以通过修改配置文件(默认/etc/my.cnf)中的"mysq ...

  10. redis 快速入门(win7)

    0:介绍 百度百科or官网 1:下载  选择32位或者64 地址:https://github.com/dmajkic/redis/downloads 1.1下载后如图 1.2文件介绍 redis-s ...