格式化小拓
格式化小拓

day44-Custom Range Slider（自定义范围滑块）

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

day44-Custom Range Slider（自定义范围滑块）

效果

day44-Custom Range Slider（自定义范围滑块）_第1张图片

day44-Custom Range Slider（自定义范围滑块）_第2张图片

index.html

DOCTYPE html>
<html lang="en">

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

<body>
    <h2>自定义范围滑块h2>
    
    <div class="range-container">
        <input type="range" id="range" min="0" max="100">
        <label for="range">50label>
    div>

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

html>

style.css

@import url('https://fonts.googleapis.com/css?family=Lato&display=swap');

* {
    box-sizing: border-box;
}

body {
    background-image: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
    font-family: 'Lato', sans-serif;
    /* 子元素竖直居中 */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100vh;
    overflow: hidden;
    margin: 0;
}

/* 标题 */
h2 {
    position: absolute;
    top: 10px;
}

/* 滑块容器 */
.range-container {
    position: relative;
}

/* 滑块 */
input[type='range'] {
    width: 300px;
    margin: 18px 0;
    /* 不要显示默认的滑动条外观。 */
    appearance: none;
    outline: none;
}

/* 一个input元素的type属性为range的滑动条（range input）后面紧跟的label元素应用样式。 */
input[type='range']+label {
    background-color: #fff;
    /* 子绝父相 */
    position: absolute;
    top: -25px;
    left: 110px;
    width: 80px;
    padding: 5px 0;
    text-align: center;
    border-radius: 4px;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
}

/* Chrome & Safari 浏览器下滑动条的样式*/
/* 选择滑动条的“轨道”部分。 */
input[type='range']::-webkit-slider-runnable-track {
    background: purple;
    border-radius: 4px;
    width: 100%;
    height: 10px;
    cursor: pointer;
}

/* 用于修改滑动条（input元素的type属性为range）滑块（thumb） */
input[type='range']::-webkit-slider-thumb {
    -webkit-appearance: none;
    height: 24px;
    width: 24px;
    background: #fff;
    border-radius: 50%;
    border: 1px solid purple;
    margin-top: -7px;
    cursor: pointer;
}

/* Firefox */
input[type='range']::-moz-range-track {
    background: purple;
    border-radius: 4px;
    width: 100%;
    height: 13px;
    cursor: pointer;
}

input[type='range']::-moz-range-thumb {
    appearance: none;
    height: 24px;
    width: 24px;
    background: #fff;
    border-radius: 50%;
    border: 1px solid purple;
    margin-top: -7px;
    cursor: pointer;
}

/* IE */
input[type='range']::-ms-track {
    background: purple;
    border-radius: 4px;
    width: 100%;
    height: 13px;
    cursor: pointer;
}

input[type='range']::-ms-thumb {
    appearance: none;
    height: 24px;
    width: 24px;
    background: #fff;
    border-radius: 50%;
    border: 1px solid purple;
    margin-top: -7px;
    cursor: pointer;
}

script.js

