文档章节

JavaScript(生成V字,四中方向的切换)

f
 feifei080366
发布于 2017/09/08 21:54
字数 266
阅读 3
收藏 0
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #box{
            width: 1000px;
            height:1000px;
            background-color: #cccccc;
           
        }
        #button{
            float: right;}
        #content div{
            width: 100px;
            height: 100px;
            background-color: aqua;
            text-align: center;
            color: #000;
            font-size: 28px;
            position: absolute;

        }
    </style>
</head>
<body>
<input type="button" id="button" value="开始">
<div id="box">
    <div id="content">
    </div>
</div>
</body>
<script>
var button=document.getElementById("button");
var box=document.getElementById("box");
var content=document.getElementById("content");
var num=0;
var left=0;
var top=0;
var l=left;
var t=top;
var str="";
button.onclick=function () {

if (num==0){
    for(i=0;i<9;i++){
        l=i*100;
        if (i<=4){
            t=i*100;
        }else{
            t=800-i*100;
        }
        str+='<div style="left: '+l+'px; top: '+t+'px">'+i+'</div>';
    }

}
    if (num==1){
        for(i=0;i<9;i++){
            t=i*100;
            if (i<=4){
               l=(9-i)*100;
            }else{
               l=(i+1)*100;
            }
            str+='<div style="left: '+l+'px; top: '+t+'px">'+i+'</div>';
        }}
        if (num==2){
            for(i=0;i<9;i++){
                l=i*100;
                if (i<=4){
                    t=(9-i)*100;
                }else{
                    t=(i+1)*100;
                }
                str+='<div style="left: '+l+'px; top: '+t+'px">'+i+'</div>';
            }
    }
    if (num==3){
        for(i=0;i<9;i++){
            t=i*100;
            if (i<=4){
                l=(i+1)*100;
            }else{

                l=(9-i)*100;
            }
            str+='<div style="left: '+l+'px; top: '+t+'px">'+i+'</div>';
        }
    }
    num ++;

    if(num==4){
        num=0;
    }
    content.innerHTML=str;
    str="";
}
</script>
</html>

© 著作权归作者所有

共有 人打赏支持
f
粉丝 0
博文 8
码字总数 1636
作品 0
私信 提问
Javascript 严格模式详解

一、概述 除了正常运行模式,ECMAscript 5添加了第二种运行模式:"严格模式"(strict mode)。顾名思义,这种模式使得Javascript在更严格的条件下运行。 设立"严格模式"的目的,主要有以下几...

开源oschina
2014/12/24
0
3
记一个JavaScript图片轮播思路与代码

说在前头 喜欢并学习前端,一路摸爬滚打过来,现在算算也快满一年的,每天或多或少都会来“拜读”大家的写的文章,学习与感悟了不少,作为一名要变的更强的前端小哥哥,在这个节点上,也想写...

柚子先生
2018/08/06
0
0
jquery的html()方法

大家好,我想实现左侧菜单右侧切换界面的功能,springmvc框架,前端ajax请求,springmvc不返回json的话返回的是html界面吧,前端使用jquery("#div").html(data),动态生成html,出现一个问题...

樱木花道VS康
2018/07/23
133
2
AAuto v1.0 更新(2011-10-8)

v1.0 版本更新说明 支持自定义生成时的exe文件输出目录 生成exe文件支持在工程属性中自定义版本、版权信息. 工程同步本地目录功能,可自动忽略.svn等隐藏目录 保存按钮将根据当前打开代码是否...

qqmmcc
2011/10/09
1K
2
FusionCharts使用JavaScript渲染iPhone/iPod/iPad图表

FusionCharts使用JavaScript: FusionCharts允许用户创建建立JavaScript图表(也就是web上的HTML5 /Canvas图表)。这个特性允许用户在不支持Flash播放器的web浏览器上创建图表,如iPhone / iPad...

答应不爱你
2013/09/04
0
0

没有更多内容

加载失败,请刷新页面

加载更多

乱入Linux界的我是如何学习的

欢迎来到建哥学Linux,咳!咳!咳!开个玩笑哈,我是一个IT男,IT界的入门选手,正在学习Linux。 在之前,一直想进军IT界,学习IT技术,但是苦于没有人指导,也不知道学什么,最开始我自己在...

linuxprobe16
24分钟前
0
0
OSChina 周日乱弹 —— 没时间 没头发 但有钱

Osc乱弹歌单(2019)请戳(这里) 【今日歌曲】 @开源中国总经办主任 :分享齐一的单曲《这个年纪》 《这个年纪》- 齐一 手机党少年们想听歌,请使劲儿戳(这里) @肿肿卷 :我真的可以睡一天...

小小编辑
今天
30
4
Django进阶 1.1 ORM基础—ORM 1.2.1 增删改查之查询 1.2.2 删改增 (1) 1.2.3 删改增 (2)

ORM基础 ORM是Django操作数据库的API,Django的作者将sql语句封装在里面供我们使用。 我们前面还提到过Django提供一个模拟数据库的工具,sqlite,供我们学习测试使用。 如果我们想使用mysql...

隐匿的蚂蚁
今天
3
0
Windows 上安装 Scala

在安装 Scala 之前需要先安装 Java 环境,具体安装的详细方法就不在这里描述了。 您可以自行搜索我们网站中的内容获得其他网站的帮助来获得如何安装 Java 环境的方法。 接下来,我们可以从 ...

honeymose
今天
3
0
数据库篇多表操作

第1章 多表操作 实际开发中,一个项目通常需要很多张表才能完成。例如:一个商城项目就需要分类表(category)、商品表(products)、订单表(orders)等多张表。且这些表的数据之间存在一定的关系...

stars永恒
今天
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部