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. SSM的理解

    SSM(Spring+SpringMVC+MyBatis)框架集由Spring.SpringMVC.MyBatis三个开源框架整合而成,常作为数据源较简单的web项目的框架.其中spring是一个轻量 ...

  2. C#简单线程

    一.实例1 static void Main(string [] args) { Console.WriteLine("开始线程"); startFunc(); Console.W ...

  3. Wi-Fi Mesh网络技术

    Wi-Fi在很早的时候就引入了mesh技术,并且最近得到了越来越多的关注.谷歌.Eero.Linksys.Netgear以及几乎所有以家庭和小型办公室为目标的网络品牌都提供了mesh网格系统.但是也有 ...

  4. 每天学点Linux命令之grep 和 wc命令

    Linux系统中grep命令是一种强大的文本搜索工具,它能使用正则表达式搜索文本,并把匹 配的行打印出来.grep全称是Global Regular Expr ession Print,表示全局正则表 ...

  5. 监控MySQL主从脚本

    示例一: cat check_mysql_health #!/bin/sh slave_is=($(mysql -S /tmp/mysql3307.sock -uroot -e "show ...

  6. jQuery获取子元素个数的方法

    //获取id=div1下的子元素的个数 $('#id').children().length; //获取id=div1下的p元素个数 $('#id').children('p').length;

  7. Docker学习笔记之docker volume 容器卷的那些事(一)

    预览目录 volume 方式 相关用例 使用方式 使用 volume driver bind mount 方式 相关用例 使用方式 配置selinux标签 配置macOS的安装一致性 tmpfs 方式 ...

  8. rabbitmq级联之shovel插件和exchange.bind

    有时候,由于各方面原因比如安全原因.系统间隔离,我们需要实现在多个rabbitmq实例或者一个rabbitmq实例的多个vhost间推送消息.在上一版的实现中,公司使用java自行实现了一个类似转发器 ...

  9. RAFT实践

    1.  raft org 2. paper 3. animation 4. python examples Raft-python  这个不是很好用. simpleRaft Raft算法分析与理解  ...

  10. git 随笔

    还有一些git的指令没有用过,记录在这里． 1． 设置远程branch的指令 There is no tracking information for the current branch.Pleas ...