// 重点 flex position   offsetWidth
// 滑块位于label的正下方
// 1.获取元素节点
const range = document.getElementById('range')//滑动条
// 2.绑定输入事件
range.addEventListener('input', (e) => {
    const value = +e.target.value//+号将其变为数字型
    const label = e.target.nextElementSibling//就是label标签，展示数据

    const num_width = e.target.offsetWidth
    // console.log(num_width)//300
    const num_label_width = label.offsetWidth
    // console.log(num_label_width)//80

    const max = +e.target.max//100
    const min = +e.target.min//0
    // (num_width / max) 一个比例
    // value * (num_width / max) 用于控制label的滑动
    // 接下来的用于控制 滑块位于label的正下方
    // num_label_width / 2  滑块位于label的下方一半
    // scale(value, min, max, 12, -12) 用于控制是否在label的正下方
    // 12是滑块的宽度的一半
    let left = value * (num_width / max) - num_label_width / 2 + scale(value, min, max, 12, -12)

    label.style.left = `${left}px`

    label.innerHTML = value
})
// 将一个范围内的数映射到另一个范围内的数
// 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) / (in_max - in_min) * (out_max - out_min) + out_min;
}

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

  • 《伴时匣》app开发技术分享--表单提交准备（4） 鸿蒙小林 鸿蒙端云一体化harmonyos
    技术栈Appgalleryconnect开发准备上一节我们实现了用户登录功能，现在我们进入首页，可以开始准备着手发布我们的日期计划了，在这之前我们先实现信息表的创建。在首页实现一个标题栏，一个悬浮的按钮。功能分析我们的信息表要展示的内容很多，首先是我们的事件名称，目标日期选择，公历农历，正数倒数，倒数类目的选择，是否实现置顶效果，是否显示精确时间，事件颜色，事件图标，事件心情，事件天气，跟用户绑定
  • yum 报错解决记录 孤高飘云影 linuxcentos运维
    创建一个虚拟机，在安装yum源的时候，执行到yummakecahce的时候，报如下的错误：解决方式：1、执行如下命令修改fastestmirror.conf的配置参数sed-i"s|enabled=1|enabled=0|g"/etc/yum/pluginconf.d/fastestmirror.conf2、备份一下原yum源文件mv/etc/yum.repos.d/CentOS-Base.rep
  • LGTM？Github中那些迷之缩写 SunTecTec github
    PR:PullRequest.拉取请求，给其他项目提交代码LGTM:LooksGoodToMe.朕知道了代码已经过review，可以合并SGTM:SoundsGoodToMe.和上面那句意思差不多，也是已经通过了review的意思WIP:WorkInProgress.传说中提PR的最佳实践是，如果你有个改动很大的PR，可以在写了一部分的情况下先提交，但是在标题里写上WIP，以告诉项目维护者这个功能
  • Dify实现图文混排的智能问答实践 一望无际的大草原 Dify高级应用工作总结Agent数据分析agent智能客服
    最近在做类似于各大平台中广泛应用的智能客服，相当于基于各平台的用户操作手册，业务流程场景等文档资料，开发一个类似于智能客服的自动化问答应用。主要基于dify进行开发，但对数据有些特殊要求，之前大家做的都是基于文本的，结合大模型返回的结果主要也是文本信息，这种方式不够直观全面，也有信息丢失，同时，一般这些资料中都包含了大量的图文结合内容，很多问题的答复需要结合图像进行答复更加直观，因此对其进行简单的
  • 苍穹外面Day10 guslegend python数据库java
    SpringTaskSpringTask是Spring框架提供的任务调度工具，可以按照约定的时间自动执行某个代码逻辑。定位：定时任务框架作用：定时自动执行某段Java代码cron表达式cron表达式其实就是一个字符串，通过cron表达式可以定义任务触发的时间构成规则：分为6或7个域，由空格分隔开，每个域代表一个含义每个域的含义分别为：秒、分钟、小时、日、月、周、年(可选)举例：2022年10月12
  • 用万用表测量（TO-220）NMOS管的好坏 MingYue_SSS 元器件好坏测量嵌入式硬件经验分享笔记学习
    第一步：用镊子或表笔短接MOS管的三个引脚，进行放电。第二步：万用表选择二极管档位。短接表笔，发出蜂鸣声说明万用表没问题。第三步：测量MOS管体二极管的好坏。用万用表测量2脚和3脚，正向导通，反向截至表示MOS管为好的。反之则是坏的。红表笔(+)测3脚源极S，黑表笔(-)测2脚漏极D，正常有一个导通压降，万用表数值在0.4V—0.9V左右。红表笔(+)测2脚漏极D，黑表笔(-)测3脚源极S，正常为
  • 关于JAVA中LIST元素修改的一个问题记录
    在工作中有遇到一个问题，需要从既有获取数据库中的LIST数据，做一下对其中部分数据做处理存入另外一个LIST集合之中，但是，有些现象还是比较出乎我的意料的，模拟了一下相关场景，具体的代码如下：packagecom.interview.demo;importjava.util.ArrayList;importjava.util.List;classStudent{privateStringname;
  • 服务器、树莓派/香橙派部署HomeAssistant与小爱音箱联动 不对法 物联网物联网
    HomeAssistant功能介绍与多平台部署实战：CentOS服务器、树莓派、香橙派部署及小爱音箱联动控制一、HomeAssistant简介HomeAssistant是一款基于Python开发的开源智能家居自动化平台，它最大的特点是高度集成和自定义。通过HomeAssistant，用户可以将不同品牌、不同协议的智能家居设备（如空调、电灯、传感器等）整合到一个统一的平台进行管理和控制，同时还支持通
  • 建议是先把base完全搞懂 weixin_47868976 Web云存储项目网络
    并发编程日志系统啥的我只了解了一点点直接从网络层入手这个项目可行么？底层base模块没搞懂从web开始合理么？你的担心很有道理！让我来分析一下学习路径的可行性，并给你一个合理的学习建议。一、项目依赖关系分析1.模块依赖层次application/(应用层)↓强依赖net/(网络层)↓强依赖base/(基础层)↓强依赖系统调用(LinuxAPI)2.具体依赖关系Rantool从依赖分析可以看出，网络
  • Redisson 的 “看门狗 dj_master Redis服务器数据库java
    Redisson的“看门狗（WatchDog）”机制是其针对Redis分布式锁实现的一个重要优化，用于解决分布式锁因业务执行时间过长，锁自动过期释放，导致锁失效的问题。下面从原理、作用、工作机制等方面详细介绍：一、背景：分布式锁的过期问题在使用Redis实现分布式锁时，通常会给锁设置一个过期时间（比如setIfAbsent加过期时间），防止持有锁的客户端因故障（如程序崩溃、网络阻塞）无法释放锁，导
  • 机器学习算法——神经网络1（神经元模型）
    神经网络是由具有适应性的简单单元组成的广泛并行互连的网络，它的组织能够模拟生物神经系统对真实世界物体所作出的交互反应。神经网络中最基本的成分是神经元（neuron）模型。即上述定义中的“简单单元”。在生物神经网络中，每个神经元与其他申请元相连，当它“兴奋”时，就会向相连的神经元发送化学物质，从而改变这些神经元内的电位；如果某神经元的电位超过一个“阈值”，那么它就会被激活，即“兴奋”起来，向其他神经
  • SpringBoot+WebSocket实现直播连麦 雨轩智能 java及Linux相关教程springbootwebsocket后端
    一、引言随着互联网技术的发展，直播已成为一种主流的内容传播形式。其中，连麦功能作为直播互动的重要手段，能够有效提升用户参与感和观看体验。本文将介绍如何使用SpringBoot和WebSocket技术构建一个直播连麦系统，实现主播与观众之间的实时音视频交流和文字聊天功能。为了方便DEMO的运行，本系统基于纯内存操作实现核心业务逻辑，不依赖外部数据库或者缓存组件。二、技术设计2.1技术栈后端：Spri
  • R语言入门课| 05 一文掌握R语言常见数据类型 Biomamba生信基地 r语言信息可视化开发语言生信医药
    视频教程大家可以先做一做R语言基础小测验，看看自己是否需要跟我们5.5h入门R语言的课程。先上教程视频，B站同步播出：https://www.bilibili.com/video/BV1miNVeWEkw完整视频回放和答疑服务可见：5.5h入门R语言本节课程视频：（点击此处查看）"R语言入门课"是我们认为生信小白入门不得不听的一个课程，我们也为这个课程准备了许多干货。R语言的精髓便是数据处理，在本
  • Linux下使用C语言实现线程池---代码及分析 唐·柯里昂798 linuxlinuxc语言javaubuntucentosunix笔记
    线程池相关文章协议Socket编程高并发服务器实现线程池如果一个客户端建立连接使用创建一个线程用于处理这一个线程,处理结束的时候把这一个线程删除,这个时候会导致线程的创建以及销毁会消耗大量的时间这时候可以一次性创建多个线程,这几个线程统称线程池,如果客户端建立一个连接,线程池分配一个线程处理客户发过来的数据,不处理的时候这几个线程阻塞可以使用条件变量进行阻塞线程的数量可以随着连接的个数,时间等条件
  • 数据库-事务 ruleslol springspringjdbc
    一、什么是事务？在执行SQL语句的时候，某些业务要求，一系列操作必须全部执行，而不能仅执行一部分。例如，一个转账操作：--从id=1的账户给id=2的账户转账100元--第一步：将id=1的A账户余额减去100UPDATEaccountsSETbalance=balance-100WHEREid=1;--第二步：将id=2的B账户余额加上100UPDATEaccountsSETbalance=ba
  • Mac 快捷键 快乐的一只小喵喵 macmacos
    总结一下Mac快捷键的图形符号：Mac中主要有四个修饰键，分别是Command，Control，Option和Shift。转存失败重新上传取消END基本的快捷键Command是Mac里最重要的修饰键，在大多数情况下相当于Windows下的Ctrl。所以以下最基本操作很好理解：Command-Z撤销Command-X剪切Command-C拷贝（Copy）Command-V粘贴Command-A全选（
  • MySQL(107)如何进行分片查询？ 辞暮尔尔-烟火年年 MySQLmysql数据库
    进行分片查询时，需要根据分片键确定查询应在哪些分片上执行。分片查询的复杂性在于需要处理跨分片查询的情况。以下是一个更为详细的示例，展示如何在分片数据库中进行查询，并结合Java代码进行实现。1.环境准备假设我们继续使用SpringBoot和MySQL，且需要查询的表是orders表。我们已经有了分片的数据库环境和数据源配置。2.项目依赖在pom.xml中添加必要的依赖：org.springfram
  • Linux【7】------Linux系统编程（进程间通信IPC） Invinciblenuonuo linux多进程进程间通信
    文章目录1信号1.1信号类型1.2信号含义1.3信号产生按键硬件异常调用接口发送指令内核检测1.4信号处理默认捕捉忽略1.5信号阻塞1.6信号挂起2消息队列2.1概念2.2创建消息队列2.3访问消息队列2.4控制消息队列3共享内存3.1申请共享内存3.2共享内存映射3.3控制共享内存3.4信号量3.5操作信号量1信号信号是一种异步通信方式同步通信同步指的是当进程发起一个请求，但是该请求并未马上响应
  • 人脸识别常用数据集和Loss JL_Jessie 人脸识别深度学习
    人脸识别数据集数据集的noise对训练效果的影响很大！很长一段时间MegaFace的效果都上不去，就是因为数据集噪声的原因。而且自己在训练人脸的时候，如果不对数据集的噪声和属性有一点了解，对训练结果可能会有误判，甚至越训练越差…在选择数据集的时候不要一味求大，有的时候选择一个noise比例极高的大数据集，效果还不如选择一个clean的小数据集呢，可以参见这篇论文TheDevilofFaceReco
  • 【分治算法】【Python实现】Strassen矩阵乘法 「已注销」 #分治算法分治算法Python
    文章目录@[toc]问题描述基础算法时间复杂性Strassen算法时间复杂性问题时间复杂性Python实现个人主页：丷从心·系列专栏：分治算法学习指南：算法学习指南问题描述设AAA和BBB是两个n×nn\timesnn×n矩阵，AAA和BBB的乘积矩阵CCC中元素cij=∑k=1naikbkjc_{ij}=\displaystyle\sum\limits_{k=1}^{n}{a_{ik}b_{kj
  • 半导体器件仿真：光电器件仿真_（6）.光电二极管仿真 kkchenkx 信号仿真2信号处理信息可视化
    光电二极管仿真1.引言光电二极管是一种能够将光能转换为电能的半导体器件。在光通信、图像传感器、光检测器和太阳能电池等领域有广泛的应用。光电二极管的仿真可以帮助设计者了解器件的工作原理、性能参数以及优化设计。本节将详细介绍光电二极管的仿真原理和步骤，包括器件结构、物理模型、仿真软件的使用方法以及具体的仿真案例。2.光电二极管的基本结构和工作原理2.1器件结构光电二极管通常由一个PN结或PIN结组成。
  • 4-AI-业务与MCP协议结合-MCPServer实战 小沛9 人工智能javaAI编程
    一、介绍本章节会开发一个简单的MCP的服务。目前的步骤是先开发一个简单的MCP的SSE模式的server集成到大模型中。后面会演示stdio模式。注册到Nacos中（重点探索模式）、将HTTP接口配置成MCP的server。大概会从这几个方面进行演示。二、Server代码展示1、POM文件org.springframework.bootspring-boot-starter-actuatororg
  • N-P准则下的多传感器融合(python) 不会打架的锤子 机器学习自动化算法算法pythonvscode
    本文设计了一个主程序：main_sensor_fusion，和一个函数程序：cal_fuse。主程序里面包含主干部分和绘图部分，函数程序包含数据生成函数gen，检测概率计算函数cal，非0逻辑矩阵函数No_zero_value，单传感器判决函数fus_seq，多传感融合函数fusion。需要的点赞私聊if__name__=="__main__":begin_time=time()#Measurep
  • NeRF-Pytorch：NeRF神经辐射场复现——Pytorch版全流程分析与测试【Ubuntu20.04】【2025最新版！！！】 那就举个栗子！ 三维重建计算机视觉人工智能
    一、引言在计算机视觉和计算机图形学的交叉领域中，视图合成（ViewSynthesis）一直是一个充满挑战的研究方向。传统的三维重建方法往往需要复杂的几何建模和纹理映射过程，而且在处理复杂光照和材质时效果有限。2020年，来自UCBerkeley的研究团队提出了NeuralRadianceFields（NeRF），这一革命性的方法彻底改变了我们对三维场景表示和渲染的理解。NeRF的核心思想是将三维场
  • 字节跳动Java开发面试题及参考答案（综合篇） 大模型大数据攻城狮 java后端面试大厂面试大厂校招加密算法nacos线程池
    HTTP与HTTPS的区别？HTTP（超文本传输协议）和HTTPS（超文本传输安全协议）主要有以下区别。从安全性角度看，HTTP是明文传输协议，数据在网络中传输时是以原始文本的形式发送的。这就好比在信件传递过程中没有进行密封，任何中间节点（如路由器、代理服务器等）都可以查看信件内容。例如，用户登录一个网站时发送的用户名和密码信息，如果是通过HTTP协议传输，很容易被窃取。而HTTPS是加密的安全协
  • 道可云人工智能每日资讯｜江苏首个机器人训练中心在苏州吴江启动 道可云 道可云人工智能人工智能机器人arDeepSeekxr百度
    道可云人工智能&元宇宙每日简报（2025年6月26日）讯，今日人工智能&元宇宙新鲜事有：江苏首个机器人训练中心在苏州吴江启动近日，长三角一体化示范区智能机器人训练中心在东太湖度假区（太湖新城）正式启用，成为江苏省首个机器人智能训练中心。该中心占地1500平方米，设有8个训练场景和30个生产工位，涵盖智能制造、商业服务、特种应用三大领域，年产数据可超200万条，旨在加速机器人从实验室走向真实产业场景
  • pandas 优雅处理值类型为list的列的csv读写问题 Allocator Pythonpandaslistpython
    文章目录直接存储joinlist变成字符串存储json.dumps序列化存储以及json.loads反序列化读取总结之所以分析这个问题,是因为读者在跟第三方数据供应商对接数据的时候,老是会遇到数据加载都会出错的问题,其中一个原因就是list类型数据没有正确储存,于是笔者在这篇文章里面详细分析一下list数据怎么优雅的写入csv以及读取.直接存储第一种方法,直接存,不做任何转换defdirect_w
  • Python在自动驾驶中的多传感器融合——让智能汽车“看得更清楚” Echo_Wish Python！实战！python自动驾驶汽车
    Python在自动驾驶中的多传感器融合——让智能汽车“看得更清楚”在自动驾驶技术的演进过程中，多传感器融合（Multi-SensorFusion）是不可或缺的一环。单一传感器往往存在局限性，例如摄像头怕光线变化，激光雷达价格昂贵，毫米波雷达分辨率有限，但如果将它们结合起来，就能形成一个更全面、更可靠的环境感知系统。今天，我们就来聊聊如何用Python实现自动驾驶中的多传感器融合，并结合最新技术趋势
  • RNN人名分类器案例
    RNN人名分类器案例1任务目的：目的:给定一个人名，来判定这个人名属于哪个国家典型的文本分类任务:18分类---多分类任务2数据格式注意：两列数据，第一列是人名，第二列是国家类别，中间用制表符号"\t"隔开AngChineseAuYongChineseYuasaJapaneseYuharaJapaneseYunokawaJapanese3任务实现流程1.获取数据:案例中是直接给定的2.数据预处理:
  • Java AI 新纪元：Spring AI 与 Spring AI Alibaba 的崛起 小沛9 SpringAIAlibabaSpringAIjava人工智能springspringaiSAA
    此章节没什么营养，只是一个描述，同时也能看到AI的能力（文章基本都是AI进行生成的），小沛觉得开始不写点引言好像差了点什么东西，好像鱼离开了自行车。引言：AI时代对Java开发者的机遇与挑战，Java在AI领域的现状在当今技术飞速发展的时代，人工智能（AI）已不再是遥不可及的未来概念，而是深刻地融入到我们生活的方方面面，从智能推荐系统到自动驾驶，从自然语言处理到计算机视觉，AI正以前所未有的速度改
  • Enum 枚举 120153216 enum枚举
    原文地址：http://www.cnblogs.com/Kavlez/p/4268601.html Enumeration 于Java 1.5增加的enum type...enum type是由一组固定的常量组成的类型，比如四个季节、扑克花色。在出现enum type之前，通常用一组int常量表示枚举类型。比如这样： public static final int APPLE_FUJI = 0
  • Java8简明教程 bijian1013 javajdk1.8
            Java 8已于2014年3月18日正式发布了，新版本带来了诸多改进，包括Lambda表达式、Streams、日期时间API等等。本文就带你领略Java 8的全新特性。  一.允许在接口中有默认方法实现         Java 8 允许我们使用default关键字，为接口声明添
  • Oracle表维护 快速备份删除数据 cuisuqiang oracle索引快速备份删除
    我知道oracle表分区，不过那是数据库设计阶段的事情，目前是远水解不了近渴。 当前的数据库表，要求保留一个月数据，且表存在大量录入更新，不存在程序删除。 为了解决频繁查询和更新的瓶颈，我在oracle内根据需要创建了索引。但是随着数据量的增加，一个半月数据就要超千万，此时就算有索引，对高并发的查询和更新来说，让然有所拖累。 为了解决这个问题，我一般一个月会进行一次数据库维护，主要工作就是备
  • java多态内存分析 麦田的设计者 java内存分析多态原理接口和抽象类
          “  时针如果可以回头，熟悉那张脸，重温嬉戏这乐园，墙壁的松脱涂鸦已经褪色才明白存在的价值归于记忆。街角小店尚存在吗？这大时代会不会牵挂，过去现在花开怎么会等待。       但有种意外不管痛不痛都有伤害，光阴远远离开，那笑声徘徊与脑海。但这一秒可笑不再可爱，当天心
  • Xshell实现Windows上传文件到Linux主机 被触发 windows
    经常有这样的需求，我们在Windows下载的软件包，如何上传到远程Linux主机上？还有如何从Linux主机下载软件包到Windows下；之前我的做法现在看来好笨好繁琐，不过也达到了目的，笨人有本方法嘛； 我是怎么操作的： 1、打开一台本地Linux虚拟机，使用mount 挂载Windows的共享文件夹到Linux上，然后拷贝数据到Linux虚拟机里面；（经常第一步都不顺利，无法挂载Windo
  • 类的加载ClassLoader 肆无忌惮_ ClassLoader
    类加载器ClassLoader是用来将java的类加载到虚拟机中，类加载器负责读取class字节文件到内存中，并将它转为Class的对象（类对象），通过此实例的 newInstance()方法就可以创建出该类的一个对象。   其中重要的方法为findClass(String name)。   如何写一个自己的类加载器呢？ 首先写一个便于测试的类Student
  • html5写的玫瑰花 知了ing html5
    <html> <head> <title>I Love You!</title> <meta charset="utf-8" /> </head> <body> <canvas id="c"></canvas>
  • google的ConcurrentLinkedHashmap源代码解析 矮蛋蛋 LRU
    原文地址： http://janeky.iteye.com/blog/1534352 简述 ConcurrentLinkedHashMap 是google团队提供的一个容器。它有什么用呢？其实它本身是对 ConcurrentHashMap的封装，可以用来实现一个基于LRU策略的缓存。详细介绍可以参见 http://code.google.com/p/concurrentlinke
  • webservice获取访问服务的ip地址 alleni123 webservice
    1. 首先注入javax.xml.ws.WebServiceContext, @Resource private WebServiceContext context; 2. 在方法中获取交换请求的对象。 javax.xml.ws.handler.MessageContext mc=context.getMessageContext(); com.sun.net.http
  • 菜鸟的java基础提升之道——————>是否值得拥有 百合不是茶
    1，c++，java是面向对象编程的语言，将万事万物都看成是对象；java做一件事情关注的是人物，java是c++继承过来的，java没有直接更改地址的权限但是可以通过引用来传值操作地址，java也没有c++中繁琐的操作，java以其优越的可移植型，平台的安全型，高效性赢得了广泛的认同，全世界越来越多的人去学习java，我也是其中的一员      java组成：
  • 通过修改Linux服务自动启动指定应用程序 bijian1013 linux
    Linux中修改系统服务的命令是chkconfig (check config)，命令的详细解释如下: chkconfig 功能说明：检查，设置系统的各种服务。 语　　法：chkconfig [ -- add][ -- del][ -- list][系统服务] 或 chkconfig [ -- level  <</SPAN>
  • spring拦截器的一个简单实例 bijian1013 javaspring拦截器Interceptor
    Purview接口 package aop; public interface Purview { void checkLogin(); } Purview接口的实现类PurviesImpl.java package aop; public class PurviewImpl implements Purview { public void check
  • [Velocity二]自定义Velocity指令 bit1129 velocity
    什么是Velocity指令 在Velocity中，#set,#if, #foreach, #elseif, #parse等，以#开头的称之为指令，Velocity内置的这些指令可以用来做赋值，条件判断，循环控制等脚本语言必备的逻辑控制等语句，Velocity的指令是可扩展的，即用户可以根据实际的需要自定义Velocity指令   自定义指令(Directive)的一般步骤 &nbs
  • 【Hive十】Programming Hive学习笔记 bit1129 programming
    第二章 Getting Started 1.Hive最大的局限性是什么？一是不支持行级别的增删改(insert, delete, update)二是查询性能非常差(基于Hadoop MapReduce）,不适合延迟小的交互式任务三是不支持事务2. Hive MetaStore是干什么的？Hive persists table schemas and other system metadata.
  • nginx有选择性进行限制 ronin47 nginx 动静　限制
    http { limit_conn_zone $binary_remote_addr zone=addr:10m; limit_req_zone $binary_remote_addr zone=one:10m rate=5r/s;... server {... location ~.*\.(gif|png|css|js|icon)$ {
  • java-4.-在二元树中找出和为某一值的所有路径 . bylijinnan java
    /* * 0.use a TwoWayLinkedList to store the path.when the node can't be path,you should/can delete it. * 1.curSum==exceptedSum:if the lastNode is TreeNode,printPath();delete the node otherwise
  • Netty学习笔记 bylijinnan javanetty
    本文是阅读以下两篇文章时： http://seeallhearall.blogspot.com/2012/05/netty-tutorial-part-1-introduction-to.html http://seeallhearall.blogspot.com/2012/06/netty-tutorial-part-15-on-channel.html 我的一些笔记 ===
  • js获取项目路径 cngolon js
    //js获取项目根路径，如： http://localhost:8083/uimcardprj function getRootPath(){     //获取当前网址，如： http://localhost:8083/uimcardprj/share/meun.jsp     var curWwwPath=window.document.locati
  • oracle 的性能优化 cuishikuan oracleSQL Server
       在网上搜索了一些Oracle性能优化的文章，为了更加深层次的巩固[边写边记]，也为了可以随时查看，所以发表这篇文章。     1.ORACLE采用自下而上的顺序解析WHERE子句，根据这个原理，表之间的连接必须写在其他WHERE条件之前，那些可以过滤掉最大数量记录的条件必须写在WHERE子句的末尾。（这点本人曾经做过实例验证过，的确如此哦！
  • Shell变量和数组使用详解 daizj linuxshell变量数组
    Shell 变量 定义变量时，变量名不加美元符号（$，PHP语言中变量需要），如： your_name="w3cschool.cc" 注意，变量名和等号之间不能有空格，这可能和你熟悉的所有编程语言都不一样。同时，变量名的命名须遵循如下规则： 首个字符必须为字母（a-z，A-Z）。 中间不能有空格，可以使用下划线（_）。 不能使用标点符号。 不能使用ba
  • 编程中的一些概念，KISS、DRY、MVC、OOP、REST dcj3sjt126com REST
    KISS、DRY、MVC、OOP、REST （1）KISS是指Keep It Simple,Stupid（摘自wikipedia），指设计时要坚持简约原则，避免不必要的复杂化。 （2）DRY是指Don't Repeat Yourself（摘自wikipedia），特指在程序设计以及计算中避免重复代码，因为这样会降低灵活性、简洁性，并且可能导致代码之间的矛盾。 （3）OOP 即Object-Orie
  • [Android]设置Activity为全屏显示的两种方法 dcj3sjt126com Activity
    1. 方法1：AndroidManifest.xml 里，Activity的 android:theme  指定为" @android:style/Theme.NoTitleBar.Fullscreen" 示例:   <application      
  • solrcloud 部署方式比较 eksliang solrCloud
    solrcloud 的部署其实有两种方式可选，那么我们在实践开发中应该怎样选择呢？ 第一种：当启动solr服务器时，内嵌的启动一个Zookeeper服务器，然后将这些内嵌的Zookeeper服务器组成一个集群。  第二种：将Zookeeper服务器独立的配置一个集群，然后将solr交给Zookeeper进行管理   谈谈第一种：每启动一个solr服务器就内嵌的启动一个Zoo
  • Java synchronized关键字详解 gqdy365 synchronized
    转载自：http://www.cnblogs.com/mengdd/archive/2013/02/16/2913806.html 多线程的同步机制对资源进行加锁，使得在同一个时间，只有一个线程可以进行操作，同步用以解决多个线程同时访问时可能出现的问题。 同步机制可以使用synchronized关键字实现。 当synchronized关键字修饰一个方法的时候，该方法叫做同步方法。 当s
  • js实现登录时记住用户名 hw1287789687 记住我记住密码cookie记住用户名记住账号
    在页面中如何获取cookie值呢? 如果是JSP的话,可以通过servlet的对象request 获取cookie,可以 参考:http://hw1287789687.iteye.com/blog/2050040 如果要求登录页面是html呢?html页面中如何获取cookie呢? 直接上代码了 页面:loginInput.html 代码: <!DOCTYPE html PUB
  • 开发者必备的 Chrome 扩展 justjavac chrome
    Firebug：不用多介绍了吧https://chrome.google.com/webstore/detail/bmagokdooijbeehmkpknfglimnifench ChromeSnifferPlus：Chrome 探测器，可以探测正在使用的开源软件或者 js 类库https://chrome.google.com/webstore/detail/chrome-sniffer-pl
  • 算法机试题 李亚飞 java算法机试题
           在面试机试时，遇到一个算法题，当时没能写出来，最后是同学帮忙解决的。        这道题大致意思是：输入一个数，比如4,。这时会输出：           &n
  • 正确配置Linux系统ulimit值 字符串 ulimit
    在Linux下面部 署应用的时候，有时候会遇上Socket/File: Can’t open so many files的问题；这个值也会影响服务器的最大并发数，其实Linux是有文件句柄限制的，而且Linux默认不是很高，一般都是1024，生产服务器用 其实很容易就达到这个数量。下面说的是，如何通过正解配置来改正这个系统默认值。因为这个问题是我配置Nginx+php5时遇到了，所以我将这篇归纳进
  • hibernate调用返回游标的存储过程 Supanccy2013 javaDAOoracleHibernatejdbc
    注：原创作品，转载请注明出处。     上篇博文介绍的是hibernate调用返回单值的存储过程，本片博文说的是hibernate调用返回游标的存储过程。     此此扁博文的存储过程的功能相当于是jdbc调用select 的作用。 1，创建oracle中的包，并在该包中创建的游标类型。 ---创建oracle的程
  • Spring 4.2新特性-更简单的Application Event wiselyman application
    1.1 Application Event Spring 4.1的写法请参考10点睛Spring4.1-Application Event 请对比10点睛Spring4.1-Application Event 使用一个@EventListener取代了实现ApplicationListener接口,使耦合度降低; 1.2 示例 包依赖 <p
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他