文档章节

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

f
 feifei080366
发布于 2017/09/08 21:54
字数 266
阅读 81
收藏 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
私信 提问
加载中
请先登录后再评论。
Swift百万线程攻破单例(Singleton)模式

一、不安全的单例实现 在上一篇文章我们给出了单例的设计模式,直接给出了线程安全的实现方法。单例的实现有多种方法,如下面: class SwiftSingleton { } 这段代码的实现,在shared中进行条...

一叶博客
2014/06/20
3.3K
16
程序猿媛一:Android滑动翻页+区域点击事件

滑动翻页+区域点击事件 ViewPager+GrideView 声明:博文为原创,文章内容为,效果展示,思路阐述,及代码片段。文尾附注源码获取途径。 转载请保留原文出处“http://my.oschina.net/gluoyer...

花佟林雨月
2013/11/09
4.1K
1
5分钟 maven3 快速入门指南

前提条件 你首先需要了解如何在电脑上安装软件。如果你不知道如何做到这一点,请询问你办公室,学校里的人,或花钱找人来解释这个给你。 不建议给Maven的服务邮箱来发邮件寻求支持。 安装Mav...

fanl1982
2014/01/23
1.2W
6
CSS Browser Selector

CSS Browser Selector 是一个小的 JS 库,可增强 CSS 的选择器功能,支持根据不同的操作系统和浏览器来编写指定的 CSS 代码,可检测浏览器、浏览器版本、平台、平台版本、设备、设备版本、m...

匿名
2013/01/17
2.8K
1
HTTPS切换工具--HttpsSwitcher

HttpsSwitcher 是一个帮你进行 HTTPS 切换的 Chrome 插件,本工具可以帮你尝试使用https打开指定的域名,点击本插件的浏览器图标后会自动切换本标 签页的http/https状态,并且会记住你的选择...

leehorsley
2013/01/26
919
0

没有更多内容

加载失败,请刷新页面

加载更多

文件在线预览,有这个项目就够了

大家好呀!我是你们努力的喵哥! 我们在做各种项目时,都会需要预览各类文档的场景。比如,Wrod、PDF、Excel 等的预览。即使,我们个人使用的软件,也会有各类需要预览文件的场景。 在通常情...

Github喵111
昨天
16
0
运营商大数据

运营商大数据 调查结果显示,在全球120家运营商中,约有48%正在实施运营商大数据服务。运营商大数据服务成本平均占运营商总预算的10%,未来五年将上升到23%左右,成为运营商大数据的战略优势...

osc_7nzqlmki
48分钟前
12
0
Mysql如何处理重复数据?让你的效率更高效

有时候,数据表中会存在相同的记录。在获取表中记录时,相较于取得重复记录来说,取得唯一的记录显然更有意义。那么关于mysql数据库如何处理重复数据呢,下面就为大家来讲解这个问题。 http...

osc_tb68dlqx
49分钟前
4
0
有关信越润滑油脂方面常识

有关信越润滑油脂方面常识 一般常见的基础油有矿物油(mineral oil)合成油(synthetic oil),而添加剂则有抗氧化剂、抗腐蚀剂、抗磨剂、清净剂、防锈剂、极压剂、消泡剂、乳化剂等。   润滑油...

feiyoufei
50分钟前
6
0
13-sts的安装和运行SpringBoot项目

展开 本文分享自微信公众号 - 源码客栈(liqz6609)。 如有侵权,请联系 support@oschina.cn 删除。 本文参与“OSC源创计划”,欢迎正在阅读的你也加入,一起分享。...

真的是666
今天
0
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部