秋天code
秋天code

【GitHub前端练手项目50天50个项目】--day06--图片模糊加载效果

GitHub热门前端练手项目，纯HTML、CSS、JS实现，50天50个项目，每日一个项目，打卡活动，解读项目中的知识点
GitHub项目官网连接
50Projects in 50 Days

项目展示

实现一个模糊加载的效果，当加载到100%时，图片清晰度正常

源码

HTML

DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link rel="stylesheet" href="style.css" />
  <title>Blurry Loadingtitle>
head>

<body>
  <section class="bg">section>
  <div class="loading-text">0%div>

  <script src="script.js">script>
body>

html>

CSS

@import url('https://fonts.googleapis.com/css?family=Ubuntu');

* {
  box-sizing: border-box;
}

body {
  font-family: 'Ubuntu', sans-serif;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  overflow: hidden;
  margin: 0;
}

.bg {
  background: url('https://images.unsplash.com/photo-1576161787924-01bb08dad4a4?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2104&q=80') no-repeat center center/cover;
  position: absolute;
  top: -30px;
  left: -30px;
  width: calc(100vw + 60px);
  height: calc(100vh + 60px);
  z-index: -1;
  filter: blur(0px);
}

.loading-text {
  font-size: 50px;
  color: #fff;
}

JS

const loadText = document.querySelector('.loading-text')
const bg = document.querySelector('.bg')

let load = 0

let int = setInterval(blurring, 30)

function blurring() {
  load++

  if (load > 99) {
    clearInterval(int)
  }
  loadText.innerText = `${load}%`
  loadText.style.opacity = scale(load, 0, 100, 1, 0)
  bg.style.filter = `blur(${scale(load, 0, 100, 30, 0)}px)`
}

// https://stackoverflow.com/questions/10756313/javascript-jquery-map-a-range-of-numbers-to-another-range-of-numbers
const scale = (num, in_min, in_max, out_min, out_max) => {
  return ((num - in_min) * (out_max - out_min)) / (in_max - in_min) + out_min
}

知识点总结

CSS部分

CSS滤镜

CSS 中实现滤镜效果需要通过 filter 属性并配合一些函数来实现

https://www.runoob.com/cssref/css3-pr-filter.html

filter属性可以为元素添加滤镜效果，例如图像、文字等

<img src="../background-slider/IMG_20210603_191954.jpg" alt="">
<style>
        img {
            width: 50%;
            height: 50%;
            filter: blur(10px);
        }
style>

