<!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. 阿里巴巴json包 --------fastjson

    fastjson对null的处理----String str2 = JSONObject.toJSONString(jsonMap, SerializerFeature.WriteMapNullVal ...

  2. WEB开发----springboot的登录拦截机制

    如果是一个后台的管理项目的,有些东西是不能直接就可以访问的,必须要登录才可以进去,所以就需要进行登录拦截,只有登录过的用户才可以正常访问. 登录拦截是不会拦截jsp页面的方法,所以我们需要在Contr ...

  3. BZOJ5089: 最大连续子段和

    维护一个序列支持以下操作:区间加,区间求最大子段和.n<=50000,m<=50000. 我TM再也不写分块了... 先分块,对于块整体加的操作,假设块里面有若干二元组(x,y),表示一个 ...

  4. 复习es6-let和const

    1.声明变量的方法 es5 : var   function es6 : var   function   let    const   class 2.let(const)与var 不同 let不能 ...

  5. 转:Redis 缓存策略

    转:http://api.crap.cn/index.do#/web/article/detail/web/ARTICLE/7754a002-6400-442d-8dc8-e76e72d948ac 目 ...

  6. CloudEngine 6800基础配置-01_常见密码操作

    由于工作原因,现在从事公有云. 这简直就是个笑话,12年后又回来学网络知识. # 设置系统的日期.时间和时区   <HUAWEI> clock timezone BJ add 08:00: ...

  7. ZOJ 3209 Treasure Map （Dancing Links 精确覆盖 ）

    题意 :  给你一个大小为 n * m 的矩形 , 坐标是( 0 , 0 ) ~ ( n , m )  .然后给你 p 个小矩形 . 坐标是( x1 , y1 ) ~ ( x2 , y2 ) , 你选 ...

  8. const与static类成员

    const成员函数作用1. 不能修改类的成员变量,同时不能调用类的非const成员函数.(const成员函数中,this的类型是一个指向const类类型对象的const指针,const成员函数返回*t ...

  9. ASP.NET MVC 4 Content Map

    https://msdn.microsoft.com/en-us/library/gg416514(v=vs.108).aspx The Model-View-Controller (MVC) pat ...

  10. 使用psutil模块获取电脑运行信息

    psutil是python的一个用于获取cpu信息的模块,非常好使,以下附上官方的一些example: CPU-> Examples >>> import psutil > ...