<!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. HDU 5493 Queue

    Queue Time Limit: 4000/2000 MS (Java/Others)    Memory Limit: 65536/65536 K (Java/Others)Total Submi ...

  2. 如何绘制caffe网络训练曲线

    本系列文章由 @yhl_leo 出品,转载请注明出处. 文章链接: http://blog.csdn.net/yhl_leo/article/details/51774966 当我们设计好网络结构后, ...

  3. hdu poj KMP简单题目总结

    hdu 3336 题意:输入一个字符串求每个前缀在串中出现的次数和 sol:只要稍微理解下next 数组的含义就知道只要把每个有意义的next值得个数加起来即可 PS:网上有dp解法orz,dp[i] ...

  4. scrapy——中间件UserAgent代理

    pip install fake-useragent 使用说明:from fake_useragent import UserAgent# 实例化一个UserAgent对象ua = UserAgent ...

  5. JS动态添加div，然后在div中添加元素

    需求: 组织部中有个这样的需求,根据年份动态显示该年份下的定性指标! 我的做法: 先是放一个空的div,让后根据指标的数据,动态的往div中添加元素. 代码: 空的div,存放定性指标 <div ...

  6. RSYNC最简实施

    只是内网同步,故而可以省略很多安全方面的东东.不需要通过ssh,而是通过rsync协议.不需要用户名认证,保证只读. rsync用standalone的daemon方式,而不用service方式操作. ...

  7. I/O 模型及其设计模式

    来源:伯乐在线 - 咸菜 链接:http://blog.jobbole.com/104638/ 前言 I/O在软件开发中的重要性无需多言,无论是在操作系统.网络协议.DBMS这种底层支撑软件还是在移动 ...

  8. 桦仔------分享一下我研究SQLSERVER以来收集的笔记

    http://www.cnblogs.com/lyhabc/p/3219117.html

  9. IOS怎么实现一个UITableView的下拉刷新

    採用的EGORefreshTableHeaderView来实现: 在Controller上实现EGORefreshTableHeaderDelegate的delegate @property(nona ...

  10. Codesys——TON和TOF的使用方法

    1. 引言 介绍延迟导通.延迟关闭函数的使用方法. 2. 函数描述 TON: 当IN为FALSE时,输出Q为FALSE: 当IN为由FALSE变为TRUE时,延迟导通过程中Q为FALSE,当时间到Q变 ...