Web网页项目的数据表格功能已经大体完成，下面是另一个主要功能，在线视频的显示

目前我做的项目是渔政监控方面，在之前C#的版本中已经实现了摄像头的在线监控，用的海康封装好的SDK，目前需要做的工作是在网页端实现在线视频的信号接入和云台控制，示例已经做好，可以看到有摄像头的选项，这时候我们可以对摄像头进行操作，视屏的开关，摄像头的调焦变焦，云台控制等，实现这些功能的前提是需要安装海康的名为WebComponents.exe的插件

对于海康摄像头的控制等函数可以参考海康的网络端，通过F12查看preview.asp页面，查看对应按钮的onclick事件即可

本篇博文的主要内容是通过JS语句动态生成，以上一篇博文为例，代码如下：

<%@ page contentType="text/html;charset=UTF-8" language="java" %>

<html>

  <head></head>

  <body>

  <div id="1" style="width:600px;height:300px;border:1px solid #000;">

      <div id="2" style="float:left;width:500px;height:300px;border:1px solid #000;">div2</div>

    <div id="3" style="float:right;width:94px;height:300px;border:1px solid #000;">div3</div>

  </div>

  </body>

</html>

生成的效果如图所示：

下面将div的语句通过js代码动态生成

首先，创建一个DIV对象

 var div1=document.createElement("div");

在div内写上文字以便标识：

 div1.innerHTML = "div1";

设置DIV的id：

 div1.id ="Video";

通过style.cssText设置DIv的CSS样式属性：

 div1.style.cssText="width:850px;height:500px;border:1px solid #000;";

最后在Body内创建DIV:

 document.body.appendChild(div1);

效果如图所示:

创建好了打的div后，通过JS语句在DIV1内加载DIV2和DIV3，逻辑很简单，和创建DIV1一样创建div2和div3，不过最后生成div的时候是在div1内生成

代码如下：

<script>

    //创建div1

    var div1=document.createElement("div");

    //设置div的id

    div1.id ="Video";

    //设置div的css样式

    div1.style.cssText="width:850px;height:500px;border:1px solid #000;";

    //在body内创建一个div

    document.body.appendChild(div1);

    //创建div2

    var div2=document.createElement("div");

    //设置div2的id

    div2.id ="divPlugin";

    div2.innerHTML="新的div2";

    //div2的class为Box

    div2.class ="Box";

    //设置div的css样式

    div2.style.cssText="float:left;width:700px;height:500px;border:1px solid #000;";

    //在div1内创建一个div3

    div1.appendChild(div2);

    //创建div3

    var div3=document.createElement("div");

    //设置div3的id

    div3.id ="Control";

    div3.innerHTML="新的div3";

    //设置div3的css样式

    div3.style.cssText="float:right;width:144px;height:500px;border:1px solid #000;";

    //在div1内创建一个div3

    div1.appendChild(div3);

</script>

效果如图所示

