格式化小拓
格式化小拓

day39-Password Strength Background（密码强度背景）

50 天学习 50 个项目 - HTMLCSS and JavaScript

day39-Password Strength Background（密码强度背景）

效果

day39-Password Strength Background（密码强度背景）_第1张图片

index.html

DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Password Strength Backroundtitle>
    
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/1.8.11/tailwind.min.css"
        integrity="sha512-KO1h5ynYuqsFuEicc7DmOQc+S9m2xiCKYlC3zcZCSEw0RGDsxcMnppRaMZnb0DdzTDPaW22ID/gAGCZ9i+RT/w=="
        crossorigin="anonymous" />
    <link rel="stylesheet" href="style.css" />
head>

<body>
    
    <div class="background" id="background">div>
    
    <div class="bg-white rounded p-10 text-center shadow-md">
        <h1 class="text-3xl">图片密码强度h1>
        <p class="text-sm text-gray-700">改变密码看看效果如何p>
        
        <div class="my-4 text-left">
            <label for="email" class="text-gray-900">邮箱:label>
            <input type="text" class="border block w-full p-2 mt-2 rounded" id="email" placeholder="Enter Email" />
        div>
        
        <div class="my-4 text-left">
            <label for="email" class="text-gray-900">密码:label>
            <input type="password" class="border block w-full p-2 mt-2 rounded" id="password"
                placeholder="Enter Password" />
        div>
        
        <button class="bg-black text-white py-2 mt-4 inline-block w-full rounded" type="submit">
            提交
        button>
    div>
    <script src="script.js">script>
body>

html>

style.css

* {
    box-sizing: border-box;
}

body {
    /* 子元素竖直居中排列 */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100vh;
    overflow: hidden;
    margin: 0;
}

/* 背景 */
.background {
    background: url('https://images.unsplash.com/photo-1556745757-8d76bdb6984b') no-repeat center center/cover;
    position: absolute;
    top: -20px;
    bottom: -20px;
    left: -20px;
    right: -20px;
    z-index: -1;
    /* 模糊度 */
    filter: blur(20px);
}

script.js


// 重点 flex position filter: blur(20px); event
// 1.获取元素节点
const password = document.getElementById('password')//密码
const background = document.getElementById('background')//背景
// 2.绑定事件 input事件类型
password.addEventListener('input', (e) => {
    // console.log(this);//window 由于使用了箭头函数
    // console.log(e.target);//password元素对象
    const length = e.target.value.length//由于有垃圾回收机制，可使用const定义
    // 垃圾回收机制：当函数执行完毕后，函数原有的变量会被清除，即不存在const所定义的基本数据类型变量被重新赋值，导致报错
    // 背景图片的模糊度
    const blurValue = 20 - length * 2
    background.style.filter = `blur(${blurValue}px)`
})

