<!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. RabbitMQ 声明Queue时的参数们的Power

    参数们的Power 在声明队列的时候会有很多的参数 public static QueueDeclareOk QueueDeclare(this IModel model, string queue ...

  2. elk系列4之kibana图形化操作

    preface 我们都搭建了ELK系统,且日志也能够正常收集的时候,那么就配置下kibana.我们可以通过kibana配置柱状图,趋势图,统计图,圆饼图等等各类图.下面就拿配置统计图和柱状图为例,结合 ...

  3. Python Day8

    Socket Socket是网络编程的一个抽象概念.通常我们用一个Socket表示"打开了一个网络链接",而打开一个Socket需要知道目标计算机的IP地址和端口号,再指定协议类型 ...

  4. J2EE学习路线图

    一:J2SE 面向对象-封装.继承.多态 内存的分析 递归 集合类.泛型.自动打包与解包.Annotation IO 多线程.线程同步 TCP/UDP AWT.事件模型.匿名类 正则表达式 反射机制 ...

  5. nginx 和 IIS 实现负载均衡

    Nginx的作用和优点,这里不必多说,今天主要是nginx负载均衡实验,把做的步骤记录下来,作为一个学习笔记吧,也可以给大家做下参考. 1.Nginx安装 1.下载地址:http://nginx.or ...

  6. Hive时间操作[转]

    时间字段格式化 from_unixtime(unix_timestamp(VisitTime),'yyyy-MM-dd') 日期函数UNIX时间戳转日期函数: from_unixtime语法:   f ...

  7. todoList使用教程

    网页链接:http://www.cnblogs.com/sunada2005/articles/2663030.html

  8. php 去掉字符串的最后一个字符

    原字符串1,2,3,4,5,6, 去掉最后一个字符",",最终结果为1,2,3,4,5,6 代码如下: $str = "1,2,3,4,5,6,"; $news ...

  9. Bash 什么时候会给 HOME 赋初始值

    今天无意发现下面这个表现: $  env -i bash -c cd bash: line 0: cd: HOME not set $ env -i bash -c 'echo $HOME' 这表明了 ...

  10. 创建你的第一个JavaScript库

    是否曾对Mootools的魔力感到惊奇?是否有想知道Dojo如何做到那样的?是否对jQuery感到好奇?在这个教程中,我们将了解它们背后的东西并且动手创建一个超级简单的你最喜欢的库. 我们其乎每天都在 ...