vegetable-WEN
vegetable-WEN

JS学习笔记之三种动态创建元素区别

最近在学习JavaScript的时候动态创建元素区别的内容将笔记分享给大家

文章目录

  • 前言
  • 一、三种方法:
    • 1.代码如下：
    • 2.分析：
  • 二、innerHTML和document.createElement创建元素
    • 1.代码如下:
    • 2.分析:
  • 总结

前言

JS有三种方法来创建动态元素,分别是:
1.document.write()
2.innerHTML
3.document.createElement()

一、三种方法:

1.代码如下：


<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
    <style>
        .inner {
      
            width: 200px;
            height: 200px;
            background-color: orange;
        }

        .create {
      
            width: 200px;
            height: 200px;
            background-color: skyblue;
        }
    style>
head>

<body>
    <button>按钮button>
    <div>hahahadiv>
    <div class="inner">div>
    <div class="create">div>
    <script>
        // 三种创建元素方式区别
        // 1.document.write
        // 获取元素
        var btn = document.querySelector('button');
        // 注册事件
        btn.onclick = function () {
      
            document.write('
write添加的
');
        }
        // 2.innerHTML 创建元素
        var inner = document.querySelector('.inner');
        inner.innerHTML = '链接';
        // 3.document.createElement()创建元素
        var create = document.querySelector('.create');
        var a = document.createElement('a');
        // 添加子节点
        create.appendChild(a);
    script>

body>

html>

2.分析：

运行效果:
JS学习笔记之三种动态创建元素区别_第1张图片
在这里插入图片描述

我们动态创建元素的方式有以上三种，我们可以看到三种方式都相应地创建了元素。
当我们点击按钮时会出现界面值剩下write添加的这个盒子，
为什么呢这是因为document.write 创建元素 如果页面文档流加载完毕，再调用这句话会导致页面重绘。
(重绘的意思就是页面给我们重新绘制了一个新的HTML页面)所以这种创建元素的方式不太好。
单个元素创建看不出另外两种方法的区别下面我们就通过多元素创建来讨论一下另外两种创建元素方式的区别。

二、innerHTML和document.createElement创建元素

1.代码如下:

innerHTML第一种方式：

//innerHTML拼接字符串方式
        function fn() {
     
            var d1 = +new Date();
            var str = '';
            for (var i = 0; i < 1000; i++) {
     
                // 通过拼接字符串方式循环创建盒子
                document.body.innerHTML += '
';
            }
            var d2 = +new Date();
            console.log('innerHTML拼接字符串方式耗时:'+ (d2 - d1) + '毫秒');
        }
        fn();

innerHTML第二种方式：

// innerHTML数组方式
function fn() {
     
            var d1 = +new Date();
            var arr = [];
            for (var i = 0; i < 1000; i++) {
     
                // 往数组里面添盒子
                arr.push('
');
            }
            // 把数组转换成字符串
            document.body.innerHTML = arr.join('');
            var d2 = +new Date();
            console.log('innerHTML数组方式耗时:' + (d2 - d1) + '毫秒');
        }
        fn();

createElement的方式：

//createElemen创建元素方式
function fn() {
     
            var d1 = +new Date();
            var str = '';
            for (var i = 0; i < 1000; i++) {
     
                // 创建新的元素再放到body里面去
                var div = document.createElement('div');
                div.style.width = '10px';
                div.style.height = '10px';
                div.style.border = '1px solid red';
                document.body.appendChild(div);
            }
            var d2 = +new Date();
            console.log('createElemen创建元素方式耗时:' + (d2 - d1) + '毫秒');
        }
        fn();

2.分析:

各对应运行结果：
JS学习笔记之三种动态创建元素区别_第2张图片

JS学习笔记之三种动态创建元素区别_第3张图片

JS学习笔记之三种动态创建元素区别_第4张图片

innerHTML是将内容写入某个DOM节点，不会导致页面的重绘。
我们可以通过运行结果看到，innerHTML创建多个元素效率要更高一些，当然采用的是数组拼接方式而不
是字符串拼接方式，结构相应也复杂一些。而采用createElement的方式创建多个元素效率稍微低一点
但是结构比较清晰明了。

总结

以上就是今天要跟大家分享的三种动态创建元素区别的内容，并且书名不同浏览器下，innerHTML的效率要比creatElement高。

你可能感兴趣的:(JS学习笔记,js,javascript)

  • 基于注入的一种状态管理的思路 自然框架
    开始尝试做自己的状态管理。上文说了，我们可以定义一个reactive结构的userOnline，然后注入到根组件里面，那么相关的处理函数要怎么办呢？我么可以写一个单独的js文件，然后用import的方式引入进来，然后我们就可以做统一的处理了。js文件如下：import{provide,inject,reactive,readonly}from'vue'importsysUserInfofrom'.
  • 如何在 Stimulsoft JavaScript 报表组件中，设置设计器与查看器主题风格 CodeCraft Studio 控件报表图表开发javascript开发语言ecmascriptStimulsoftDashboardReport报表仪表盘工具
    在现代软件开发中，图形用户界面（GUI）不仅仅是功能的承载体，更是用户体验的关键组成部分。一个美观、统一且具备高度可定制性的界面，能够显著提升系统的专业感和使用效率。Stimulsoft作为功能强大的报表和仪表板解决方案提供商，其JavaScript版本（StimulsoftReports.JS与StimulsoftDashboards.JS）为开发者提供了丰富的内置主题支持，助力快速构建符合品牌
  • Blazor使用TXTextControl控件编辑报告 落叶飞花_ javascript开发语言
    文章目录1环境2课程链接3学习使用（加载TextControl控件）3.1DocumentEditor3.2DocumentViewer4javascriptApi列表5加载文档（TextControl加载文档，JS互操作）6开启修改跟踪（word中的修订）7文档修改保存8文档编辑，拖拽展示图片9文档编辑，使用ApplicationField10模板设计11插入图片11.1拖拽插入图片11.2Me
  • 重塑未来：AI如何重新定义全栈开发 熊猫钓鱼>_> 人工智能
    在传统认知中，全栈开发者被誉为技术界的“全能选手”。——他们需要精通前端界面构建（HTML/CSS/JavaScript）、后端业务逻辑实现（Python/Java/Node.js）、数据库设计优化（MySQL/MongoDB）以及服务器部署运维（Linux/Docker）。这种“一人包打天下”的能力模型长期被视为高效开发的黄金标准，尤其受到创业公司和小型团队的青睐，因为它能大幅减少沟通成本，加速
  • Javascript 严格模式use strict详解 滴水成川 JavaScript学习记录javascriptusestrict
    一、概述除了正常运行模式，ECMAscript5添加了第二种运行模式："严格模式"（strictmode）。顾名思义，这种模式使得Javascript在更严格的条件下运行。设立"严格模式"的目的，主要有以下几个：-消除Javascript语法的一些不合理、不严谨之处，减少一些怪异行为;-消除代码运行的一些不安全之处，保证代码运行的安全；-提高编译器效率，增加运行速度；-为未来新版本的Javascr
  • XSS Payload 学习浏览器解码 菜鸟一个昂 servlet
    目录问题一：问题二：问题三：问题四：问题五：问题六：问题七：问题八：问题九：问题十：问题十一：问题十二：问题十三：问题十四：问题十五：问题一：无法弹窗原因：urlcode无法识别协议（javascript:）html解码顺序：1、html实体编码2、urlcode编码3,unicode编码问题二：可以弹窗首先先HTML实体编码解码，得到href中为URL，URL模块可识别为javascript协议
  • 解决跨域的几种方法 大佩梨 开发前端
    解决跨域的方法主要有以下几种：1.CORS（跨域资源共享）CORS是一种W3C规范，它定义了一种浏览器和服务器交互的方式来确定是否允许跨源请求。服务器通过设置响应头Access-Control-Allow-Origin来允许或拒绝跨域请求。例如，header(‘Access-Control-Allow-Origin:*’);允许所有来源的访问。CORS支持POST、GET等多种请求方式，相较于JS
  • 浏览器解码过程分析
    浏览器解码过程分析前言在学习xss漏洞的过程中我发现一个问题，当我想绕过过滤机制时，可以采用编码的方式进行绕过这种方法，但是并不是每一种编码格式都能绕过，需要不停的尝试才行，这样过于浪费时间。后来我发现浏览器与服务器数据传输过程中有好几种编码格式，不同的编码格式有着不同的解析引擎，作为一个浏览器，在解析一篇HTML文档时主要有三个处理过程：HTML解析，URL解析和JavaScript解析。每个解
  • js生成器 m0dw javascript前端vue.js
    文章目录概念生成器函数如何中途结束生成器的执行使用yield*迭代可迭代对象概念生成器是ES6中新增的一种特殊的函数，所以也称为“生成器函数”。它可以更灵活地控制函数什么时候执行，什么时候暂停。生成器是一种特殊的迭代器返回值调用生成器函数返回一个新的对应的生成器，通过生成器next方法可以控制其迭代，next方法则返回下一个状态的生成器由于生成器是一种特殊的迭代器，故生成器的属性与其类似如下{va
  • php中的hmac,JavaScript通过CryptoJS等效实现php中hash_hmac函数加密raw_output配置 好想不取名 php中的hmac
    在一个项目中，客户需要从前端签名，加密插件使用的cryptoJS，使用与后端一样的签名流程(HmacSHA1后Base64.encode)发现并不能通过签名认证，签名校验方后端php代码中使用hash_hmac函数，先来看一下则会个函数的官网说明：说明hash_hmac(string$algo,string$data,string$key[,bool$raw_output=FALSE]):stri
  • 【Web APIs】JavaScript 节点操作 ③ ( 子节点操作 | firstChild 属性 | firstElementChild 属性 | children[0] 属性 ) 韩曙亮 JavaScript前端javascript开发语言WebAPIs节点操作子节点操作js
    文章目录一、JavaScript子节点操作1、获取子节点需求2、firstChild和lastChild属性(不推荐-基于所有类型节点)3、firstElementChild和lastElementChild属性(不推荐-兼容性问题)4、children[0]和children[element.children.length-1]属性(推荐-实际用法)5、完整代码示例在【WebAPIs】JavaS
  • Xss漏洞总结
    一、XSS漏洞简介XSS（Cross-SiteScripting，跨站脚本攻击）是一种常见的Web前端安全漏洞，其主要危害对象是网站的访问用户。攻击者通过在网页中注入恶意脚本代码（如JavaScript、Flash等），诱使用户访问后在其浏览器中执行这些代码，从而达到窃取数据、控制会话等攻击目的。二、XSS漏洞原理XSS的根本原因在于服务器未对用户提交的输入内容进行严格过滤和转义处理，导致用户提供
  • 从XSS Payload学习浏览器解码 caker丶 XSS-labsXSSxss学习javascript
    从XSSPayload学习浏览器解码HTML解析URL解析JavaScript解析案例解析总结作为一个浏览器在解析一篇HTML文档时主要有三个处理过程，每个解析器负责解码和解析HTML文档中它所对应的部分，下面我将按照解码顺序依次讲解。HTMl解析URL解析JavaScript解析HTML解析一个HTML解析器作为一个状态机，它从输入流中获取字符并按照转换规则转换到另一种状态。在解析过程中，任何时
  • YFCMF-TP6 改后台模块路径方法 huluang php
    1、创建表单，表民phpthinkcrud-tbeian_dignji-u12、app路径controllerlang/zh-cnmodelvalidateview以及public/assets/js/backend/找到beian_dignji每个路径下创建需要增加的文件夹名称，如beian，并将以上目录的文件或文件夹剪切到当前文件及下3、编辑表fa_auth_rule规则名称主要为105，上级
  • 关于ios点击分享自动复制到粘贴板的问题
    前言Android系统没有什么特别的要求，实现这个也比较容易。但ios在某些情况下就会出现问题。如果ios是点击之后，请求接口，再把接口的内容赋值给粘贴板肯定行不通，会被ios系统拦截，导致赋值失败或者赋值为空。建议使用第三方库clipboard.js来实现粘贴板赋值将点击的dom设置为一个button最好实现。CopytoclipboardimportClipboardJSfrom'clipbo
  • 原型链污染 江湖没什么好的 xss
    原型链污染（PrototypePollution）是一种针对JavaScript应用的安全漏洞，攻击者通过操纵对象的原型链，向基础对象（如Object.prototype）注入恶意属性，从而影响整个应用程序的行为。以下是详细解析：核心原理JavaScript原型链机制：每个对象都有隐式原型__proto__（或通过Object.getPrototypeOf()访问），指向其构造函数的原型对象。访问
  • @DateTimeFormat、@JsonFormat、@JSONField区别及用法 开往1982 java前端时间datetime
    推荐写法：@JSONField(format="yyyy-MM-ddHH:mm:ss")@JsonFormat(timezone="GMT+8",pattern="yyyy-MM-ddHH:mm:ss")@DateTimeFormat(pattern="yyyy-MM-ddHH:mm:ss")privateLocalDatebirthday;前端读取数据库日期字段时使用@JsonFormat和@J
  • 华为OD机试2025C卷 - 小明的幸运数 (C++ & Python & JAVA & JS & GO) 无限码力 华为od华为OD机试2025C卷华为OD2025C卷华为OD机考2025C卷
    小明的幸运数华为OD机试真题目录点击查看:华为OD机试2025C卷真题题库目录｜机考题库+算法考点详解华为OD机试2025C卷100分题型题目描述小明在玩一个游戏，游戏规则如下：在游戏开始前，小明站在坐标轴原点处（坐标值为0）.给定一组指令和一个幸运数，每个指令都是一个整数，小明按照指令前进指定步数或者后退指定步数。前进代表朝坐标轴的正方向走，后退代表朝坐标轴的负方向走。幸运数为一个整数，如果某个
  • 华为OD 机试 2025 B卷 - 周末爬山 (C++ & Python & JAVA & JS & GO) 无限码力 华为OD机试真题刷题笔记华为od华为OD2025B卷华为OD机考2025B卷华为OD机试2025B卷华为OD机试
    周末爬山华为OD机试真题目录点击查看:华为OD机试2025B卷真题题库目录｜机考题库+算法考点详解华为OD机试2025B卷200分题型题目描述周末小明准备去爬山锻炼，0代表平地，山的高度使用1到9来表示，小明每次爬山或下山高度只能相差k及k以内，每次只能上下左右一个方向上移动一格，小明从左上角(0,0)位置出发输入描述第一行输入mnk(空格分隔)。代表m*n的二维山地图，k为小明每次爬山或下山高度
  • 如何用notepad++格式化JOSN文本 爱喝马黛茶的安东尼
    很多数据文件一般是通过json格式保存的，如省市区的联动、区号、邮编、通讯录、游戏的服务器区等等，如下图的是以json保存的世界各个地区省市区的详细信息，这是一个很长很长的字符串。然后点击当前页面上面的“插件”菜单选项，在出现的菜单中将鼠标放在“PluginManager”选项上面，在出现的子菜单中点击“ShowPluginManager”选项。然后在弹出的页面中找到“JSONViewer”选项，
  • 熬之滴水穿石：JSP--HTML中的JAVA代码(1)
    33--JSP的由来说实话，在B/S系统中我并没有多少前端开发的经验。03年由C/S转B/S后曾有那么短暂的时间写前台用过JSP。但大部分时间从事后台的开发，等04年当上项目经理后基本没有搞过Web页面的开发了。这些工作都是留给我的团队开发的，但是不管角色怎么变，对于技术上的理解和追求始终没变！03年JSPJavaBean开发应用系统，到06年时已经是Web2.0的时代了，07年还用了JSF。有些
  • krpano 渲染全景视频 是菜菜的小前端啊 前端
    使用krpano渲染全景视频，可渲染不同分辨率的视频。使用的krpano版本为1.19index.htmlERROR:Javascriptnotactivatedembedpano({xml:"video.xml",target:"pano",passQueryParameters:"startscene,startlookat"});video.xmlif(device.panovideosup
  • Python——登录后获取cookie访问页面 尖叫的太阳
    importrequestsurl="https://kyfw.12306.cn/otn/view/index.html"#网址首页https://kyfw.12306.cn/otn/view/index.html的cookieheaders={'User-Agent':'Mozilla/5.0(WindowsNT6.1;Win64;x64)','Cookie':'JSESSIONID=3330D
  • JSON 对象
    JSON对象概述JSON（JavaScriptObjectNotation）对象是一种轻量级的数据交换格式，易于人阅读和编写，同时也易于机器解析和生成。JSON对象是JSON数据的一种基本结构，类似于JavaScript中的对象（Object）。在本文中，我们将详细介绍JSON对象的概念、语法、创建方法以及在实际应用中的使用。JSON对象的语法JSON对象使用大括号{}表示，其中包含一系列键值对。
  • 解决Error: Not Found：Page[5][-1,81] at view.umd.min.js 二七狂人 uniapp前端javascriptuniappvue
    场景说明：uniapp使用组件，在APP环境出现，在H5环境正常。单页面上多处使用该组件，使用同名参数设置数据，应用切换效果时，触发请求不同接口，返回数据格式不同。使用v-if时出现，使用v-show时正常。原因分析：尚不明确。解决方案1：将组件注册多个不同名称来使用，对应不同的返回数据。importvTabsfrom"@/components/v-tabs.vue"importvTabs1fro
  • JWT 翻译 lsswear 学习
    jwt官网：JSONWebTokenIntroduction-jwt.iohttps://jwt.io/introduction标准RFC7519：https://datatracker.ietf.org/doc/html/rfc7519#section-4.1https://datatracker.ietf.org/doc/html/rfc7519#section-4.1JWT定义JWT全称JS
  • 在UniApp中防止页面上下拖动的方法 阿凤21 uni-app前端
    1、pages.json中在某个页面设置禁用弹性滚动的页面{"path":"pages/yourPage/yourPage","style":{"app-plus":{"bounce":"none"}}}2、pages.json中在所有页面设置禁用弹性滚动的页面{"globalStyle":{"app-plus":{"bounce":"none"}}}3、使用css实现/*禁用页面滚动*/page
  • Crawlee高阶用法：无代码配置实现动态网站爬虫 程序员威哥 爬虫pythonscrapytcp/ip网络协议
    爬虫开发一直以来都需要编写大量的代码，尤其是在抓取动态网站时，往往需要处理JavaScript渲染和分页等复杂的问题。然而，Crawlee（之前叫ApifySDK）作为一个现代化的爬虫框架，提供了更加高效和简便的方式，甚至可以通过无代码配置来快速抓取动态网站数据。在本篇文章中，我们将深入探讨如何使用Crawlee实现动态网站的爬虫，并展示如何通过简单的配置来完成爬虫任务，节省开发时间和精力。1.C
  • Python爬虫高阶：Selenium+Scrapy+Playwright融合架构，攻克动态页面与高反爬场景 程序员威哥 python爬虫selenium
    随着互联网应用的不断发展，越来越多的网站采用JavaScript动态渲染页面，常见的静态页面数据抓取方式逐渐失效。此外，高反爬技术也使得传统爬虫架构面临着更大的挑战，许多网站通过复杂的反爬机制如验证码、IP屏蔽、请求频率限制等来防止数据抓取。为了应对这些挑战，我们需要采用更为先进和灵活的爬虫架构。在此背景下，结合Selenium、Scrapy和Playwright这三种技术，能够帮助我们突破动态页
  • Ts.ED框架全面解析：基于TypeScript的现代化Node.js开发利器 陆欣瑶
    Ts.ED框架全面解析：基于TypeScript的现代化Node.js开发利器什么是Ts.ED框架？Ts.ED是一个基于TypeScript构建的现代化Node.js/Bun.js框架，它在Express.js/Koa.js/Fastify.js等流行HTTP服务器之上提供了更高层次的抽象。这个框架专为提高开发者体验而设计，通过丰富的装饰器和清晰的代码组织结构，让后端开发变得更加高效和愉悦。核心特
  • java类加载顺序 3213213333332132 java
    package com.demo; /** * @Description 类加载顺序 * @author FuJianyong * 2015-2-6上午11:21:37 */ public class ClassLoaderSequence { String s1 = "成员属性"; static String s2 = "
  • Hibernate与mybitas的比较 BlueSkator sqlHibernate框架ibatisorm
    第一章     Hibernate与MyBatis Hibernate 是当前最流行的O/R mapping框架，它出身于sf.net，现在已经成为Jboss的一部分。 Mybatis 是另外一种优秀的O/R mapping框架。目前属于apache的一个子项目。 MyBatis 参考资料官网：http:
  • php多维数组排序以及实际工作中的应用 dcj3sjt126com PHPusortuasort
    自定义排序函数返回false或负数意味着第一个参数应该排在第二个参数的前面, 正数或true反之, 0相等usort不保存键名uasort 键名会保存下来uksort 排序是对键名进行的 <!doctype html> <html lang="en"> <head> <meta charset="utf-8&q
  • DOM改变字体大小 周华华 前端
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml&q
  • c3p0的配置 g21121 c3p0
    c3p0是一个开源的JDBC连接池，它实现了数据源和JNDI绑定，支持JDBC3规范和JDBC2的标准扩展。c3p0的下载地址是：http://sourceforge.net/projects/c3p0/这里可以下载到c3p0最新版本。 以在spring中配置dataSource为例： <!-- spring加载资源文件 --> <bean name="prope
  • Java获取工程路径的几种方法 510888780 java
    第一种： File f = new File(this.getClass().getResource("/").getPath()); System.out.println(f); 结果: C:\Documents%20and%20Settings\Administrator\workspace\projectName\bin 获取当前类的所在工程路径; 如果不加“
  • 在类Unix系统下实现SSH免密码登录服务器 Harry642 免密ssh
    1.客户机     (1)执行ssh-keygen -t rsa -C "[email protected]"生成公钥，xxx为自定义大email地址     (2)执行scp ~/.ssh/id_rsa.pub root@xxxxxxxxx:/tmp将公钥拷贝到服务器上，xxx为服务器地址     (3)执行cat
  • Java新手入门的30个基本概念一 aijuans javajava 入门新手
    在我们学习Java的过程中,掌握其中的基本概念对我们的学习无论是J2SE,J2EE,J2ME都是很重要的,J2SE是Java的基础,所以有必要对其中的基本概念做以归纳,以便大家在以后的学习过程中更好的理解java的精髓,在此我总结了30条基本的概念。　　Java概述:　　目前Java主要应用于中间件的开发(middleware)---处理客户机于服务器之间的通信技术,早期的实践证明,Java不适合
  • Memcached for windows 简单介绍 antlove javaWebwindowscachememcached
    1. 安装memcached server a. 下载memcached-1.2.6-win32-bin.zip b. 解压缩，dos 窗口切换到 memcached.exe所在目录，运行memcached.exe -d install c.启动memcached Server,直接在dos窗口键入 net start "memcached Server&quo
  • 数据库对象的视图和索引 百合不是茶 索引oeacle数据库视图
      视图     视图是从一个表或视图导出的表，也可以是从多个表或视图导出的表。视图是一个虚表，数据库不对视图所对应的数据进行实际存储，只存储视图的定义，对视图的数据进行操作时,只能将字段定义为视图,不能将具体的数据定义为视图       为什么oracle需要视图;    &
  • Mockito(一) --入门篇 bijian1013 持续集成mockito单元测试
            Mockito是一个针对Java的mocking框架，它与EasyMock和jMock很相似，但是通过在执行后校验什么已经被调用，它消除了对期望 行为（expectations）的需要。其它的mocking库需要你在执行前记录期望行为（expectations），而这导致了丑陋的初始化代码。  &nb
  • 精通Oracle10编程SQL(5)SQL函数 bijian1013 oracle数据库plsql
    /* * SQL函数 */ --数字函数 --ABS(n):返回数字n的绝对值 declare v_abs number(6,2); begin v_abs:=abs(&no); dbms_output.put_line('绝对值：'||v_abs); end; --ACOS(n):返回数字n的反余弦值，输入值的范围是-1~1，输出值的单位为弧度
  • 【Log4j一】Log4j总体介绍 bit1129 log4j
    Log4j组件：Logger、Appender、Layout   Log4j核心包含三个组件：logger、appender和layout。这三个组件协作提供日志功能： 日志的输出目标 日志的输出格式 日志的输出级别(是否抑制日志的输出)  logger继承特性 A logger is said to be an ancestor of anothe
  • Java IO笔记 白糖_ java
    public static void main(String[] args) throws IOException { //输入流 InputStream in = Test.class.getResourceAsStream("/test"); InputStreamReader isr = new InputStreamReader(in); Bu
  • Docker 监控 ronin47 docker监控
             目前项目内部署了docker，于是涉及到关于监控的事情，参考一些经典实例以及一些自己的想法，总结一下思路。 1、关于监控的内容 监控宿主机本身 监控宿主机本身还是比较简单的，同其他服务器监控类似，对cpu、network、io、disk等做通用的检查，这里不再细说。 额外的，因为是docker的
  • java-顺时针打印图形 bylijinnan java
    一个画图程序 要求打印出： 1.int i=5; 2.1 2 3 4 5 3.16 17 18 19 6 4.15 24 25 20 7 5.14 23 22 21 8 6.13 12 11 10 9 7. 8.int i=6 9.1 2 3 4 5 6 10.20 21 22 23 24 7 11.19
  • 关于iReport汉化版强制使用英文的配置方法 Kai_Ge iReport汉化英文版
    对于那些具有强迫症的工程师来说，软件汉化固然好用，但是汉化不完整却极为头疼，本方法针对iReport汉化不完整的情况，强制使用英文版，方法如下： 在 iReport 安装路径下的 etc/ireport.conf 里增加红色部分启动参数，即可变为英文版。   # ${HOME} will be replaced by user home directory accordin
  • [并行计算]论宇宙的可计算性 comsci 并行计算
          现在我们知道,一个涡旋系统具有并行计算能力.按照自然运动理论,这个系统也同时具有存储能力,同时具备计算和存储能力的系统,在某种条件下一般都会产生意识......       那么,这种概念让我们推论出一个结论     &nb
  • 用OpenGL实现无限循环的coverflow dai_lm androidcoverflow
    网上找了很久，都是用Gallery实现的，效果不是很满意，结果发现这个用OpenGL实现的，稍微修改了一下源码，实现了无限循环功能 源码地址： https://github.com/jackfengji/glcoverflow public class CoverFlowOpenGL extends GLSurfaceView implements GLSurfaceV
  • JAVA数据计算的几个解决方案1 datamachine javaHibernate计算
    老大丢过来的软件跑了10天，摸到点门道，正好跟以前攒的私房有关联，整理存档。 -----------------------------华丽的分割线-------------------------------------     数据计算层是指介于数据存储和应用程序之间，负责计算数据存储层的数据，并将计算结果返回应用程序的层次。J  &nbs
  • 简单的用户授权系统,利用给user表添加一个字段标识管理员的方式 dcj3sjt126com yii
    怎么创建一个简单的(非 RBAC)用户授权系统 通过查看论坛，我发现这是一个常见的问题，所以我决定写这篇文章。 本文只包括授权系统.假设你已经知道怎么创建身份验证系统(登录)。 数据库 首先在 user 表创建一个新的字段(integer 类型),字段名 'accessLevel',它定义了用户的访问权限 扩展 CWebUser 类 在配置文件(一般为 protecte
  • 未选之路 dcj3sjt126com 诗
    作者:罗伯特*费罗斯特   黄色的树林里分出两条路, 可惜我不能同时去涉足, 我在那路口久久伫立, 我向着一条路极目望去, 直到它消失在丛林深处.   但我却选了另外一条路, 它荒草萋萋,十分幽寂; 显得更诱人,更美丽, 虽然在这两条小路上, 都很少留下旅人的足迹.   那天清晨落叶满地, 两条路都未见脚印痕迹. 呵,留下一条路等改日再
  • Java处理15位身份证变18位 蕃薯耀 18位身份证变15位15位身份证变18位身份证转换
      15位身份证变18位，18位身份证变15位 >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> 蕃薯耀 201
  • SpringMVC4零配置--应用上下文配置【AppConfig】 hanqunfeng springmvc4
    从spring3.0开始，Spring将JavaConfig整合到核心模块，普通的POJO只需要标注@Configuration注解，就可以成为spring配置类，并通过在方法上标注@Bean注解的方式注入bean。   Xml配置和Java类配置对比如下： applicationContext-AppConfig.xml   <!-- 激活自动代理功能 参看：
  • Android中webview跟JAVASCRIPT中的交互 jackyrong JavaScripthtmlandroid脚本
      在android的应用程序中,可以直接调用webview中的javascript代码,而webview中的javascript代码,也可以去调用ANDROID应用程序(也就是JAVA部分的代码).下面举例说明之: 1 JAVASCRIPT脚本调用android程序    要在webview中,调用addJavascriptInterface(OBJ,int
  • 8个最佳Web开发资源推荐 lampcy 编程Web程序员
    Web开发对程序员来说是一项较为复杂的工作，程序员需要快速地满足用户需求。如今很多的在线资源可以给程序员提供帮助，比如指导手册、在线课程和一些参考资料，而且这些资源基本都是免费和适合初学者的。无论你是需要选择一门新的编程语言，或是了解最新的标准，还是需要从其他地方找到一些灵感，我们这里为你整理了一些很好的Web开发资源，帮助你更成功地进行Web开发。 这里列出10个最佳Web开发资源，它们都是受
  • 架构师之面试------jdk的hashMap实现 nannan408 HashMap
    1.前言。   如题。 2.详述。   (1)hashMap算法就是数组链表。数组存放的元素是键值对。jdk通过移位算法（其实也就是简单的加乘算法），如下代码来生成数组下标(生成后indexFor一下就成下标了）。 static int hash(int h) { h ^= (h >>> 20) ^ (h >>>
  • html禁止清除input文本输入缓存 Rainbow702 html缓存input输入框change
    多数浏览器默认会缓存input的值，只有使用ctl+F5强制刷新的才可以清除缓存记录。 如果不想让浏览器缓存input的值，有2种方法： 方法一： 在不想使用缓存的input中添加 autocomplete="off";  <input type="text" autocomplete="off" n
  • POJO和JavaBean的区别和联系 tjmljw POJOjava beans
    POJO 和JavaBean是我们常见的两个关键字，一般容易混淆，POJO全称是Plain Ordinary Java Object / Pure Old Java Object，中文可以翻译成：普通Java类，具有一部分getter/setter方法的那种类就可以称作POJO，但是JavaBean则比 POJO复杂很多， Java Bean 是可复用的组件，对 Java Bean 并没有严格的规
  • java中单例的五种写法 liuxiaoling java单例
    /** * 单例模式的五种写法： * 1、懒汉 * 2、恶汉 * 3、静态内部类 * 4、枚举 * 5、双重校验锁 */ /** * 五、 双重校验锁，在当前的内存模型中无效 */ class LockSingleton { private volatile static LockSingleton singleton; pri
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他