<!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. Codeforces 158B (数学)

    B. Mushroom Scientists time limit per test 2 seconds memory limit per test 256 megabytes input stand ...

  2. noip模拟赛 enc

    [问题背景]zhx 和他的妹子聊天.[问题描述]考虑一种简单的加密算法.假定所有句子都由小写英文字母构成, 对于每一个字母, 我们将它唯一地映射到另一个字母. 例如考虑映射规则:a->b, b- ...

  3. Spring Cloud（4）：Feign的使用

    基于上一篇文章:https://www.cnblogs.com/xuyiqing/p/10867739.html 使用Ribbon实现了订单服务调用商品服务的Demo 下面介绍如何使用Feign实现这 ...

  4. Spring Boot中使用Swagger2生成RESTful API文档（转）

    效果如下图所示: 添加Swagger2依赖 在pom.xml中加入Swagger2的依赖 <!-- https://mvnrepository.com/artifact/io.springfox ...

  5. logout退出功能是怎么实现的？login登陆功能室怎么实现的

    logout退出功能是怎么实现的?login登陆功能室怎么实现的 login就是登陆成功的时候,在session里面创建好用户对应的数据. logout就是登出的时候,在session里面销毁用户对应 ...

  6. Redhat 6.1安装ArcGIS Server10.1

    http://blog.csdn.net/linghe301/article/details/7762985 操作环境:Redhat 6.1 Linux 安装ArcGIS Server10.1之前,还 ...

  7. 从Linux 2.6.8内核的一个TSO/NAT bug引出的网络问题排查观点(附一个skb的优化点)

    梦中没有错与对,梦中没有恨和悔...最好闭上你的嘴.这样才算可爱...我不会说:这不公道,我不能接受.我会用朴素的文字记录点点滴滴,早上4点多起来,一气呵成最近的收获与评价,愤慨与忏悔. 四年多前的一 ...

  8. 菜鸟nginx源代码剖析 框架篇（一） 从main函数看nginx启动流程

    菜鸟nginx源代码剖析 框架篇(一) 从main函数看nginx启动流程 Author:Echo Chen(陈斌) Email:chenb19870707@gmail.com Blog:Blog.c ...

  9. unity3d杂记

    由于公司用unity3d开发客户端部分,今天去参加了下unity3d成都开发者大会.在这里简单记录一下会议里关于unity3d的内容. 说到unity3d,第一次知道的时候也是大概3年前的事情.这几年 ...

  10. VB Socket编程 框架

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