<!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. SQL Server数据库常用函数

    好久没学习新知识了.今天学了下sql的一些常用语句.人还是需要不断学习进步的 否则只能停滞不前. 先从最简单的一句开始说起吧. select *from 表名 这里*的含义 表示了表的各字段,以逗号隔 ...

  2. K米点歌APP评测

    K米APP评测 产品简介 K米点歌是一款免费的社交K歌手机应用,其手机点歌功能主要在KTV.夜总会,酒吧等K歌场所中使用,当前提供iPhone版本及安卓版本下载使用.——百度百科 评测版本 K米点歌4 ...

  3. 为何JAVA虚函数（虚方法）会造成父类可以"访问"子类的假象？

      首先,来看一个简单的JAVA类,Base. 1 public class Base { 2 String str = "Base string"; 3 protected vo ...

  4. Tomcat端口被占用错误

    所报错误: 严重: Error initializing endpointjava.lang.Exception: Socket bind failed: [730013] ????????????? ...

  5. HTC学习笔记

    添加一个属性的setter, getter 建立一个页面 <html> <head> <title>TODO supply a title</title> ...

  6. VTK初学一，动画加AVI录制终于做出来了

      #ifndef INITIAL_OPENGL #define INITIAL_OPENGL #include <vtkAutoInit.h> VTK_MODULE_INIT(vtkRe ...

  7. IBAction和IBOutlet

    - IBAction: - 本质就是void - 能让方法具备连线的功能- IBOutlet - 能让属性具备连线的功能

  8. 解决Xftp经常断开连接的问题，Xftp中文乱码

    #文件 --> 选项 --> 勾选“发送保持活动状态消息” 间隔 60秒 #工具 -> 选项 延伸阅读: Xshell个性化设置,解决Xshell遇到中文显示乱码的问题

  9. C和指针 第五章 位数组

    5.4的习题:编写一组函数,实现维数组,函数原型如下: //指定位设置为1void set_bit(char bit_array[], unsigned bit_number); //指定位清零 vo ...

  10. 修改mysql默认字符编码出现的Job failed to start解决方法

    5.5以后的版本对字符编码方式修改的办法,原来在[mysqld]下的修改已经发生了变化,正确方式如下: [mysqld]下添加的应该为: character-set-server=utf8 colla ...