<!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 1009D】Relatively Prime Graph

    [链接] 我是链接,点我呀:) [题意] 题意 [题解] 1000以内就有非常多组互质的数了(超过1e5) 所以,直接暴力就行...很快就找完了 (另外一开始头n-1条边找1和2,3...n就好 [代 ...

  2. cocos2dx 2.1.x 退出SDK相关界面后EGLView 不刷新渲染

    报错内容为: [3390:1456879] failed to call contextcocos2d: surface size: 0x0[3390:1456879] Failed to make ...

  3. UVALive 6511 Term Project

    Term Project Time Limit: 3000ms Memory Limit: 131072KB This problem will be judged on UVALive. Origi ...

  4. ZOJ 3349 Special Subsequence

    Special Subsequence Time Limit: 5000ms Memory Limit: 32768KB This problem will be judged on ZJU. Ori ...

  5. 撸呀撸的左手(KMP+DP)

    题目描述 撸呀撸很迷茫,因为他的左手总是不受控制,做一些不雅的事情.于是撸呀撸一狠心,决定戒撸.没想到,他的左手受不了寂寞,一闲下来就在键盘上各种乱敲. 唔,神奇的左手表示,safasfasaafaf ...

  6. [poj2311]Cutting Game_博弈论

    Cutting Game poj-2311 题目大意:题目链接 注释:略. 想法: 我们发现一次操作就是将这个ICG对应游戏图上的一枚棋子变成两枚. 又因为SG定理的存在,记忆化搜索即可. 最后,附上 ...

  7. HDU——1023　Train Problem II

    Train Problem II Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others) ...

  8. BZOJ(4) 1050: [HAOI2006]旅行comf

    1050: [HAOI2006]旅行comf Time Limit: 10 Sec  Memory Limit: 162 MBSubmit: 3984  Solved: 2236[Submit][St ...

  9. Android GIS开发系列-- 入门季（1） 起点

    前言 这个系列,待最终完成更新,大家体谅点,第一版本全部是参考的网络教程,最近会逐步的细化更新为可以直接使用的情况. 本系列的开发基于AS (  Android Studio ), 和ArcGIS 的 ...

  10. NetCore +EFCore+SqlServer根据数据库生成实体类到项目中

    转载自:https://www.cnblogs.com/yangjinwang/p/9516988.html 1.点击“工具”->“NuGet包管理器”->“程序包管理器控制台” 分别安装 ...