极客李华
极客李华

聊天信息框显示消息

聊天信息框显示消息

有趣的小案例池子：
JS实现定时器
JS实现关闭图片窗口
JS实现输入检验
获取焦点后隐藏提示内容的输入框
JS实现获取鼠标在画布中的位置
聊天信息框显示消息
JS点击切换背景图
自动切换背景的登录页面
JS制作跟随鼠标移动的图片
JS实现记住用户密码

效果展示

在这里插入图片描述

概述

本文讲解如何制作，可以提交信息的聊天框，并且可以删除已经发布的聊天信息。

构建HTML框架

<body>
    <textarea name="" id="">textarea>
    <button>发布button>
    <ul>

    ul>    
body>

CSS样式

JS逻辑

<script>
        // 1. 获取元素
        var btn = document.querySelector('button');
        var text = document.querySelector('textarea');
        var ul = document.querySelector('ul');
        // 2. 注册事件
        btn.onclick = function() { 
            // 如果输入的内容为空 
            if (text.value == '') {
                // 会有提示信息
                alert('您没有输入内容');
                // 返回false
                return false;
            } else {
                // console.log(text.value);
                // (1) 创建元素
                var li = document.createElement('li');
                // 先有li 才能赋值
                li.innerHTML = text.value + "删除";
                // (2) 添加元素
                // ul.appendChild(li);
                // 在ul无序列表的第一个设置为最新的li
                ul.insertBefore(li, ul.children[0]);
                // (3) 设置删除元素事件 
                // 获取元素
                var as = document.querySelectorAll('a');
                for (var i = 0; i < as.length; i++) {
                    as[i].onclick = function() {
                        // 为每一个连接事件 添加一个点击事件 这个点击事件会删除 这条信息
                        ul.removeChild(this.parentNode);
                    }
                }
            }
        }
    </script>

完整代码

DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Documenttitle>
    <style>
        /* 清除全局多余的样式 */
        * {
            margin: 0;
            padding: 0;
        }
        
        /* 设置body为一个比较靠中的位置 */
        body {
            /* 设置外边距 */
            padding: 300px;
        }
        
        /* 设置输入文本框的样式 */
        textarea {
            /* 文本框的大小 */
            width: 200px;
            height: 100px;
            /* 文本框的边框 */
            border: 1px solid black;
            /* 设置不能超出范围 */
            outline: none;
            /* 设置文本框大小不可以更改 */
            resize: none;
        }
        /* 设置无序表距离顶端的高度 */
        ul {
            margin-top: 50px;
        }
        
        /* 设置每个小列表的样式 */
        li {
            /* 设置宽度 */
            width: 300px;
            /* 设置外边距 */
            padding: 5px;
            /* 设置背景颜色 */
            background-color: rgb(245, 209, 243);
            /* 文字颜色 */
            color: red;
            /* 文字大小 */
            font-size: 14px;
            /* 外边距 */
            margin: 15px 0;
        }
        
        li a {
            /* 设置连接悬浮位置 */
            float: right;
        }
    style>
head>

<body>
    <textarea name="" id="">textarea>
    <button>发布button>
    <ul>

    ul>
    <script>
        // 1. 获取元素
        var btn = document.querySelector('button');
        var text = document.querySelector('textarea');
        var ul = document.querySelector('ul');
        // 2. 注册事件
        btn.onclick = function() { 
            // 如果输入的内容为空 
            if (text.value == '') {
                // 会有提示信息
                alert('您没有输入内容');
                // 返回false
                return false;
            } else {
                // console.log(text.value);
                // (1) 创建元素
                var li = document.createElement('li');
                // 先有li 才能赋值
                li.innerHTML = text.value + "删除";
                // (2) 添加元素
                // ul.appendChild(li);
                // 在ul无序列表的第一个设置为最新的li
                ul.insertBefore(li, ul.children[0]);
                // (3) 设置删除元素事件 
                // 获取元素
                var as = document.querySelectorAll('a');
                for (var i = 0; i < as.length; i++) {
                    as[i].onclick = function() {
                        // 为每一个连接事件 添加一个点击事件 这个点击事件会删除 这条信息
                        ul.removeChild(this.parentNode);
                    }
                }
            }
        }
    script>
