JavaScript（生成V字，四中方向的切换）

最新推荐文章于 2020-04-27 02:03:33 发布
最新推荐文章于 2020-04-27 02:03:33 发布
阅读量138 收藏
点赞数
文章标签： javascript ViewUI
原文链接：https://my.oschina.net/u/3402290/blog/1532150
版权 
<!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.οnclick=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>

转载于:https://my.oschina.net/u/3402290/blog/1532150

chexijing7210
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
JavaScript V 引擎机制
XymkMl的博客
09-23 53
JavaScript V 是一种高级的脚本语言，广泛应用于前端开发领域。它的引擎机制是指JavaScript 在运行时如何解析和执行代码的过程。本文将详细介绍JavaScript V 引擎的工作原理，并提供相应的源代码示例。综上所述，JavaScript V 引擎的机制包括词法分析、语法分析、代码执行以及优化和编译。这些步骤相互配合，使得JavaScript 代码能够在浏览器或其他环境中快速且高效地运行。希望本文对你理解JavaScript V 引擎机制有所帮助。如有任何问题，请随时提出。
利用JavaScript写出V字形
weixin_45457515的博客
08-19 929
如图所示 <style> div{ width: 50px; height: 50px; background: #f00; position:absolute;} </style> </head> <body> <script> var len = 9 for(...
visbol-js:JavaScript中的SBOLv渲染
05-08
visbol-js JavaScript中的SBOLv渲染 对于开发人员添加字形 添加正常DNA字形的步骤分为四个步骤 在browser.js中将名称添加到var title中 在lib/soToGlyph.js添加SO术语 将名称添加到font/sbolv/main.js 通过实现font/sbolv将文件添加到font/sbolv 对于开发人员添加复杂字形 根据规范，有4种类型的复杂字形。 当前，如果代码是交互的一部分，则该代码能够检测到复杂对象的正确渲染类型。 如果未检测到交互，则默认渲染将为SBGN复杂字形。 完全的： 1）通用（SBGN矩形） 2）小分子和蛋白质丢失的： 1）由2种蛋白质形成的复合物2）由RNA和蛋白质形成的复合物 通过实现font/sbolv将文件添加到font/sbolv 将名称添加到font/sbolv/main.js 请在确认名字font/sbol
js写一个“V”型字
樱井萧的博客
01-03 2202
2017年的第一篇，写个小应用，用原生js写的V型div，遇到一个小瓶颈是从小到上的div不知道怎么定位。后来，想了好久才明白。贴上代码：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> d
初识vue之v-clock和v-text和v-html的区别
liuguoxuanvip的博客
02-11 3780
v-clock 配合{{ msg }}使用，可以隐藏{{ msg }} &lt;!DOCTYPE html&gt; &lt;html lang=“en”&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;初识Vue&lt;title&gt; &lt;script src="https://cdn.jsde
javascript 新闻切换技术
10-30
2. 性能高效：javascript 新闻切换技术可以实时地生成和操作新闻内容，从而提高了网站的响应速度和用户体验。 3. 界面美观：javascript 新闻切换技术可以使用CSS 样式来对新闻的布局和样式进行控制，从而实现一个...
JavaScript生成SQL查询表单的方法
10-23
主要介绍了JavaScript生成SQL查询表单的方法,涉及javascript页面元素及字符串操作的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下
JavaScript生成随机字符串的方法
10-24
主要介绍了JavaScript生成随机字符串的方法,涉及javascript中random的使用技巧,非常具有实用价值,需要的朋友可以参考下
javascript GUID生成器实现代码
10-29
javascript GUID生成器实现代码, 需要的朋友可以参考下。
javascript实现3D切换焦点图
10-23
一款用JavaScript模仿3D立体切换效果的js焦点幻灯片特效，使用方法很简单：用鼠标拖拽图片向左右方向就好～
JavaScript--V字
DiDaDi的博客
03-10 338
var div = document.getElementsByTagName('div'); for(var i=0; i<11; i++){ document.body.innerHTML += '<div>'+i+'</div>'; } var len = div.length; for(var i=0;
javascript:void()的理解
qq_25103783的博客
10-19 1135
href="javascript:void(0);"本身没有任何危害啊，表示这是一个空链接。如果想在网页上用a标签，但又不想产生页面实际跳转动作，就可以这么做。下面是一些用法对比： 点我 ---这样是无效的，HTML规范规定a标签必须有href属性，否则的话就会失去“链接”的外观及作用； 点我 ---空白的href属性实际上并不空白，它代表当前页，也就是说点击后页面会自动刷新一下； 点我
vue中v-model和v-bind区别
子敬的技术博客
05-15 4万+
vue中v-model和v-bind区别 Vue中的数据绑定 绑定数据有三种方式： 插值，也就是{{name}}的形式，以文本的形式和实例data中对应的属性进行绑定 v-bind： v-model： v-bind eg：v-bind:class 可简写为 :class 当加上v-bind:之后，它的值classe不是字符串，而是vue实例对应的data.cl...
javascript中的vavigator对象
weixin_30925411的博客
08-12 93
appCodeName 　 javaScript 1.0 介绍：与浏览器相关的内部代码名 appMinorVersion IE4及其后续的版本 　 介绍：辅版本号（通常应用于浏览器的补丁或服务包） appName javaScript 1.0 介绍：浏览器的正式名称 appVersion javaScript 1.0 介绍：览器的版本号 cookieEnabled IE4和NS6...
v-model和:model的区别
echo_s 快乐de小媛~
02-21 4万+
v-model是vue.js中内置的双向数据绑定指令， 用于表单控件以外的标签是不起作用的 (即只对表单控件标签的数据双向绑定有效)。 :model相当于v-bind:model的缩写， v-bind动态绑定指令，默认情况下标签自带属性的值是固定的， 这种只是将父组件的数据传递到了子组件，并没有实现子组件和父组件数据的双向绑定。 当然引用类型除外，子组件改变引用类型的数据的话...
javascript:;与javascript:void(0)使用介绍
weixin_30299539的博客
09-18 272
有时候我们在编写js过程中，需要触发事件而不需要返回值，那么就可能需要这样的写法 href=”#”,包含了一个位置信息.默认的锚是#top,也就是网页的上端，当连续快速点击此链接时会导致浏览器巨慢甚至崩溃。当然我们一般用三个 href="###",不过看了这篇文章我们以后就可以使用javascript:;(一个冒号一个分号)javascript中void是一个操作符，该操作符指定要计算一个表...
javascript用for循环制作一个V
知行合一
04-26 1592
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>javascript用for循环制作一个V</title> <style> div{ height:50px; width: 50px; line-h
v-for的四种使用方法
热门推荐
qq_39239110的博客
02-20 5万+
v-for的四种使用方法分别是： 1.使用v-for循环一个简单的数组 2.使用v-for循环一个复杂的数组 3.使用v-for循环对象 4.v-for循环一个迭代的数字 &amp;lt;div id=&quot;app&quot;&amp;gt; &amp;lt;!--v-for循环一个简单的数组--&amp;gt; &amp;lt;p v-for=&quot;item in list&q
JavaScript知识整理
tuzi007a的博客
04-27 6921
快乐的棒棒糖~~资料纯手打。也算自己又重新复习了一遍吧。希望对小伙伴们有所帮助23333~ JavaScript 计算机基础（了解) 数据存储单位 bit byte kb Gb Tb 如图： java和javascript的关系： 两者毫无关系。类似于雷锋和雷峰塔的关系。 script是脚本的意思。javascript 是脚本语言，会逐行解释执行。简称JS。 html / css / js三者的...
Javascript 生成方向坐标
最新发布
03-28
要生成方向坐标，可以使用以下Javascript代码： ```javascript // 定义方向和距离 var direction = 45; // 方向，单位为度数 var distance = 100; // 距离，单位为像素 // 将度数转换为弧度 var radians = ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值