<!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. Nginx简易配置文件(二)（反向代理）

    user nobody nobody; worker_processes 4; error_log logs/error.log; pid logs/nginx.pid; events { use e ...

  2. java 集合 Connection 栈 队列 及一些常用

    集合家族图 ---|Collection: 单列集合 ---|List: 有存储顺序 , 可重复 ---|ArrayList: 数组实现 , 查找快 , 增删慢 ---|LinkedList: 链表实 ...

  3. JSF primefaces session view expired 会话失效后页面跳转

    web.xml <?xml version="1.0" encoding="UTF-8"?> <web-app xmlns:xsi=" ...

  4. [Unity] Shader(着色器）之纹理贴图

    在Shader中,我们除了可以设定各种光线处理外,还可以增加纹理贴图. 使用 settexture 命令可以为着色器指定纹理. 示例代码: Shader "Sbin/ff2" { ...

  5. Unicode文件读取 出现隐藏字符 (大坑)

    C#读取文件..分析时发现应该15位的.. str.Lenght 却 16位.. 字符串复制出来一位位的数..就是15位.. 纳闷中突然想起来会不会是隐藏字符.. 输出 str[0].ToBytes( ...

  6. UI第十六节——UITabBarController详解

    一.UITabBarController主要用来管理你提供的content view controllers,而每一个 content view controller则负责管理自己的view层级关系, ...

  7. 【荐】JavaScript编码风格

    作者:阮一峰 Douglas Crockford是 JavaScript 权威,Json 格式就是他的发明. 去年 11 月他有一个演讲(Youtube),谈到了好的 JavaScript 编程风格是 ...

  8. PHP采集curl应用的一点小疑惑

    CURL 是 Client URL Library Functions 的缩写,由 Daniel Stenberg 创建,更多内容可以参考他的网站.最近几天突然对 HTTP 采集有了兴趣.之前我在做这 ...

  9. Linux C fcntl()函数详解

    fcntl系统调用 功能描述:根据文件描述词来操作文件的特性. 用法: int fcntl(int fd, int cmd);  int fcntl(int fd, int cmd, long arg ...

  10. Alpha总结

    一.预期计划 1.时间:11月7日--11月17日 2.小组分工 角色:程序员.美工.文档.测试 这个阶段以编码为主,每个组员参与编码,同时各自根据自己擅长的方面主要负责一个部分. 项目编码工作分工: ...