body>

html>

你可能感兴趣的:(JS学习之旅,css,css3,前端)

  • uniapp接口请求封装api(超简单) 不法 uniappjavascript前端jsonuni-app
    最下面有使用方法进阶点击查看进阶封装根目录创建api.jsconstcommoneUrl="http://192.168...";//公共路径//post请求封装functionpostRequest(url,data){varpromise=newPromise((resolve,reject)=>{varpostData=data;uni.request({url:commoneUrl+url
  • 现代前端开发框架对比：React、Vue 和 Svelte 的选择指南 zhyoobo vue.jsreact.js前端
    引言在当今快速发展的Web开发领域，前端框架的选择往往直接影响项目的开发效率、维护成本和用户体验。React、Vue和Svelte作为当前最受关注的三大框架，各自拥有独特的设计哲学与技术实现。本文将通过5000字的深度解析，从架构设计、开发体验、性能特征到生态系统四个维度进行全方位对比，并针对不同场景提供选型决策框架。无论您是初创团队的技术负责人，还是正在构建企业级应用的架构师，都能在此找到面向2
  • 使用CRACO自定义 Webpack 配置 黄毛火烧雪下 Reactwebpack前端node.js
    1、为什么要用CRACO？默认情况下，CRA的Webpack配置是隐藏的，如果你需要修改Webpack，比如：✅CDN配置✅配置alias（路径别名）✅修改Less/Sass变量✅添加Babel插件✅优化Webpack构建（如SplitChunks、CDN加载）✅支持TailwindCSS✅移动端适配启用PostCSS+px转rem如果不用CRACO，你必须运行yarneject/npmrunej
  • js逆向第4例：猿人学1初识-送分题，AES算法魔改，md5算法魔改，环境检测 我是花臂不花 js逆向100例javascript算法开发语言
    第二届猿人学js逆向大赛，本以为送分题分分钟搞定，没想到第一题就这么难。查看请求存在token加密参数，接下就是打断点找到加密点破解直接进入下一步函数可以看到如下代码vare=Date['now'](),f=a('crypto-js'),g='666yuanrenxue66',h=f['AES']['encrypt'](e+String(d),g,{'mode':f['mode']['ECB'],
  • 基于Python拉取tiktok直播视频流，并将视频流切割成一定时长的视频片段 sh_moranliunian 蜘蛛侠网络爬虫后端python爬虫
    通过访问tiktok的直播间网页，从网页的script标签内部提取出关于该直播间的相关信息的JSON串，最终从JSON里提取出直播视频流的hls地址和直播间的其他信息。importsysimportrequestsimportjsonimporttimeimportsubprocessfromurllib.parseimporturlunparsefrombs4importBeautifulSou
  • `fetch` 和 `axios`的前端使用区别 Studying_swz blog前端
    欢迎访问的个人博客：https://swzbk.site/，加好友，拉你入福利群fetch和axios`是前端常用的两种HTTP客户端，以下是它们的核心区别及适用场景：一、本质区别特性fetchaxios类型浏览器原生API（部分环境需polyfill）第三方库（需通过npm/yarn安装）底层实现基于Promise基于Promise，封装了XMLHttpRequest二、核心功能对比1.请求与响
  • uniapp工程中解析markdown文件 pvfhv uni-app
    在uniapp中如何导入markdown文件，同时在页面中解析成html，请参考以下配置：1.安装以下3个依赖包npminstallmarkedhighlight.jsvite-plugin-markdown2.创建vite.config.js配置文件//vite.config.jsimport{defineConfig}from'vite';importunifrom'@dcloudio/vit
  • webpack初识（js逆向） shix . js逆向知识点webpackjavascript前端
    webpack调试很多时候再看webpack的代码块的时候都一头雾水，不知道这个函数的具体逻辑在哪里，因为打包之后一些函数块是通过数字或者字符串进行调用的就像这样这里每个括号包括着的字符串都相当于一个函数，但是他们的逻辑在其他地方第二种情况：window["webpackJsonp"]大概长这样(=window["webpackJsonp"]||[]).push(["login"])作用就是把打包
  • 字符函数和字符串函数 很会做人 算法
    一、字符分类函数头文件是#include下面是函数的使用条件，有x的就代表只要符合体条件就返回真我们以islower为例写一段代码实现一下功能:将小写字符改成大写字符#define_CRT_SECURE_NO_WARNINGS#include#includeintmain(){inti=0;chararr[20]={"aJsfjsJsfH"};while(arr[i]!='\0'){if(islo
  • LORA的魔法棒：在Stable Diffusion中挥洒注意力机制的优化咒语 ?? DTcode7 AI生产力AIAIGCstablediffusionAI生产力前沿
    LORA的魔法棒：在StableDiffusion中挥洒注意力机制的优化咒语??欢迎来到我的博客，很高兴能够在这里和您见面！希望您在这里可以感受到一份轻松愉快的氛围，不仅可以获得有趣的内容和知识，也可以畅所欲言、分享您的想法和见解。推荐：DTcode7的博客首页。一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身农奴把歌唱，一边打入敌人内部一边持续提升自己，为我们广大开发同胞
  • policy_does_not_allow_file_overwrite 前端uniapp云存储
    uniapp云开发阿里云上传文件uniapp的出现，让前端人员和后端人员实现了“全栈”的小梦想，当然，真正跨端开发的时候，还是会遇到不少的问题，比如今天我们的主角，uniCloud.uploadFile,一般来说，这个api文件名动态生成，云端返回文件存储的链接即可，但是，假如我们的产品是针对用户存储的，即用户的头像、私有文件、图片等具有唯一性，要单独开个目录存放的时候，同样的文件名上传会存在无法
  • Python,C++开发餐饮后厨环境远程管理APP Geeker-2025 pythonc++
    开发一款用于**餐饮后厨环境远程管理**的App，结合Python和C++的优势，可以实现高效的后端数据处理、实时的环境监控以及用户友好的前端界面。以下是一个详细的开发方案，涵盖技术选型、功能模块、开发步骤等内容。##技术选型###后端（Python）-**编程语言**：Python-**Web框架**：Django或Flask-**数据库**：PostgreSQL或MySQL-**实时通信**：
  • 在Ubuntu上安装MEAN Stack的4个步骤 ubuntu
    在Ubuntu上安装MEANStack的4个步骤为：1.安装MEAN；2.安装MongoDB；3.安装NodeJS，Git和NPM；4.安装剩余的依赖项。什么是MEANStack？平均堆栈一直在很大程度上升高为基于稳健的基于JavaScript的开发堆栈。名称的意思是指其组件;MongoDB，ExpressJS，Angularjs和NodeJS。第1步：安装MEAN对于此安装，我们将在本指南中使用
  • 深入解析：React中的信号组件与细粒度更新
    引言在主流的前端开发框架中，无论是React、Vue还是Svelte，核心都是围绕着更高效地进行UI渲染展开的。为了实现高性能，基于DOM总是比较慢这个假设前提，其最核心的要解决的问题有两个：响应式更新细粒度更新为了将响应式更新、细粒度更新优化到极致，各种框架是八仙过海，各显神通。以最流行的React和Vue为例，首先两者均引入了VirtualDOM的概念。Vue的静态模板编译，通过编译时的静态分
  • React 相关插件之 Redux 基本使用入门 前端reactredux
    引入和定义首先，你需要创建Store实例并暴露出来：//stores/login.store.jsconstloginInstance=(preState,action)=>{switch(action.type){//修改状态case"changeLoginState":preState.isLogin=action.loginFlag=='YES'?true:falsereturnpreSta
  • SvelteKit 最新中文文档教程（6）—— 状态管理
    前言Svelte，一个语法简洁、入门容易，面向未来的前端框架。从Svelte诞生之初，就备受开发者的喜爱，根据统计，从2019年到2024年，连续6年一直是开发者最感兴趣的前端框架No.1：Svelte以其独特的编译时优化机制著称，具有轻量级、高性能、易上手等特性，非常适合构建轻量级Web项目。为了帮助大家学习Svelte，我同时搭建了Svelte最新的中文文档站点。如果需要进阶学习，也可以入手我
  • 初探 Threejs 物理引擎CANNON，解锁 3D 动态魅力 伶俜Monster Threejswebgl前端3dthreejscannon.js
    简介Cannon.js是一个基于JavaScript的物理引擎，它可以在浏览器中模拟物理效果。它支持碰撞检测、刚体动力学、约束等物理效果，可以用于创建逼真的物理场景和交互。参考文档官方示例原理Cannon.js使用了欧拉角来表示物体的旋转，而不是四元数。这使得它在处理旋转时更加直观和易于理解。Cannon.js还支持多种碰撞检测算法，包括离散碰撞检测和连续碰撞检测。Cannon.js还支持多种约束
  • 用 Vue 3.5 TypeScript 重新开发3年前甘特图的核心组件 云烟，不再年轻 Vuetypescriptvue.js甘特图
    回顾3年前曾经用Vue2.0开发了一个甘特图组件，如今3年过去了，计划使用Vue3.5TypeScript把组件重新开发，有机会的话再开发一个React版本。关于之前的组件以前文章Vue2.0甘特图组件下面录屏是是用Vue3.5TypeScript开发的目前进展，不再使用Vue2里用过的snapsvg-cjs库，主要是对TypeScript支持的不太好，使用SVG.js库代替snapsvg-cjs
  • Java 处理 json 格式数据解析为 csv 格式 李昊哲小课 数据分析Java大数据javajson开发语言大数据数据分析
    Java处理json格式数据解析为csv格式如果不使用JSON工具库，你可以手动解析JSON格式字符串并将其转换为CSV格式字符串。以下是一个简单示例，展示如何实现这一功能。示例代码下面的示例代码手动处理JSON字符串，将其转换为CSV格式字符串：/***接收JSON字符串，去掉开头和结尾的方括号，按对象划分。*通过extractKeys方法提取字段名，添加到CSV的第一行。*逐项解析JSON对象
  • 【前端】面试八股文——输入URL到页面展示的过程 帅比九日 面试八股文前端面试javascript
    【前端】面试八股文——输入URL到页面展示的过程1.DNS解析当用户在浏览器中输入URL并按下回车时，首先需要将域名转换为IP地址，这个过程称为DNS（域名系统）解析。具体步骤如下：浏览器缓存：浏览器首先检查自身缓存中是否有该域名的IP地址。操作系统缓存：如果浏览器缓存中没有找到，浏览器会向操作系统请求DNS信息。路由器缓存：如果操作系统缓存也没有找到，操作系统会向本地网络中的路由器请求DNS信息
  • vue3+springboot电影院售票选座管理系统 qq_3166678367 springboot后端java
    目录本系统(已开发完成)->成品实现截图开发技术本系统支持的技术栈源码获取详细视频演示：文章底部获取博主联系方式！！！！本课题重点核心代码部分展示论文提纲来自指导老师帅的肯定视频演示/源码获取本系统(已开发完成)->成品实现截图开发技术关键技术实现：在Java的开发过程中，可以使用HTML、CSS、JavaScript等前端技术来实现系统的用户界面设计和交互功能。后端可以使用Java语言编写业务逻
  • Node.js系列（4）--微服务架构实践 一进制ᅟᅠ        ‌‍‎‏  Node.js架构node.js微服务
    Node.js微服务架构实践引言微服务架构已成为构建大规模Node.js应用的主流选择。本文将深入探讨Node.js微服务架构的设计与实现，包括服务拆分、服务治理、通信机制等方面，帮助开发者构建可扩展的微服务系统。微服务架构概述Node.js微服务架构主要包括以下方面：服务拆分：业务领域划分与服务边界服务治理：服务注册、发现与负载均衡通信机制：同步与异步通信方案数据管理：分布式事务与数据一致性可观
  • vue3当中使用Pinia的store的组件化开发模式 堕落年代 vuevue.js
    一、安装与初始化安装Pinianpminstallpinia#或yarnaddpinia目的：引入Pinia核心库，为状态管理提供基础支持。挂载Pinia实例在main.js中初始化并注入Vue应用：import{createApp}from'vue'import{createPinia}from'pinia'importAppfrom'./App.vue'constapp=createApp(A
  • vue3使用swiper7 我承认都是月亮惹的祸 使用第三方库vue.js前端javascript
    vue3中使用swiper7基本使用swiper导入Swiper导入组件import{Swiper,SwiperSlide}from'swiper/vue/swiper-vue.js';导入需要使用到swiper的组件模块importSwiperCore,{Navigation,A11y}from'swiper';这里导入了Navigation模块,也就是使用左右箭头来导航.与A11y是一个无障碍
  • AIGC时代品牌突围战：10招玩转DeepSeek内容推荐（深度扩展版） 白雪讲堂 人工智能大数据机器学习
    一、认知革命：从SEO到GEO的生死迭代案例对比：传统SEO困境：某家电品牌2023年投入200万SEO优化，关键词排名TOP3但流量下降42%（SEMrush数据）GEO突破案例：某母婴品牌通过结构化数据改造，AI推荐量从日均300次飙升至1.2万次（来源：DeepSeek官方案例库）实战要点：内容形态改造：将产品参数表升级为JSON-LD格式（某手机品牌实现参数类问题100%引用）流量分配逻辑
  • HTML音频、视频--课后作业实践 Heetun html5
    浅学了web一段时间，用浅显的知识做了一个小小的实践，各位大佬们多多包涵，指正。主要知识重现：标记语法：src:设置媒体文件的路径width、height:设置媒体文件的宽度、高度autostart:逻辑值，true为自动播放；false为不自动播放loop:逻辑值，true自动循环播放；false不循环播放2.CSS的内部样式表选择器1{属性1：属性值1；属性2：属性值2；......}选择器2
  • CSS中的伪类与伪元素：让样式更加灵活优雅 程序员
    CSS中的伪类与伪元素：让样式更加灵活优雅在CSS的世界里，伪类和伪元素是两个强大而优雅的特性，它们能让我们的样式代码更加简洁，同时提供更丰富的样式控制能力。今天，让我们深入了解这两个概念。一、伪类（Pseudo-classes）1.1什么是伪类？伪类用于定义元素的特殊状态。它们以单个冒号（:）开头，就像给元素添加了一个虚拟的类，但无需修改HTML结构。1.2常用伪类/*鼠标悬停状态*/butto
  • 创建在线工具来测量 PDF图纸 程序员
    在线处理PDF文件时，能够直接在浏览器中测量尺寸和内容可以显著提高工作效率。本指南将引导您完成使用ComPDFKit的WebSDK构建在线PDF测量工具的简单过程。先决条件首先，您需要访问我们的“WebSDK指南”页面来检查您是否满足这些要求：Node.js的最新稳定版本。与npm兼容的包管理器。应用许可证密钥如何获取30天免费许可证ComPDFKit为每个人提供30天免费许可证密钥，以测试他们的
  • css知识点总结 吃橘子的Crow csshtml前端
    1.css概述css是CascadingStyleSheets(级联样式表)css是一种样式表语言,用于为HTML文档控制外观,定义布局.可将页面的内容与表现形式分离,页面内容存放在HTML文档中,而用于定义白线形式的css在一个.css文件中或HTML文档的某一部分HTML如同网页的骨架,css如同修饰骨架的装饰品(样式)2.基本语法1.行内样式表行内样式表,又称内联样式、行间样式、内嵌样式。是
  • OpenTiny技术直播讲师招募：与开源同行，点亮技术影响力！ 前端组件化低代码开源
    OpenTiny企业级前端开发解决方案，正在寻找热爱分享的技术达人！加入我们的直播讲师团，与众多开发者一起分享你的经验，推动技术普惠，同时打造个人技术影响力！报名链接：https://www.wjx.cn/vm/tw7FOgC.aspx#
  • 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其他