函数还有：

  • blur(px)设置高斯模糊，数值越大越模糊

  • brightness(%)调整图片亮度，0%，图像全黑，100%图像无变化，超过100%会更亮

  • contrast(%)，调整图像的对比度，值是0%，图像全灰，100%图像不变，超过100%，对比度更高

  • saturate(%)，转换图像饱和度，0%完全不饱和，100%图像无变化，超过100%饱和度增大

  • grayscale(%)，转换为灰度图像，0%图像无变化，100%图像完全灰色

  • drop-shadow(x,y,blur,color)，给图像设置一个阴影效果，阴影是合成在图像下面，指定阴影的位置(x,y)，阴影的模糊程度blur()，阴影的扩展范围spread，阴影的颜色color

    filter: drop-shadow(30px 10px 4px #4444dd);

滤镜是支持叠加的，使用多个滤镜，给图像带来不一样的效果

filter: drop-shadow(20px 10px 5px rgb(53, 153, 56)) contrast(150%) blur(10px)

补充： 如果body设置了背景图片，那么对于body的filter就不会生效

你可能感兴趣的:(GitHub50天50项目,前端,css,javascript)

  • 从零创建一个 Django 项目 m0_74824823 面试学习路线阿里巴巴djangopython后端
    1.准备环境在开始之前，确保你的开发环境满足以下要求：安装了Python(推荐3.8或更高版本)。安装pip包管理工具。如果要使用MySQL或PostgreSQL，确保对应的数据库已安装。创建虚拟环境在项目目录中创建并激活虚拟环境，保证项目依赖隔离：#创建虚拟环境python-mvenvenv#激活虚拟环境#WindowsenvScriptsactivate#Linux/Macsourceenv/
  • web第三次作业 天宇&嘘月 前端cssjavascript
    CSS样式*{margin:0;padding:0;box-sizing:border-box;}html,body{width:100%;height:100%;}.container{width:100%;height:100%;background-color:#f2f1f2;}header{width:1200px;height:50px;background-color:#fff;mar
  • 代码随想录打卡第五十一天 zengy5 代码随想录刷题流程深度优先算法图论c++leetcode
    代码随想录–图论部分day51图论第二天文章目录代码随想录--图论部分一、卡码网99--岛屿数量二、卡码网100--岛屿的最大面积一、卡码网99–岛屿数量代码随想录题目链接：代码随想录给定一个由1（陆地）和0（水）组成的矩阵，你需要计算岛屿的数量。岛屿由水平方向或垂直方向上相邻的陆地连接而成，并且四周都是水域。你可以假设矩阵外均被水包围。没太看懂教程的解法，所以这里是自己的做法正常把图存进来，遍历
  • php glob 排序,php 使用 Glob() 查找文件技巧 weixin_39770311 phpglob排序
    php使用Glob()查找文件技巧定义和用法glob()函数返回匹配指定模式的文件名或目录该函数返回一个包含有匹配文件/目录的数组如果出错返回false参数描述file必需。规定检索模式。size可选。规定特殊的设定。GLOB_MARK-在每个返回的项目中加一个斜线GLOB_NOSORT-按照文件在目录中出现的原始顺序返回(不排序)GLOB_NOCHECK-如果没有文件匹配则返回用于搜索的模式GL
  • 自动化测试的学习路线 Ws＿ 学习
    自动化测试是提高软件开发效率和质量的关键手段。学习自动化测试通常涉及多个方面的技能，从基础的编程语言知识到测试工具的使用，再到实际的测试脚本编写和执行。以下是一个学习自动化测试的路线图，帮助你有条不紊地掌握相关技能：1.基础知识在开始自动化测试之前，首先要具备一定的编程和软件测试基础：编程语言：Python、Java、JavaScript或者Ruby（根据你选择的自动化测试工具决定）软件测试基础：
  • 通义灵码AI程序员 天天向上杰 AI编程AIGC人工智能
    通义灵码是阿里云与通义实验室联合打造的智能编码辅助工具，基于通义大模型技术，为开发者提供多种编程辅助功能。它支持多种编程语言，包括Java、Python、Go、TypeScript、JavaScript、C/C++、PHP、C#、Ruby等200多种编码语言。通义灵码AI程序员：今年1月，通义灵码AI程序员全面上线，同时支持VSCode、JetBrainsIDEs，是国内首个真正落地的AI程序员。
  • rem、em、vw区别 IT木昜 大白话前端面试题前端javascriptcss
    在前端开发里，rem、em、vw都是用来设置元素大小的单位，下面就用大白话讲讲它们的区别。参考标准不一样rem：就像大家都用同一把“大尺子”来量东西，这把“大尺子”就是网页里根元素（也就是标签）的字体大小。不管元素在网页里的哪个位置，只要用rem做单位，它的大小就按照这把“大尺子”来算。比如根元素字体大小是16px，那么1rem就是16px，2rem就是32px。em：每个元素自己有一把“小尺子”
  • 【无标题】 是懒羊羊吖～ 笔记
    一.WED前端应用软件：c/s架构b/s架构web前端：html5css3javascripthtml5：超文本标记语言----超链接，文字，标签标签语法规范：结束-----双标签标签体------可以嵌套inputimg---------单标签属性：定制元素的行为，属性是不通用的，每一个标签存在自身的属性，当属性名等于属性值时,只需要写属性名，不需要写属性值。二.HTML1.样式//文档声明：告
  • 【TOGAF系列】架构开发方法（ADF）第十一章 东临碣石82 架构
    第11章：G阶段：实施治理11.1目标G阶段的目标是：确保实施项目符合目标架构为解决方案和任何实施驱动的架构变更请求执行适当的架构治理功能11.2输入本节定义了阶段G的输入。11.2.1企业外部参考资料架构参考资料（见TOGAF标准——架构内容）11.2.2非架构输入架构工作请求（见TOGAF标准——架构内容）能力评估（见TOGAF标准——架构内容）11.2.3架构输入■企业架构的组织模型（见TO
  • ASUS/华硕无畏Pro15 M6500Q 原厂Win11 21H2 家庭版系统 工厂文件 带ASUS Recovery恢复 无限的奇迹 电脑
    华硕工厂文件恢复系统，安装结束后带隐藏分区，带一键恢复，以及机器所有的驱动和软件。支持型号：M6500QB,M6500QH系统版本：Windows1121H2文件下载：点击下载文件格式：工厂文件安装教程：点击查看需准备一个20G以上u盘进行恢复请注意：仅支持以上型号专用，其他华硕机器切勿使用
  • python图形界面化编程GUI（二）常用的组件(Text、Radiobutton、Checkbutton、Canvas)和布局管理器(gird、pack、place) hwwaizs python-GUI图形化编程python开发语言
    Text文本框Text(多行文本框)的主要用于显示多行文本，还可以显示网页链接,图片,HTML页面,甚至CSS样式表，添加组件等。主要用来显示信息，也常被当做简单的文本处理器、⽂本编辑器或者网页浏览器来使用。IDLE就是Text组件构成的。insert插入的时候可以用INSERT代表当前光标的位置，END代表在结尾的位置，也可以用插入小数的形式，2.3代表第二行第三列后插入。fromtkinter
  • c语言迷宫小游戏350行（源码） 迷茫&&前行 c语言c语言游戏
    这是一款基于控制台的双模式迷宫冒险游戏。在极限逃脱模式中，玩家需操控角色"A"在三个精心设计的关卡中躲避追踪者"B"，通过WASD键在100步限制内抵达终点"@"，关卡包含特殊地形和动态敌人机制。无尽挑战模式则采用随机生成的渐进式迷宫，每关迷宫尺寸随等级扩大，玩家需在无限扩展的迷宫中不断挑战。游戏提供可视化操作界面，通过方向键控制移动，支持中途退出功能（o)。两种模式分别提供3个固定关卡和无限递增
  • 项目目标与范围管理 2301_82243709 visualstudio
    项目目标与范围管理是项目管理的基石，它涉及确定项目的目标、边界和工作内容1。在项目启动阶段，项目经理需要与利益相关者共同明确项目的目标、预期成果和关键里程碑，以确保项目的方向正确。范围管理还包括对项目变更的控制，以防止范围蔓延导致的项目失败。应用：在项目初期，制定详细的项目章程和范围说明书，明确项目的目标、范围、可交付成果和验收标准。在项目执行过程中，严格监控范围变更，确保所有变更都经过正式批准并
  • 商城项目秒杀通过Redisson设置信号量和秒杀随机码的设计保证秒杀业务稳定-----商城项目 旧约Alatus 电商项目#Spring-Boot框架#Spring-Cloud框架springboot分布式springspringcloud后端微服务jvm
    packagecom.alatus.mall.seckill.service.impl;importcom.alatus.common.utils.R;importcom.alatus.mall.seckill.constant.SecKillConstants;importcom.alatus.mall.seckill.feign.CouponFeignService;importcom.ala
  • 如何制定高效的项目执行计划表？掌握这些关键步骤！ 项目管理
    项目执行计划表是项目管理中不可或缺的重要工具，它为项目团队提供了清晰的路线图和执行指南。一个高效的项目执行计划表不仅能够明确项目目标、任务分工和时间节点，还能够有效协调资源，提高团队协作效率，确保项目按时、高质量地完成。本文将深入探讨如何制定一份高效的项目执行计划表，帮助您掌握关键步骤，提升项目管理水平。明确项目目标和范围制定项目执行计划表的第一步是明确项目目标和范围。这个阶段需要与相关stake
  • 如何高效进行项目计划生产？ 项目管理
    在当今竞争激烈的商业环境中，项目计划生产已成为企业成功的关键因素。高效的项目计划生产不仅能够提高工作效率，还能降低风险、优化资源配置，为企业带来显著的经济效益。本文将深入探讨如何高效进行项目计划生产，为企业管理者和项目负责人提供实用的指导和建议。明确项目目标和范围高效的项目计划生产始于明确的目标和范围界定。这一阶段需要与相关stakeholders进行充分沟通，确保项目目标与公司战略相一致。同时，
  • tailwindcss4.0 升级后的一个坑 tailwindcss
    tailwindcss4.0升级了，用了vite的方式，因为主UI框架用的antdv，结果出现了antdv组件自身的css比tailwindcss的优先级高的情况。发现tailwindcss的类都被layer了，而这个layer的特性就是比平常的css优先级要低，考虑到antdv还不能把自身css套上layer（antd好像可以），所以只能把tailwind的layer去掉了，也是为了一些老的ui
  • 《计算机组成及汇编语言原理》阅读笔记：p1-p8 编程
    《计算机组成及汇编语言原理》学习第1天，p1-p8总结，总计8页。一、技术总结1.Intel8088microprocessor(微处理器)，1979-1988。2.MS-DOSMicrosoftDiskOperatingSystem的缩写，是一个操作系统(operatingsystem)。3.Moore'sLaw&Moore'ssecondlaw(1)Moore'slawThenumberoft
  • 关于启动vue项目，出现：Error [ERR_MODULE_NOT_FOUND]: Cannot find module ‘xxx‘此类错误 zkkkkkkkkkkkkk vuevuenode.jsnpm
    目录一、问题报错二、原因分析三、解决方法一、问题报错node环境变量配置有问题：(base)xxx@M73H-15:~/VueProject/pproject-vue$npmrundev/usr/bin/env:“node”:没有那个文件或目录vue项目启动有问题：(base)xxx:~/VueProject/pproject-vue$npmrundev>[email protected]
  • 兄弟们，我的deepseek终于可以控制浏览器了：Part 1/n，含代码 几道之旅 Dify：智能体（Agent）工作流知识库全搞定几道之旅AI专栏VVVIP人工智能
    文章目录前言helloworld前言其实，deepseek控制浏览器咱之前就发过，只不过当时没有想到这么好的标题，哈哈。所依赖的，依然是BrowserUse这个项目BrowserUse项目官网helloworld按照官网配置好环境后，只需新建一个python文件（例如，叫main.py?）然后运行即可。fromlangchain_openaiimportChatOpenAIfrombrowser_
  • Linux操作系统：个人云存储服务搭建开发 暮雨哀尘 Linux的那点事linux运维服务器大数据集群技术nginxmysql
    个人云存储服务搭建开发文档一、项目目标搭建一个类似Dropbox的个人云存储服务，实现文件的同步和备份功能，确保数据的安全性和便捷性。二、技术栈操作系统：Linux（推荐使用UbuntuServer或CentOS）云存储软件：Nextcloud或SeafileWeb服务器：Apache或Nginx数据库：MySQL或MariaDBSSL证书：自签名证书或Let'sEncrypt免费证书三、搭建步骤
  • 百度地图显示多个infoWindow信息窗口时只展示最后一条数据 射手buff 前端百度
    这两天遇到一个问题，百度地图在循环加载多个信息窗口的时候所有的窗口显示的都是最后一条数据的内容效果如下：如图所示两个信息窗口都是一样的值，代码如下$.ajax({type:"POST",url:"../api/zhandian.json",success:function(res){vardata=res.data;for(vari=0;i联系电话："+data[i].phone,opts);//
  • 技术分享：MyBatis SQL 日志解析脚本 ￡漫步 云端彡 运维趣分享sqljavamybatis日志解析
    技术分享：MyBatisSQL日志解析脚本1.脚本功能概述2.实现细节2.1HTML结构2.2JavaScript逻辑3.脚本代码4.使用方法4.1示例5.总结在日常开发中，使用MyBatis作为持久层框架时，我们经常需要查看SQL日志以调试和优化查询。然而，MyBatis的日志输出通常包含占位符和参数信息，这使得直接执行这些SQL语句变得困难。为了解决这个问题，我们开发了一个简单的HTML和Ja
  • 技术爱好者不容错过！探秘 Thrive 现代化博客管理系统 秋野酱 前端课程设计java开源javaspringbootvue.js课程设计
    探索ThriveX：现代化博客管理系统的技术与实现在当今数字化时代，知识的分享与交流变得愈发重要。对于技术爱好者和从业者而言，一个优质的博客管理系统不仅是知识输出的窗口，更是思想碰撞的平台。今天，让我们一同走进ThriveX，领略其独特的魅力。一、开源助力，点亮项目之星开源的道路充满艰辛与挑战，每一段代码都凝聚着开发者的心血。如果您在了解ThriveX的过程中有所收获，不妨花费短短10秒钟，为这个
  • Tomcat 8 安装包下载 m0_74824517 面试学习路线阿里巴巴tomcatjava
    Tomcat8安装包下载【下载地址】Tomcat8安装包下载本仓库提供了一个包含Windows和Linux版本的Tomcat8安装包，方便用户快速下载并部署Tomcat8服务器[这里是图片001]项目地址:https://gitcode.com/open-source-toolkit/fda7c简介本仓库提供了一个包含Windows和Linux版本的Tomcat8安装包，方便用户快速下载并部署To
  • 前端：纯前端快速实现html导出word和pdf m0_74823715 前端htmlword
    实现html导出word，需要使用两个库。html-docx-js和file-saver导出word的js方法>npminstallhtml-docx-js>npminstallfile-saverjs引入importFileSaverfrom“file-saver”;importhtmlDocxfrom“html-docx-js/dist/html-docx”;/**导出word方法*/expo
  • FPGA设计怎么学？薪资前景好吗？ 博览鸿蒙 FPGAfpga开发
    FPGA前端设计和各岗位之间有着很多联系，是一个薪资待遇高，前景发展好的岗位。但这个岗位的门槛也比较高，很多人不知道怎么学习，下面就和宸极教育一起来了解一下吧。数字前端设计必备技能1、熟悉数字电路设计2、熟悉Verilog或VHDL3、熟悉异步电路设计4、熟悉FIFO的设计5、熟悉UNIX系统及其工具的使用6、熟悉脚本语言Perl、Shell、Tcl等7、熟悉C/C++语言、SystemVeril
  • 游戏引擎学习第112天 虾球xz 游戏引擎学习java
    黑板：优化今天的内容是关于优化的，主要讨论了如何在开发中提高代码的效率，尤其是当游戏的帧率出现问题时。优化并不总是要将代码做到最快，而是要确保代码足够高效，以避免性能问题。优化的过程是一个反复迭代的过程，目标是找到一个“足够好”的解决方案，而不是追求极致优化。优化的第一步并不是直接优化代码，而是要进行测量和分析。这一步很重要，因为只有了解代码的表现和瓶颈，才能有效地进行优化。测量代码的性能，确定哪
  • Linux-ISCSI DC_BLOG Linuxlinux服务器
    文章目录iSCSIiSCSI配置作者主页：点击！Linux专栏：点击！⏰️创作时间：2025年02月17日19点50分iSCSI协议是没有同步机制的，要想解决同步机制，需要配置集群文件系统或者是分布式文件系统，防止数据不同步的问题iSCSI基于IP协议的技术标准，该技术允许用户通过TCP/IP网络来构建SANiSCCI的基本组成使用3260端口进行传输iSCCI会话的建立是通过启动器（Initat
  • Vue-纯前端导出word文档 2501_90252408 前端vue.jsword
    varbuf=doc.getZip().generate({type:‘nodebuffer’});//bufisanodejsbuffer,youcaneitherwriteittoafileordoanythingelsewithit.fs.writeFileSync(path.resolve(__dirname,‘output.docx’),buf);####jszip-utils[jszi
  • java数字签名三种方式 知了ing javajdk
    以下3钟数字签名都是基于jdk7的 1，RSA String password="test"; // 1.初始化密钥 KeyPairGenerator keyPairGenerator = KeyPairGenerator.getInstance("RSA"); keyPairGenerator.initialize(51
  • Hibernate学习笔记 caoyong Hibernate
    1>、Hibernate是数据访问层框架，是一个ORM(Object Relation Mapping)框架，作者为:Gavin King 2>、搭建Hibernate的开发环境      a>、添加jar包:      aa>、hibernatte开发包中/lib/required/所
  • 设计模式之装饰器模式Decorator（结构型） 漂泊一剑客 Decorator
    1. 概述        若你从事过面向对象开发，实现给一个类或对象增加行为，使用继承机制，这是所有面向对象语言的一个基本特性。如果已经存在的一个类缺少某些方法，或者须要给方法添加更多的功能（魅力），你也许会仅仅继承这个类来产生一个新类—这建立在额外的代码上。      
  • 读取磁盘文件txt，并输入String 一炮送你回车库 String
    public static void main(String[] args) throws IOException {    String fileContent = readFileContent("d:/aaa.txt");    System.out.println(fileContent);   
  • js三级联动下拉框 3213213333332132 三级联动
    //三级联动 省/直辖市<select id="province"></select> 市/省直辖<select id="city"></select> 县/区 <select id="area"></select>
  • erlang之parse_transform编译选项的应用 616050468 parse_transform游戏服务器属性同步abstract_code
             最近使用erlang重构了游戏服务器的所有代码，之前看过C++/lua写的服务器引擎代码，引擎实现了玩家属性自动同步给前端和增量更新玩家数据到数据库的功能，这也是现在很多游戏服务器的优化方向，在引擎层面去解决数据同步和数据持久化，数据发生变化了业务层不需要关心怎么去同步给前端。由于游戏过程中玩家每个业务中玩家数据更改的量其实是很少
  • JAVA JSON的解析 darkranger java
    // { // “Total”：“条数”， // Code: 1, // // “PaymentItems”:[ // { // “PaymentItemID”:”支款单ID”, // “PaymentCode”:”支款单编号”, // “PaymentTime”:”支款日期”, // ”ContractNo”:”合同号”， //
  • POJ-1273-Drainage Ditches aijuans ACM_POJ
    POJ-1273-Drainage Ditches http://poj.org/problem?id=1273 基本的最大流，按LRJ的白书写的 #include<iostream> #include<cstring> #include<queue> using namespace std; #define INF 0x7fffffff int ma
  • 工作流Activiti5表的命名及含义 atongyeye 工作流Activiti
    activiti5 - http://activiti.org/designer/update在线插件安装 activiti5一共23张表 Activiti的表都以ACT_开头。 第二部分是表示表的用途的两个字母标识。 用途也和服务的API对应。 ACT_RE_*: 'RE'表示repository。 这个前缀的表包含了流程定义和流程静态资源 （图片，规则，等等）。 A
  • android的广播机制和广播的简单使用 百合不是茶 android广播机制广播的注册
          Android广播机制简介 在Android中，有一些操作完成以后，会发送广播，比如说发出一条短信，或打出一个电话，如果某个程序接收了这个广播，就会做相应的处理。这个广播跟我们传统意义中的电台广播有些相似之处。之所以叫做广播，就是因为它只负责“说”而不管你“听不听”，也就是不管你接收方如何处理。另外，广播可以被不只一个应用程序所接收，当然也可能不被任何应
  • Spring事务传播行为详解 bijian1013 javaspring事务传播行为
            在service类前加上@Transactional，声明这个service所有方法需要事务管理。每一个业务方法开始时都会打开一个事务。         Spring默认情况下会对运行期例外(RunTimeException)进行事务回滚。这
  • eidtplus operate 征客丶 eidtplus
    开启列模式: Alt+C 鼠标选择   OR   Alt+鼠标左键拖动 列模式替换或复制内容(多行): 右键-->格式-->填充所选内容-->选择相应操作 OR Ctrl+Shift+V(复制多行数据,必须行数一致) -------------------------------------------------------
  • 【Kafka一】Kafka入门 bit1129 kafka
    这篇文章来自Spark集成Kafka(http://bit1129.iteye.com/blog/2174765)，这里把它单独取出来，作为Kafka的入门吧   下载Kafka http://mirror.bit.edu.cn/apache/kafka/0.8.1.1/kafka_2.10-0.8.1.1.tgz 2.10表示Scala的版本，而0.8.1.1表示Kafka
  • Spring 事务实现机制 BlueSkator spring代理事务
    Spring是以代理的方式实现对事务的管理。我们在Action中所使用的Service对象，其实是代理对象的实例，并不是我们所写的Service对象实例。既然是两个不同的对象，那为什么我们在Action中可以象使用Service对象一样的使用代理对象呢？为了说明问题，假设有个Service类叫AService，它的Spring事务代理类为AProxyService，AService实现了一个接口
  • bootstrap源码学习与示例：bootstrap-dropdown（转帖） BreakingBad bootstrapdropdown
    bootstrap-dropdown组件是个烂东西，我读后的整体感觉。 一个下拉开菜单的设计： <ul class="nav pull-right"> <li id="fat-menu" class="dropdown">
  • 读《研磨设计模式》-代码笔记-中介者模式-Mediator bylijinnan java设计模式
    声明： 本文只为方便我个人查阅和理解，详细的分析以及源代码请移步 原作者的博客http://chjavach.iteye.com/ /* * 中介者模式（Mediator）：用一个中介对象来封装一系列的对象交互。 * 中介者使各对象不需要显式地相互引用，从而使其耦合松散，而且可以独立地改变它们之间的交互。 * * 在我看来，Mediator模式是把多个对象（
  • 常用代码记录 chenjunt3 UIExcelJ#
      1、单据设置某行或某字段不能修改 //i是行号,"cash"是字段名称 getBillCardPanelWrapper().getBillCardPanel().getBillModel().setCellEditable(i, "cash", false); //取得单据表体所有项用以上语句做循环就能设置整行了 getBillC
  • 搜索引擎与工作流引擎 comsci 算法工作搜索引擎网络应用
          最近在公司做和搜索有关的工作，(只是简单的应用开源工具集成到自己的产品中)工作流系统的进一步设计暂时放在一边了，偶然看到谷歌的研究员吴军写的数学之美系列中的搜索引擎与图论这篇文章中的介绍，我发现这样一个关系(仅仅是猜想)   -----搜索引擎和流程引擎的基础--都是图论，至少像在我在JWFD中引擎算法中用到的是自定义的广度优先
  • oracle Health Monitor daizj oracleHealth Monitor
    About Health Monitor Beginning with Release 11g, Oracle Database includes a framework called Health Monitor for running diagnostic checks on the database. About Health Monitor Checks Health M
  • JSON字符串转换为对象 dieslrae javajson
        作为前言,首先是要吐槽一下公司的脑残编译部署方式,web和core分开部署本来没什么问题,但是这丫居然不把json的包作为基础包而作为web的包,导致了core端不能使用,而且我们的core是可以当web来用的(不要在意这些细节),所以在core中处理json串就是个问题.没办法,跟编译那帮人也扯不清楚,只有自己写json的解析了.   
  • C语言学习八结构体，综合应用，学生管理系统 dcj3sjt126com C语言
    实现功能的代码： # include <stdio.h> # include <malloc.h> struct Student { int age; float score; char name[100]; }; int main(void) { int len; struct Student * pArr; int i,
  • vagrant学习笔记 dcj3sjt126com vagrant
    想了解多主机是如何定义和使用的, 所以又学习了一遍vagrant   1. vagrant virtualbox 下载安装 https://www.vagrantup.com/downloads.html https://www.virtualbox.org/wiki/Downloads   查看安装在命令行输入vagrant     2.
  • 14.性能优化-优化-软件配置优化 frank1234 软件配置性能优化
    1.Tomcat线程池 修改tomcat的server.xml文件： <Connector port="8080" protocol="HTTP/1.1" connectionTimeout="20000" redirectPort="8443" maxThreads="1200" m
  • 一个不错的shell 脚本教程 入门级 HarborChung linuxshell
    一个不错的shell 脚本教程 入门级 建立一个脚本 　　Linux中有好多中不同的shell，但是通常我们使用bash (bourne again shell) 进行shell编程，因为bash是免费的并且很容易使用。所以在本文中笔者所提供的脚本都是使用bash（但是在大多数情况下，这些脚本同样可以在 bash的大姐，bourne shell中运行）。 　　如同其他语言一样
  • Spring4新特性——核心容器的其他改进 jinnianshilongnian spring动态代理spring4依赖注入
    Spring4新特性——泛型限定式依赖注入 Spring4新特性——核心容器的其他改进 Spring4新特性——Web开发的增强 Spring4新特性——集成Bean Validation 1.1(JSR-349)到SpringMVC  Spring4新特性——Groovy Bean定义DSL Spring4新特性——更好的Java泛型操作API  Spring4新
  • Linux设置tomcat开机启动 liuxingguome tomcatlinux开机自启动
    执行命令sudo gedit /etc/init.d/tomcat6 然后把以下英文部分复制过去。（注意第一句#!/bin/sh如果不写，就不是一个shell文件。然后将对应的jdk和tomcat换成你自己的目录就行了。 #!/bin/bash # # /etc/rc.d/init.d/tomcat # init script for tomcat precesses
  • 第13章 Ajax进阶（下） onestopweb Ajax
    index.html <!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/
  • Troubleshooting Crystal Reports off BW blueoxygen BO
    http://wiki.sdn.sap.com/wiki/display/BOBJ/Troubleshooting+Crystal+Reports+off+BW#TroubleshootingCrystalReportsoffBW-TracingBOE   Quite useful, especially this part: SAP BW connectivity For t
  • Java开发熟手该当心的11个错误 tomcat_oracle javajvm多线程单元测试
    #1、不在属性文件或XML文件中外化配置属性。比如，没有把批处理使用的线程数设置成可在属性文件中配置。你的批处理程序无论在DEV环境中，还是UAT（用户验收 测试）环境中，都可以顺畅无阻地运行，但是一旦部署在PROD 上，把它作为多线程程序处理更大的数据集时，就会抛出IOException，原因可能是JDBC驱动版本不同，也可能是#2中讨论的问题。如果线程数目 可以在属性文件中配置，那么使它成为
  • 正则表达式大全 yang852220741 html编程正则表达式
    今天向大家分享正则表达式大全，它可以大提高你的工作效率 正则表达式也可以被当作是一门语言，当你学习一门新的编程语言的时候，他们是一个小的子语言。初看时觉得它没有任何的意义，但是很多时候，你不得不阅读一些教程，或文章来理解这些简单的描述模式。 一、校验数字的表达式 数字：^[0-9]*$ n位的数字：^\d{n}$ 至少n位的数字：^\d{n,}$ m-n位的数字：^\d{m,n}$
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他