<!DOCTYPE html>

<html>

	<head>

		<meta charset="UTF-8">

		<title></title>

		<style>

			*{margin:0px;padding:0px;}

			#box{position:relative;}

			#box div{width:20px;height:20px;background:red;position:absolute;}

		</style>

	</head>

	<body>

		<div id="box"></div>

		<script>

			var oDiv=document.getElementById("box");

			for(var i=0;i<16;i++){

				if(i<8){

					oDiv.innerHTML+='<div style="left:'+20*(i+1)+"px;top:"+20*(i+1)+'px">'+i+'</div>';

					oDiv.innerHTML+='<div style="left:'+20*(i+(16*1+1))+"px;top:"+20*(i+1)+'px">'+(i+16)+'</div>';

					oDiv.innerHTML+='<div style="left:'+20*(i+(16*2+1))+"px;top:"+20*(i+1)+'px">'+(i+32)+'</div>';

				}else{

					oDiv.innerHTML+='<div style="left:'+20*(i+1)+"px;top:"+20*(15-i)+'px">'+i+'</div>';

					oDiv.innerHTML+='<div style="left:'+20*(i+(16*1+1))+"px;top:"+20*(15-i)+'px">'+(i+16)+'</div>';

					oDiv.innerHTML+='<div style="left:'+20*(i+(16*2+1))+"px;top:"+20*(15-i)+'px">'+(i+32)+'</div>';

				}

			}

		</script>

	</body>

</html>

　　

js基础---元素操作时字符串拼接的更多相关文章

  1. js扩展String.prototype.format字符串拼接的功能

    1.题外话,有关概念理解:String.prototype 属性表示 String原型对象.所有 String 的实例都继承自 String.prototype. 任何String.prototype ...

  2. D3.js系列——元素操作和简单画布操作

    一.元素操作: 1.选择元素 select 和 selectAll,以及选择集的概念 var p = d3.select("body").select("p") ...

  3. JS模板引擎：基于字符串拼接

    目的 编写一个基于字符串拼接的js模板引擎雏形,这里并不会提供任何模板与数据的绑定. 基本原理 Javascript中创建函数的方式有多种,包括: 1. var func = function () ...

  4. jquery/js iframe 元素操作

    1.判断id/ class 是否存在? <script> $(function(){ if(("#id_name").length()>0){ //如果id 存在 ...

  5. js基础——属性操作

    html属性:属性名——属性值 操作:读 . 写 读操作:用来获取.找到属性名对应的属性值,方法:元素.属性名 例如:var oBtn = document.getElementById('btn1' ...

  6. js中元素操作的有关内容与对比

    以下 A:代表原生js B:代表jQuery 1 创建元素/节点 A: 元素节点- createElement( ) 文本节点 - createTextNode() 例如: var a = docum ...

  7. Jquery 表单基础元素操作总结

    最近做前端比较多总结一些常用功能: radio 单选选中并且出发change事件: $(selector).find('input:radio[name=valuationMode]').filter ...

  8. JS基础语法---String（字符串的案例）

    练习1: var str = "我的宝宝最可爱,声音嗲嗲的"; var key = "可爱"; //先获取要截取的字符串的索引位置 var index = st ...

  9. JS基础——事件操作总结

    通用事件绑定   function bindEvent(elem,type,fn) { elem.addEventListener(type,fn); } let a =document.getEle ...

随机推荐

  1. gn3 --iou

    http://www.wyzc.com/Course/Course/learnAction/id/14049/center/0#lesson/400847 http://www.mamicode.co ...

  2. android 视频开发2分之1（仿美拍，糗百）

    近期比較忙,非常久没更新博客,今天我们仿一个美拍或者糗事百科的录像功能. 首先确认步奏: 1.打开摄像头: 2.開始录制: 3.支持分段录制,并支持分段删除: 4.把分段录制的视频进行合并: 不说废话 ...

  3. dota监測

    执行环境:win7 32位. python版本号:3.4.1 因为用到了一些win32api,这些并不是python标准库自带的,所以你须要先去下载pywin32模块.去http://sourcefo ...

  4. 今天開始慢下脚步，開始ios技术知识的查漏补缺。

    从2014.6.30 開始工作算起. 如今已经是第416天了.不止不觉.时间过的真快. 通过对之前工作的总结.发现,你的知识面.会决定你面对问题时的态度.过程和结果. 简单来讲.知识面拓展了,你才干有 ...

  5. 使用系统存储过程来监控SQLServer进程和会话具体解释

     承接上文,本文讲述怎样使用系统存储过程来监控系统. SQLServer相同也提供了一系列系统存储过程用于监控SQLServer,获取当前进程.会话.请求以及锁定的具体信息.本文将演示系统存储过程 ...

  6. Linux下Shell编程

    Linux的shell编程 1.什么是shell? 当一个用户登录Linux系统之后,系统初始化程序init就为每个用户执行一个称为shell(外壳)的程序. shell就是一个命令行解释器,它为用户 ...

  7. android 程序猿跳槽须要注意哪些？

    我是一个工作3年多的android开发,因为公司和个人发展原因.打算跳槽! 这次跳槽又给我好好的上了一课!所以我自己反思总结了一下.然后整理出一下几点 程序猿打算跳槽的时候须要注意的几点. 一 先想好 ...

  8. C++学习之多重继承与虚继承

    一.多重继承 我们知道,在单继承中,派生类的对象中包含了基类部分 和 派生类自定义部分.同样的,在多重继承(multiple inheritance)关系中,派生类的对象包含了每个基类的子对象和自定义 ...

  9. VB Socket编程 框架

    [转载]VB Socket编程 框架 (2014-07-15 20:06:28) 转载▼ 标签: 转载   原文地址:VB Socket编程 框架作者:安静的浪花 VB Socket编程(Winsoc ...

  10. requireJS defined undefined

    requeireJS 在使用时,在 defined 注入一个依赖,路径正确,却发现获得的值却是 undefined .这时候就要考虑是否是“循环依赖”的原因了. 循环依赖就是: a.js 依赖了 b. ...