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. 基于RHEL6.3 安装MySQL踩过的坑

    MySQL版本:Percona-Server-5.6.29 OS:RHEL6.3 安装出错 [mysql@oracle ~]$ /home/mysql/scripts/mysql_install_db ...

  2. spring boot log4j2与三方依赖库log4j冲突无法初始化问题解决方法

    因为从Spring Boot 1.4开始,spring boot就不支持log4j了,必须是log4j2或者logback,具体两者如何配置以及NDC的支持可以参考spring boot精华版. 这里 ...

  3. .net 高并发 多消费者模式处理订单

    1.数据直接往rabbitmq抛或者判断redis里面是否有订单2.多消费者模式往数据库刷单3.判断redis是否有这个订单了,没有的话插入订单,存在了的话,不插入订单4.检索出订单,然后往队列分发到 ...

  4. 选择排序法、冒泡排序法、插入排序法、系统提供的底层sort方法排序之毫秒级比较

    我的代码: package PlaneGame;/** * 选择排序法.冒泡排序法.插入排序法.系统提供的底层sort方法排序之毫秒级比较 * @author Administrator */impo ...

  5. k8s (kubernetes) 代码分析

    简易入门 结构图: debug 先了解 etcd API源码分析 API server 是中心． https://www.jianshu.com/p/88c6ed78b668 $ git ls-fil ...

  6. PHP获取Linux当前目录下文件并实现下载功能

    使用nginx转发过去给php server{ listen 9099; server_name 18.5.6.2; location / { proxy_http_version 1.1; root ...

  7. Jmeter在Linux下执行

    1.上传jmeter文件到服务器上(最好自己建一个文件夹:如:mkidr yzb_jmeter) 2.上传jmeter脚本到yzb_jmeter,并修改权限:chmod +x 脚本文件 3.修改统计的 ...

  8. ERROR! The server quit without updating PID file (/application/mysql-5.6.40/data/db01-51.pid).

    centos7.5 安装mysql数据库报错 问题: [root@db01-51 scripts]# /etc/init.d/mysqld start Starting MySQL.Logging t ...

  9. Web开发中B/S架构和C/S架构的区别

    在web开发中有两种基本架构,即C/S架构和B/S架构那么这两种架构有什么区别呢?那么就一起来看看吧. C/S架构图: B/S架构图: C/S架构是 浏览/服务器端的交互,是早期的一种分布式架构,在该 ...

  10. Flask学习【第1篇】：Flask介绍

    Flask介绍(轻量级的框架,非常快速的就能把程序搭建起来) Flask是一个基于Python开发并且依赖jinja2模板和Werkzeug WSGI服务的一个微型框架,对于Werkzeug本质是So ...