1.        var DS;
  2. DS = CallIVRAjaxClass.GetBranchCallCount().value;
  3. var obj = {};
  4. obj.branch = "_branch";
  5. obj.count = "_count";
  6. if (DS != null && typeof (DS) == "object" && DS.Tables != null) {
  7. if (DS.Tables[0].Rows.length > 0) {
  8. for (var i = 0; i < DS.Tables[0].Rows.length; i++) {
  9.  
  10. var MapDiv = document.getElementById("MapDiv");
  11. var MapImg = document.createElement("img");//开始创建一个img标签
  12. MapImg.name = "imgMap";//开始赋值一些必要属性,其中alt和src必须要有
  13. MapImg.alt = "";
  14. MapImg.src = "";
  15. MapImg.style.position = "absolute";//由于我是用于图片叠加,所以用了绝对定位,
  16. MapDiv.appendChild(MapImg);//将这个创建好的追加到div容器里面
  17.  
  18. var _count = DS.Tables[0].Rows[i][obj.count]; //去处当前obj.count值的数据
  19. var ImagePath = "image/" + DS.Tables[0].Rows[i][obj.branch] + "_"; //提前设置好路径和图片前半部分的名字
  20. var _Map = document.getElementsByName("imgMap")[i]; //根绝name值找到当前img标签

  21.               //下面判断当前取出来的值来确定图片。注:png格式才可以有透明属性
  22. var str = "";
  23. if (_count == 0) {
  24. //_Map.src = ImagePath +
  25. str = i + ".png";
  26. } else if (_count >= 1 && _count <= 5) {
  27.  
  28. str = i + ".png";
  29.  
  30. } else if (_count >= 6 && _count <= 10) {
  31. str = i + ".png";
  32.  
  33. } else if (_count >= 11 && _count <= 20) {
  34. str = i + ".png";
  35.  
  36. } else if (_count >= 21 && _count <= 30) {
  37. str = i + ".png";
  38.  
  39. } else {
  40. str = i + ".png";
  41.  
  42. }
  43.  
  44. // //测试留
  45. // str = "";
  46.  
  47. _Map.src = ImagePath + str;//循环给img标签src属性值,由于我要放的图片是部分透明的,所有叠加在一起是刚刚好
  48. }
  49. }
  50. }

  

js如何动态创建一个新的标签的更多相关文章

  1. JS动态引入js,CSS——动态创建script/link/style标签

    一.动态创建link方式 我们可以使用link的方式.如下代码所示. 二.动态创建style方式 但是,这样的话,需要加载整个css文件,但是那样有可能浪费一个http请求并占用一个服务器请求数,并等 ...

  2. Node.js实战1:创建一个新的Node项目。

    你也许在猜专业的Node开发如何创建一个新项目. 有Npm在 ,这会非常简单. 虽然你可以创建一个JS文件,并执行:node file.js,但我建议你使用npm init来先创建一个node项目,这 ...

  3. js如何动态创建表格(两种方法)

    js如何动态创建表格(两种方法) 一.总结 一句话总结: 1.方法一:写好创建表格的html代码,将之赋值给div的innerHTML. 2.方法二.直接用创建好的table元素的方法insertRo ...

  4. 创建一个新的解耦的Orchard Core CMS网站

    引言本文将介绍创建一个功能齐全.解耦的CMS网站的过程,该网站允许您编辑博客帖子并呈现它们.解耦是一种开发模型,其中站点的前端和后端(管理)托管在同一个Web应用程序中,但只有后端由CMS驱动.然后, ...

  5. Eclipse中创建一个新的SpringBoot项目

    在Eclipse中创建一个新的spring Boot项目: 1. 首先在Eclipse中安装STS插件:在Eclipse主窗口中点击 Help -> Eclipse Marketplace... ...

  6. 第六周分析Linux内核创建一个新进程的过程

    潘恒 原创作品转载请注明出处<Linux内核分析>MOOC课程http://mooc.study.163.com/course/USTC-1000029000 task_struct结构: ...

  7. cocos2dx 3.x版本搭建Mac环境工程(创建一个新的C++工程)百分百可行

    首先第一篇,想学cocos2dx第一步就是搭建环境,第一步搭建不了环境,创建不了工程那一切都是扯淡. 说到mac下安装cocos2d-x想到的模式就是xcode+cocos2d-x.因为我本身就是一个 ...

  8. 实验 六:分析linux内核创建一个新进程的过程

    实验六:分析Linux内核创建一个新进程的过程 作者:王朝宪  <Linux内核分析>MOOC课程http://mooc.study.163.com/course/USTC-1000029 ...

  9. Python tricks(1) -- 动态定义一个新变量

    python是动态语言, 无需声明变量即可使用. 传递一个tuple, list或者dict等等方式, 有时候这种方式的使用不是很好. 对于tuple和list来说都是用下标的访问方式(即使用[]), ...

随机推荐

  1. uniapp微信授权操作后事件不触发

    微信小程序官网代码 <button form-type="submit" open-type="getUserInfo" bindgetuserinfo= ...

  2. java 执行shell命令及日志收集避坑指南

    有时候我们需要调用系统命令执行一些东西,可能是为了方便,也可能是没有办法必须要调用.涉及执行系统命令的东西,则就不能做跨平台了,这和java语言的初衷是相背的. 废话不多说,java如何执行shell ...

  3. axios网络封装模块

    功能特点 在浏览器中发送XMLHttpRequests请求 在node.js总发送http请求 支持Promise API 拦截请求和相应 转换请求和响应数据 axios请求方式 支持多种请求方式 a ...

  4. MySQL日期函数与日期转换格式化函数大全

    Mysql作为一款开元的免费关系型数据库,用户基础非常庞大,本文列出了MYSQL常用日期函数与日期转换格式化函数 1.DAYOFWEEK(date) 1 2 SELECT DAYOFWEEK('201 ...

  5. layui表单提交与ajax访问webapi

    啊啊啊啊 这个东西实在很蛋疼啊 每次访问webapi就很老火 这里就一下  以后忘记的话就来查阅 不多说 直接开始 首先html页面 新建一个基于layui的form表单页面LayuiForm.csh ...

  6. ESP8266交叉编译环境变量设置

    在build目录下执行sudo cp -r xtensa-lx106-elf /opt 修改xtensa-lx106-elf目录权限:这一步非常重要,否则在后续编译中很容易出现没有权限问题:sudo ...

  7. 内网渗透 day4-meterpreter基本命令

    meterpreter基本命令 目录 1.getuid 查看当前用户 1 2.getpid 查看当前的进程id 1 3.getsystem 初步提权 1 4.ps 1.查看进程列表2.帮助我们获取pi ...

  8. php判断用户设备类型

    最近做的一个需求里面希望能判断用户访问页面的设备类型,根据不同的类型去加载不同的数据和页面样式.由于技术栈是使用的php,于是考虑在php层面去做这个判断. 假设主要判断的设备有平板和手机为主,分两个 ...

  9. linux基本操作之linux登陆

    一 文本登陆方式: 输入用户名与密码:/etc/passwd文件对照(口令文件,保存基本的用户信息):/etc/shadow文件对照(影子文件,保存密码信息):启动相应的shell程序:用户得到 一个 ...

  10. cephfs删除报nospace的问题

    ceph Vol 45 Issue 2 CephFS: No space left on device After upgrading to 10.2.3 we frequently see mess ...