JaveWeb 公司项目（7）----- 通过JS动态生成DIV的更多相关文章

  1. js 动态生成div显示id

    <!DOCTYPE html><html lang="en" xmlns="http://www.w3.org/1999/xhtml"> ...

  2. 抓取Js动态生成数据且以滚动页面方式分页的网页

    代码也可以从我的开源项目HtmlExtractor中获取. 当我们在进行数据抓取的时候,如果目标网站是以Js的方式动态生成数据且以滚动页面的方式进行分页,那么我们该如何抓取呢? 如类似今日头条这样的网 ...

  3. JS动态生成表格后 合并单元格

    JS动态生成表格后 合并单元格 最近做项目碰到表格中的单元格合并的问题,需求是这样的,首先发ajax请求 请求回来后的数据 动态生成表格数据,但是生成后如果编号或者(根据其他的内容)有相同时,要合并单 ...

  4. JS动态生成的元素，其对应的方法不响应（比如单击事件，鼠标移动事件等）

    主要原因:在页面给元素注册点击事件的时候[ $(function () {  XXX }); ],JS动态生成的元素还尚未生成,所以click事件就没有生效 解决方法: 方案一:js动态生成元素后再给 ...

  5. js动态生成数据列表

    我们通常会使用table标签来展示数据内容,由于需要展示的数据内容是随时更换的,所以不可能将展示的数据列表写死在html写死在页面中,而是需要我们根据后台传来的数据随时更换,这个时候就需要我们使用js ...

  6. 2）JS动态生成HTML元素的爬取

    2)JS动态生成HTML元素的爬取 import java.util.List; import org.openqa.selenium.By; import org.openqa.selenium.W ...

  7. qrcode.js 动态生成二维码

    用qrcode.js动态生成二维码图片非常简单,只需要引入qrcode.js即可使用,而且可以自定义图片大小.背景色等信息. 1.jsp代码---页面头部引入qrcode.js,jquery文件可选 ...

  8. js 动态生成html 触发事件传参字符转义

    通常,在使用 JS 动态生成 html 的过程中,会嵌入相应的样式.事件等属性元素,而这时经常会出现所谓的 “单.双引号不够用” 的情况,别急,这时可以利用 html 语言中的转义字符来解决.下面就来 ...

  9. 爬虫案例(js动态生成数据)

    需求:爬取https://www.xuexi.cn/f997e76a890b0e5a053c57b19f468436/018d244441062d8916dd472a4c6a0a0b.html页面中的 ...

随机推荐

  1. [转载]基于 Token 的身份验证

    作者:王皓发布于:2015-08-07 22:06更新于:2015-08-07 22:07 最近了解下基于 Token 的身份验证,跟大伙分享下.很多大型网站也都在用,比如 Facebook,Twit ...

  2. 需求中碰到的简单Map集合 key相同合并 value的思路

    从两个接口获取到了数据Map集合, 但是要展示到同一页面 根据了播控人为key 将两个返回的进行遍历 将他们存在新的map里面 只有单个key value 就存为(MAP<object,obje ...

  3. Django后端项目---- rest framework（4）

    一.分页 试问如果当数据量特别大的时候,你是怎么解决分页的? 方式a.记录当前访问页数的数据id 方式b.最多显示120页等 方式c.只显示上一页,下一页,不让选择页码,对页码进行加密 1.基于lim ...

  4. 常用的node.js模块

    一.url模块1.url.parse:将一个url转换成一个对象 1)参数1:url 2)参数2:布尔值 3)如果参数2是一个true的情况下会将query解析成一个对象2.url.format:将一 ...

  5. socket聊天的业务逻辑

        一.主要思想:     1.如果用户A想要发消息给用户B,A需要将消息发送到一个服务器上,服务器接收到A发送的消息之后,再把消息发送给B,B接收到消息     2.当用户B断开连接时服务器不会 ...

  6. 关于JSONObject和JSONArray所需要的jar

    jakarta commons-lang 2.5 jakarta commons-beanutils 1.8.0 jakarta commons-collections 3.2.1 jakarta c ...

  7. xtrabackup 对pxc节点进行备份恢复

    xtrabackup 对pxc节点进行备份恢复 全量备份一个节点的数据,当节点挂掉时,使用备份恢复到最近状态,再启动节点加入集群. 备份 xtrabackup 命令小解释: --defaults-fi ...

  8. php中session同ip不同端口的多个网站session冲突的解决办法

    在局域网内使用IP加端口的访问方式搭了两个相同程序的站,结果发现用户在一个站下登录后,在另一个站也同时登录了,在一个退出后,另一个站也同时退出了.看了下程序发现两个站都是使用纯session方式记录登 ...

  9. java bean属性拷贝工具类比对（性能+功能）

    业务系统中经常需要两个对象进行属性的拷贝,不能否认逐个的对象拷贝是最快速最安全的做法,但是当数据对象的属性字段数量超过程序员的容忍的程度比如通常超过5个属性的时候,代码因此变得臃肿不堪,使用一些方便的 ...

  10. Fedora 安装Docker

    我使用的是yum安装, 下面提供我的yum源. name=Docker Repository baseurl=https://yum.dockerproject.org/repo/main/fedor ...