你可能感兴趣的:(50天50个小demo前端,html5,css3,javascript,前端)

  • 大屏自适应终极方案：基于比例缩放的完美适配实践（Vue3版） FFF-X html5javascript
    需求背景在数据可视化大屏开发中，我们常面临这样的挑战：如何让1920*1080的设计稿在不同分辨率设备上完美呈现？传统的响应式布局难以应对复杂的大屏元素排布，本文介绍一种基于CSS3变换的终极适配方案实现思路本方案的核心是动态比例缩放，通过以下关键步骤实现：基准比例锁定：基于设计稿宽高比（16:9）建立基准比例视口实时检测：通过resize事件监听窗口变化智能比例判断：当视口更宽时：保持高度基准，
  • 如何实现具备自动重连与心跳检测的WebSocket客户端 FFF-X websocket网络协议网络
    本文介绍如何通过原生WebSocketAPI封装一个具备自动重连、心跳检测、错误恢复等能力的稳健客户端。适用于需要长连接的实时通讯场景（如聊天室、实时数据监控等）。核心功能亮点自动重连机制-指数退避策略重连心跳保活-双向检测连接活性消息可靠性-失败消息自动重发异常处理-错误分类处理机制状态管理-精准控制连接生命周期关键优化点说明事件监听优化改用addEventListener替代onopen等属性
  • router-view的name属性 ＜router-view name=“path“＞＜/router-view＞ FFF-X vue.js前端javascript
    多个router-view的问题一个页面可以配置多个router-view，加上name属性使之区分，在路由配置中需要将component变为components，代码如下//vue2importVuefrom'vue'importVueRouterfrom'vue-router'Vue.use(VueRouter)constroutes=[{path:'/',name:'Home',compon
  • 算法训练（leetcode）第四十六天 | 110. 字符串接龙、105. 有向图的完全可达性、106. 岛屿的周长 Star Patrick 刷题日记算法leetcode职场和发展
    刷题记录*110.字符串接龙105.有向图的完全可达性邻接矩阵邻接表106.岛屿的周长深搜简化代码*110.字符串接龙题目地址使用广搜。本题相当于求最短路径，因此使用广搜。如何应用广搜是一个难点，因为题目给的是字符串而非图的表示（邻接矩阵、邻接表），因此需要自行构建连接关系。题目要求每一步只能修改一个字符，因此从起始字符串开始，对字符串中的每一个字符进行修改，修改后在输入的字符串列表中查找是否存在
  • Qemu&KVM 第一篇 （3）QEMU 架构 weixin_34160277 操作系统
    QEMU架构我们首先了解一下QEMU如何实现仿真。本节将介绍QEMU的两种操作模式，以及QEMU动态翻译程序的一些有趣特点。QEMU基本操作QEMU支持两种操作模式：用户模式仿真和系统模式仿真。用户模式仿真允许一个CPU构建的进程在另一个CPU上执行（执行主机CPU指令的动态翻译并相应地转换Linux系统调用）。系统模式仿真允许对整个系统进行仿真，包括处理器和配套的外围设备。在x86主机系统上仿真
  • Java架构师成长之路 hweiyu00 分享spring微服务springcloudjava
    概述本教程主要从6个方面，全面讲解Java技术栈的知识。1.性能调优深入理解MySQL底层原理、索引逻辑，数据结构与算法。使用Explain进行优化分析MVCC原理剖析日志机制解析2.框架源码掌握Spring底层原理带你手写一个Spring解析IOC、AOP源码、以及事务原理3.并发编程剖析Java底层锁机制CAS、JUC工具使用、AQS源码分析以及并发的集合类的讲解4.分布式开发剖析分布式中使用
  • 鸿蒙特效教程06-可拖拽网格 苏杰豪 鸿蒙特效教程HarmonyOSNextharmonyos鸿蒙华为
    鸿蒙特效教程06-可拖拽网格实现教程本教程适合HarmonyOSNext初学者，通过简单到复杂的步骤，一步步实现类似桌面APP中的可拖拽编辑效果。效果预览我们要实现的效果是一个Grid网格布局，用户可以通过长按并拖动来调整应用图标的位置顺序。拖拽完成后，底部会显示当前的排序结果。实现步骤步骤一：创建基本结构和数据模型首先，我们需要创建一个基本的页面结构和数据模型。我们将定义一个应用名称数组和一个对
  • JDK8新特性 陈天在睡觉 知识点总结JavaSEjavaJDK8javase八股文后端
    JDK8是官方发布的一个大版本,提供了很多新特性功能给开发者使用,包含语言、编译器、库、工具和JVM等方面的十多个新特性。本文将介绍编码过程中常用的一些新特性。一、Lambda表达式1.优点简化匿名内部类的写法，允许你以简洁的方式表示可传递给方法或存储在变量中的代码块，用更加简洁和表达性的语法来编写匿名函数，从而简化了对函数式接口的实现，使代码更加简洁紧凑。提高了代码的可读性和可维护性，尤其是在处
  • Java面试高频问题深度解析：JVM、锁机制、SQL优化与并发处理 Debug Your Career 面试java面试jvm
    问题列表Java中如何实现一个工作流引擎？Bean的作用域有哪些？JVM中的锁机制是如何工作的？三个方法分别被synchronized锁住，方法a调用方法b，b能获取到a的锁吗？会有什么问题？SQL优化时，EXPLAIN中需要关注哪些关键点？什么是覆盖索引？SELECT*一定不会命中索引吗？SELECT*和SELECT全字段在性能上有区别吗？什么是回表？它与索引有什么关系？100万数据分给10个线
  • \yii\queue\LogBehavior::class到底是什么？一共包含哪些部分？ 快点好好学习吧 Yii2.0android
    1.\yii\queue\LogBehavior::class到底是什么？想象一下，你在一家咖啡店：你需要记录每一笔订单的状态（如“已下单”、“正在制作”、“已完成”），以便后续追踪和排查问题。在Yii2的队列系统中，\yii\queue\LogBehavior就像是一个“日志记录员”，用于在队列任务执行的不同阶段记录日志信息。(1)核心概念定义：\yii\queue\LogBehavior是Yi
  • Yii::$app-＞queue-＞push到底如何使用？ 快点好好学习吧 Yii2.0android
    1.Yii::$app->queue->push是什么？想象一下，你在一家咖啡店：你需要将每一笔订单（任务）放入“待处理队列”中，由后厨按照顺序处理。在Yii2中，Yii::$app->queue->push就像是这个“放入队列”的操作，用于将任务推送到队列系统中，等待异步处理。(1)核心概念定义：Yii::$app->queue->push是Yii2队列扩展中的一个方法，用于将任务推送到队列中。
  • JavaScript基础-DOM的一些基本常用语法 Southern Wind JavaScriptjavascript
    总结了一下JS一直到DOM中所用的单词的用法输入方式：window.prompt('请输入数据');输出方式：1、window.alert('HelloJavaScript');2、console.log输出到控制台3、输出数据到页面document.write('hello')JavaScript数据类型1、基本类型string：字符型number：数值型boolean：布尔型2、特殊类型und
  • C#基础学习（二）C#数组生存手册：从入门到“血压拉满“的奇妙旅程 FAREWELL00075 c#学习开发语言数组Array
    作为一只C#萌新，当你试图用数组装下整个世界时，系统可能会温柔地弹出一句**"Indexwasoutsidetheboundsofthearray."**。别慌！这份求生指南将用段子教你玩转数组一、数组是什么数组简单来说就是由相同元素组成的一个集合，数组里面不一定是数，还可能是bool,string等类型组成的集合。那么他有些什么特点呢：本质：装着相同类型元素的集装箱（比如一箱肥宅快乐水）特性：长
  • CopyOnWriteArrayList详解 重生之我在成电转码 java开发语言集合
    1️⃣什么是CopyOnWriteArrayList？java.util.concurrent包下的线程安全的List读多写少场景下的性能优选核心思想：写时复制（Copy-On-Write）2️⃣底层原理内部维护一个volatileObject[]array读操作：直接读取数组，不加锁，性能极高写操作（增删改）：加ReentrantLock互斥锁把原数组复制一份新数组在新数组上操作操作完成后，替换
  • binlog和redolog 重生之我在成电转码 javamysql日志
    好的！这两个是MySQL面试核心知识点，下面详细解释：✅一、概念区分内容binlog（归档日志）redolog（重做日志）属于MySQL层（Server层）InnoDB存储引擎层作用记录所有修改数据库的数据操作（逻辑日志）保障事务的持久性（崩溃后可恢复数据）存储内容SQL语句或事件（INSERT、UPDATE、DELETE）物理页修改（物理日志）写入时机执行完SQL后写入执行SQL时先写入落盘时机
  • 笔记：代码随想录算法训练营day60：并查集理论基础、寻找存在的路径 jingjingjing1111 笔记
    本文为学习并查集理论基础|代码随想录、代码随想录过程中的思考find是找的顶头上司，而不是当前上司，最后怎么也得找到一个顶头上司的上司是自己，要不然这个结构也不成立使用issame替换会使被操作者为当前节点，而非根节点。join(u,v)的功能为将v的根节点挂到u的根节点下模拟过程可以看出，join中的find中的路径压缩要在长度大于2（路径大于1）的时候才会体现出来107.寻找存在的路径卡码网题
  • Android一个APP里面最少有几个线程 积跬步DEV Android开发实战大全Android
    Android应用启动时，默认会创建一个进程，该进程中最少包含5个系统自动创建的线程，具体如下：Main线程（主线程/UI线程）负责处理用户交互、UI更新等核心操作，所有与界面相关的逻辑必须在此线程执行。若在此线程执行耗时操作（如网络请求），会导致界面卡顿甚至触发ANR（应用无响应）。FinalizerDaemon线程（终结者守护线程）当对象重写了finalize()方法时，该线程负责将这些对象放
  • 计算机基础：编码04，认识反码和补码 水饺编程 MFC学习笔记Win32学习笔记windowsc++mfcc语言
    专栏导航本节文章分别属于《Win32学习笔记》和《MFC学习笔记》两个专栏，故划分为两个专栏导航。读者可以自行选择前往哪个专栏。（一）WIn32专栏导航上一篇：计算机基础：编码03，根据十进制数，求其原码回到目录下一篇：无（二）MFC专栏导航上一篇：计算机基础：编码03，根据十进制数，求其原码回到目录下一篇：无本节前言在前两节，我讲解了关于原码的知识。本节，我来讲解反码和补码。在学习本节之前，你需
  • Linux系统编程：目录操作、文件权限与库管理 网恋东雪莲被骗114514 linux运维服务器
    Linux系统编程：目录操作、文件权限与库管理目录的读取在Linux系统编程中，目录操作是常见的任务之一。以下是用于目录操作的核心函数及其用法：1.opendir功能：打开一个目录，返回指向目录流的指针。原型：#includeDIR*opendir(constchar*name);参数：name：目录路径字符串。返回值：成功：返回DIR*指针；失败返回NULL。示例：DIR*dir=opendir
  • leetcode-hot100-python-专题三：滑动窗口 ༺ Dorothy ༻ leetcodehot100leetcodepython算法
    1、无重复字符的最长子串中等给定一个字符串s，请你找出其中不含有重复字符的最长子串的长度。示例1:输入:s=“abcabcbb”输出:3解释:因为无重复字符的最长子串是“abc”，所以其长度为3示例2:输入:s=“bbbbb”输出:1解释:因为无重复字符的最长子串是“b”，所以其长度为1。示例3:输入:s=“pwwkew”输出:3解释:因为无重复字符的最长子串是“wke”，所以其长度为3。请注意，
  • Uni-App 双栏联动滚动组件开发详解 (电梯导航) FFF-X uni-app
    本文基于提供的代码实现一个左右联动的滚动组件，以下是详细的代码解析与实现原理说明：{{item}}{{section.title}}{{para}}exportdefault{//组件参数定义props:{leftData:{//左侧导航数据type:Array,default:()=>['章节1','章节2','章节3','章节4','章节5','章节6'],},rightData:{//右侧内
  • 【access开发】导入excel 并生成表 Access开发易登软件 vbaAccess开发Excelhtmlvbaaccessexcel前端access数据库低代码
    hi，大家好呀！最近天气越来越暖了，在这个春暖花开的季节了，每天心情应该都是美美的，正所谓一年之计在于春，在这个美好的季节，大家一起努力学习学习吧！那我们来看看今天学点啥呢？大家在刚接触access时，很多都是excel的高手，学习的过程中，总会想着，怎么把现在的excel数据导入到access，那这个时候该怎么来操作呢？如果是新手，那肯定是导入excel就可以了，那如果你是一个爱show技术的e
  • JavaScript基础-删除事件（解绑事件） 難釋懷 javascript前端开发语言
    在现代Web开发中，动态地添加和移除事件处理器是构建交互式网页的关键技能之一。虽然添加事件处理器相对直观，但了解如何有效地移除或“解绑”这些处理器同样重要。这不仅有助于优化性能，还能防止潜在的内存泄漏问题。本文将介绍几种方法来删除JavaScript中的事件处理器，并探讨它们的应用场景及最佳实践。一、为什么需要删除事件？随着页面复杂度的增加，不恰当地管理事件处理器可能会导致性能下降或出现意外行为。
  • C++缺省参数函数重载 ConFig. c++算法数据结构
    缺省参数大家知道什么是备胎吗？C++中函数的参数也可以配备胎。3.1缺省参数概念缺省参数是声明或定义函数时为函数的参数指定一个默认值。在调用该函数时，如果没有指定实参则采用该默认值，否则使用指定的实参。voidTestFunc(inta=0){cout_a=(int*)malloc(sizeof(int)*capacity);ps->_top=0;ps->_capacity=capacity;}i
  • form的表单序列化 码田里的小白菜 ajax服务器javascript
    百度可知：表单序列化的作用是：将表单内容序列化成一个字符串，方便Ajax传递表单值给服务器。随着Ajax的出现，表单序列化成为一种常见需求序列化应满足以下几点要求：1、对表单字段和值进行url编码，使用&符号分割2、不发送表单的禁用字段3、只发送选则的复选框和单选按钮4、不发送type为“reset”和“button”的按钮functionserialize(data){letlist=[];Ob
  • 使用Python构建去中心化预测市场：从概念到实现 Echo_Wish Python！实战！python去中心化开发语言
    使用Python构建去中心化预测市场：从概念到实现大家好，我是Echo_Wish。今天，我们将深入探讨一个前沿的区块链应用——去中心化预测市场，并学习如何使用Python来构建一个简易的预测市场平台。预测市场是基于市场参与者对未来事件的预测来产生结果的地方，通常被用来预测政治事件、金融市场走向、体育比赛结果等。传统的预测市场如Augur、Polymarket等，基于去中心化平台，利用区块链技术确保
  • RocketMQ学习-Springboot整合RocketMQ wechatt_fee1024 面试mavenspringbootjava
    SpringBoot整合RocketMQ需要注意的是SpringBoot的starter集成包时，要注意版本。因为SpringBoot集成的RocketMQ的starter依赖由Spring社区提供，迭代比较快，版本之间的差异还是比较大的。可能版本不同，就导致使用的时候出现错误。maven依赖,直接把我的maven工程的配置放到这里了。普通消息maven工程创建我直接创建了一个空的maven工程，
  • Python自动登陆、登出南京理工大学NJUST校园网程序 JimesMz python开发语言
    本文程序针对南京理工大学NJUST和NJUST-FREE校园网开发，其他学校无法使用。文章目录开发目的使用说明参考资料开发目的今天突然想要用代码实现一下自动登陆校园网，上网搜寻了一下。知乎有一些教程，CSDN也有一些完整的代码，但是我跟随教程或者直接运行现有代码都没有能够成功登陆，且NJUST校园网付费，我想要一个“登出”功能，借助Kimi自己写了一下。本人技术不精，以实现功能为主。使用说明请确保
  • uniapp 返回上一页 刷新数据 林发和 uni-appjavascript前端
    2种情况，第一种是按钮等事件手动返回上一页，采用事件通知：子页面：uni.$emit('refreshIfNeeded',true)uni.navigateBack({delta:1,})上一个页面onShow(()=>{console.log('onShow')//获取传值uni.$on('refreshIfNeeded',function(dat){console.log('监听到事件来自re
  • 没想到枚举Enum类还能实现接口！教你玩转Java枚举Enum 林发和 Java干货分享java
    枚举是什么？枚举是一种特殊的数据类型，预先定义一组常量（对象），并且必须为其赋值。Java枚举类型的基本想法非常简单：这些类通过共有的静态final域为每个枚举常量导出一个实例。枚举类型没有可以访问的构造器，所以它是真的final类。客户端不能创建枚举类型的实例，也不能对它进行扩展，因此不存实例，而只存在声明过程的枚举常量。也就是枚举类型是实例受控的。它们是单例（Singleton）的范型化，本质
  • jQuery 键盘事件keydown ,keypress ,keyup介绍 107x jsjquerykeydownkeypresskeyup
    本文章总结了下些关于jQuery 键盘事件keydown ,keypress ,keyup介绍，有需要了解的朋友可参考。 一、首先需要知道的是： 1、keydown() keydown事件会在键盘按下时触发. 2、keyup()  代码如下 复制代码 $('input').keyup(funciton(){      
  • AngularJS中的Promise bijian1013 JavaScriptAngularJSPromise
    一.Promise         Promise是一个接口，它用来处理的对象具有这样的特点：在未来某一时刻（主要是异步调用）会从服务端返回或者被填充属性。其核心是，promise是一个带有then()函数的对象。         为了展示它的优点，下面来看一个例子，其中需要获取用户当前的配置文件： var cu
  • c++ 用数组实现栈类 CrazyMizzz 数据结构C++
    #include<iostream> #include<cassert> using namespace std; template<class T, int SIZE = 50> class Stack{ private: T list[SIZE];//数组存放栈的元素 int top;//栈顶位置 public: Stack(
  • java和c语言的雷同 麦田的设计者 java递归scaner
    软件启动时的初始化代码，加载用户信息2015年5月27号 从头学java二 1、语言的三种基本结构：顺序、选择、循环。废话不多说，需要指出一下几点：      a、return语句的功能除了作为函数返回值以外，还起到结束本函数的功能，return后的语句 不会再继续执行。      b、for循环相比于whi
  • LINUX环境并发服务器的三种实现模型 被触发 linux
    服务器设计技术有很多，按使用的协议来分有TCP服务器和UDP服务器。按处理方式来分有循环服务器和并发服务器。 1  循环服务器与并发服务器模型 在网络程序里面，一般来说都是许多客户对应一个服务器，为了处理客户的请求，对服务端的程序就提出了特殊的要求。 目前最常用的服务器模型有： ·循环服务器：服务器在同一时刻只能响应一个客户端的请求 ·并发服务器：服
  • Oracle数据库查询指令 肆无忌惮_ oracle数据库
    20140920   单表查询 -- 查询************************************************************************************************************ -- 使用scott用户登录   -- 查看emp表   desc emp  
  • ext右下角浮动窗口 知了ing JavaScriptext
    第一种 <!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/
  • 浅谈REDIS数据库的键值设计 矮蛋蛋 redis
    http://www.cnblogs.com/aidandan/ 原文地址：http://www.hoterran.info/redis_kv_design 丰富的数据结构使得redis的设计非常的有趣。不像关系型数据库那样，DEV和DBA需要深度沟通，review每行sql语句，也不像memcached那样，不需要DBA的参与。redis的DBA需要熟悉数据结构，并能了解使用场景。
  • maven编译可执行jar包 alleni123 maven
    http://stackoverflow.com/questions/574594/how-can-i-create-an-executable-jar-with-dependencies-using-maven <build> <plugins> <plugin> <artifactId>maven-asse
  • 人力资源在现代企业中的作用 百合不是茶 HR 企业管理
    //人力资源在在企业中的作用人力资源为什么会存在，人力资源究竟是干什么的 人力资源管理是对管理模式一次大的创新，人力资源兴起的原因有以下点： 工业时代的国际化竞争，现代市场的风险管控等等。所以人力资源 在现代经济竞争中的优势明显的存在，人力资源在集团类公司中存在着 明显的优势(鸿海集团)，有一次笔者亲自去体验过红海集团的招聘，只 知道人力资源是管理企业招聘的 当时我被招聘上了，当时给我们培训 的人
  • Linux自启动设置详解 bijian1013 linux
    linux有自己一套完整的启动体系，抓住了linux启动的脉络，linux的启动过程将不再神秘。 阅读之前建议先看一下附图。 本文中假设inittab中设置的init tree为： /etc/rc.d/rc0.d /etc/rc.d/rc1.d /etc/rc.d/rc2.d /etc/rc.d/rc3.d /etc/rc.d/rc4.d /etc/rc.d/rc5.d /etc
  • Spring Aop Schema实现 bijian1013 javaspringAOP
    本例使用的是Spring2.5 1.Aop配置文件spring-aop.xml <?xml version="1.0" encoding="UTF-8"?> <beans xmlns="http://www.springframework.org/schema/beans" xmln
  • 【Gson七】Gson预定义类型适配器 bit1129 gson
    Gson提供了丰富的预定义类型适配器，在对象和JSON串之间进行序列化和反序列化时，指定对象和字符串之间的转换方式，   DateTypeAdapter   public final class DateTypeAdapter extends TypeAdapter<Date> { public static final TypeAdapterFacto
  • 【Spark八十八】Spark Streaming累加器操作（updateStateByKey) bit1129 update
    在实时计算的实际应用中，有时除了需要关心一个时间间隔内的数据，有时还可能会对整个实时计算的所有时间间隔内产生的相关数据进行统计。 比如： 对Nginx的access.log实时监控请求404时，有时除了需要统计某个时间间隔内出现的次数，有时还需要统计一整天出现了多少次404，也就是说404监控横跨多个时间间隔。   Spark Streaming的解决方案是累加器，工作原理是，定义
  • linux系统下通过shell脚本快速找到哪个进程在写文件 ronin47
    一个文件正在被进程写 我想查看这个进程 文件一直在增大 找不到谁在写 使用lsof也没找到 这个问题挺有普遍性的，解决方法应该很多，这里我给大家提个比较直观的方法。 linux下每个文件都会在某个块设备上存放，当然也都有相应的inode, 那么透过vfs.write我们就可以知道谁在不停的写入特定的设备上的inode。 幸运的是systemtap的安装包里带了inodewatch.stp，位
  • java-两种方法求第一个最长的可重复子串 bylijinnan java算法
    import java.util.Arrays; import java.util.Collections; import java.util.List; public class MaxPrefix { public static void main(String[] args) { String str="abbdabcdabcx";
  • Netty源码学习-ServerBootstrap启动及事件处理过程 bylijinnan javanetty
    Netty是采用了Reactor模式的多线程版本，建议先看下面这篇文章了解一下Reactor模式： http://bylijinnan.iteye.com/blog/1992325 Netty的启动及事件处理的流程，基本上是按照上面这篇文章来走的 文章里面提到的操作，每一步都能在Netty里面找到对应的代码 其中Reactor里面的Acceptor就对应Netty的ServerBo
  • servelt filter listener 的生命周期 cngolon filterlistenerservelt生命周期
    1. servlet    当第一次请求一个servlet资源时，servlet容器创建这个servlet实例，并调用他的 init(ServletConfig config)做一些初始化的工作，然后调用它的service方法处理请求。当第二次请求这个servlet资源时，servlet容器就不在创建实例，而是直接调用它的service方法处理请求，也就是说
  • jmpopups获取input元素值 ctrain JavaScript
    jmpopups 获取弹出层form表单 首先，我有一个div，里面包含了一个表单，默认是隐藏的，使用jmpopups时，会弹出这个隐藏的div，其实jmpopups是将我们的代码生成一份拷贝。 当我直接获取这个form表单中的文本框时，使用方法：$('#form input[name=test1]').val()；这样是获取不到的。 我们必须到jmpopups生成的代码中去查找这个值，$(
  • vi查找替换命令详解 daizj linux正则表达式替换查找vim
    一、查找 查找命令 /pattern<Enter> ：向下查找pattern匹配字符串 ?pattern<Enter>：向上查找pattern匹配字符串 使用了查找命令之后，使用如下两个键快速查找： n：按照同一方向继续查找 N：按照反方向查找 字符串匹配 pattern是需要匹配的字符串，例如： 1:  /abc<En
  • 对网站中的js,css文件进行打包 dcj3sjt126com PHP打包
    一，为什么要用smarty进行打包 apache中也有给js,css这样的静态文件进行打包压缩的模块，但是本文所说的不是以这种方式进行的打包，而是和smarty结合的方式来把网站中的js,css文件进行打包。 为什么要进行打包呢，主要目的是为了合理的管理自己的代码 。现在有好多网站，你查看一下网站的源码的话，你会发现网站的头部有大量的JS文件和CSS文件，网站的尾部也有可能有大量的J
  • php Yii: 出现undefined offset 或者 undefined index解决方案 dcj3sjt126com undefined
    在开发Yii 时，在程序中定义了如下方式：        if($this->menuoption[2] === 'test')，那么在运行程序时会报：undefined offset:2，这样的错误主要是由于php.ini 里的错误等级太高了，在windows下错误等级
  • linux 文件格式（1） sed工具 eksliang linuxlinux sed工具sed工具linux sed详解
    转载请出自出处： http://eksliang.iteye.com/blog/2106082 简介       sed 是一种在线编辑器，它一次处理一行内容。处理时，把当前处理的行存储在临时缓冲区中，称为“模式空间”（pattern space），接着用sed命令处理缓冲区中的内容，处理完成后，把缓冲区的内容送往屏幕。接着处理下一行，这样不断重复，直到文件末尾
  • Android应用程序获取系统权限 gqdy365 android
    引用 如何使Android应用程序获取系统权限         第一个方法简单点，不过需要在Android系统源码的环境下用make来编译：         1. 在应用程序的AndroidManifest.xml中的manifest节点
  • HoverTree开发日志之验证码 hvt .netC#asp.nethovertreewebform
    HoverTree是一个ASP.NET的开源CMS，目前包含文章系统，图库和留言板功能。代码完全开放，文章内容页生成了静态的HTM页面，留言板提供留言审核功能，文章可以发布HTML源代码，图片上传同时生成高品质缩略图。推出之后得到许多网友的支持，再此表示感谢！留言板不断收到许多有益留言，但同时也有不少广告，因此决定在提交留言页面增加验证码功能。ASP.NET验证码在网上找，如果不是很多，就是特别多
  • JSON API：用 JSON 构建 API 的标准指南中文版 justjavac json
    译文地址：https://github.com/justjavac/json-api-zh_CN 如果你和你的团队曾经争论过使用什么方式构建合理 JSON 响应格式， 那么 JSON API 就是你的 anti-bikeshedding 武器。 通过遵循共同的约定，可以提高开发效率，利用更普遍的工具，可以是你更加专注于开发重点：你的程序。 基于 JSON API 的客户端还能够充分利用缓存，
  • 数据结构随记_2 lx.asymmetric 数据结构笔记
    第三章 栈与队列 一．简答题 1. 在一个循环队列中，队首指针指向队首元素的  前一个    位置。  2.在具有n个单元的循环队列中，队满时共有  n-1  个元素。  3. 向栈中压入元素的操作是先  移动栈顶指针&n
  • Linux下的监控工具dstat 网络接口 linux
    1) 工具说明dstat是一个用来替换 vmstat,iostat netstat,nfsstat和ifstat这些命令的工具, 是一个全能系统信息统计工具. 与sysstat相比, dstat拥有一个彩色的界面, 在手动观察性能状况时, 数据比较显眼容易观察; 而且dstat支持即时刷新, 譬如输入dstat 3, 即每三秒收集一次, 但最新的数据都会每秒刷新显示. 和sysstat相同的是,
  • C 语言初级入门--二维数组和指针 1140566087 二维数组c/c++指针
    /* 二维数组的定义和二维数组元素的引用 二维数组的定义： 当数组中的每个元素带有两个下标时，称这样的数组为二维数组； (逻辑上把数组看成一个具有行和列的表格或一个矩阵); 语法： 类型名 数组名[常量表达式1][常量表达式2] 二维数组的引用： 引用二维数组元素时必须带有两个下标，引用形式如下： 例如： int a[3][4];  引用：
  • 10点睛Spring4.1-Application Event wiselyman application
    10.1 Application Event Spring使用Application Event给bean之间的消息通讯提供了手段 应按照如下部分实现bean之间的消息通讯 继承ApplicationEvent类实现自己的事件 实现继承ApplicationListener接口实现监听事件 使用ApplicationContext发布消息
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他