坚持不懈的大白
坚持不懈的大白

前端:运用html+css+jquery.js实现截图游戏


前端:运用html+css+jquery.js实现截图游戏

        • 1. 前言
        • 2. 实现原理
        • 3. 参考代码和运行结果

1. 前言

最近在刷手机视频时，总是能刷到一个这样的视频，视频上是一个截图游戏，当图片上的某个片段正好在图片的正确位置时，暂停视频，截好图发到评论区，显示你很牛逼，哈哈。如果读者觉得小编这篇博客让读者学到了一些关于前端布局的知识，希望读者能点赞支持一下。
请添加图片描述，上述运行结果正好演示这个截图效果。

2. 实现原理

怎样把一张图片分成多个部分呢？个人觉得可以这样做，首先，需要创建对应多的标签元素，对于每一个标签元素，设置相应的宽度和高度，然后css样式中设置背景图片background-image，背景图片位置background-position-x、background-positon-y(经过计算即可)，这样就可以实现把一张图片分成多张小图片。关于这些对应多的标签元素，考虑使用li标签。关于li标签的布局，先把其父标签ul设置为相对定位(position:relative)，然后其子标签li标签使用绝对定位(position:absolute)，然后设置相应的top、left值即可。至于其中一个部分动的画面，使用定时器，定时器内部的函数操作这个部分的top、left值即可。
前端:运用html+css+jquery.js实现截图游戏_第1张图片
考虑使用原生的js代码实现上述效果，代码量会大一些，于是使用封装的js库jquery.js，关于代码中jquery的一些知识，小编在此讲述一下。

$(‘body ul li’)
上述是查找 html 中标签元素，如果标签元素是单个，使用.attr(属性名称)即可获取这个元素的相关属性，如果标签元素是多个，那么是获取查找的标签元素的第一个元素的相关属性。
.each((ele)=>{})是对查找的元素进行遍历，其中ele是查找的元素中每一个，相当于js中forEach
想了解跟多关于jquery的知识，可以去jquery知识专栏学习，链接为：W3school

3. 参考代码和运行结果

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>截图title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        body ul{
            width: 500px;
            height: 518px;
            margin: 20px auto;
            list-style: none;
            position: relative;
        }
        body button{
            margin:0 auto;
            width: 30px;
            height: 25px;
            display: block;
        }
        .margin-top-1px{
            margin-top: 1px;
        }
        body ul li{
            background-image: url('./1.jpg');
            width: 125px;
            height: 172px;
            position: absolute;
            text-align: center;
            line-height: 172px;
            font-size: 25px;
            font-weight: bolder;
            color: red;
            z-index: 1;
        }
    style>
    <script src="./jquery.js">script>
head>
<body>
body>
<script type="text/javascript">
    // 图片大小 500 * 518
    // 500/4 = 125 518/3 = 172 余 2
    var arr = '鼠牛虎兔龙蛇马羊猴鸡狗猪'.split('');
    var _str = '';
    for(let i=0;i<12;i++){
        if(i >= 4){
            _str += `
  • `    
        }else{
            _str += '
  • '    ;
        }
    }
    $('body').html(`
      ${_str}
    `    );
    $('body ul li').each((index,ele)=>{
        $(ele).css({
            'top':parseInt(index/4)*172+'px',
            'left':(index%4)*125+'px',
            'backgroundPositionX': -(index % 4) * 125 + 'px',
            'backgroundPositionY': -parseInt(index / 4) * 172 + 'px'
        });
        $(ele).text(arr[index]);
    });

    var ele2 = $('body ul li').eq(1);
    ele2.css('zIndex',2);
    var flag = 'r'; // 状态 r b l t
    var fun1 = ()=>{
        let top = parseInt(ele2.css('top'));
        let left = parseInt(ele2.css('left'));
        // ul 标签样式 宽度 和 高度 为 500 , 518
        // 500 - 125 = 375 518 - 172 = 346
        
        if (top == 0 && left >= 375) 
            flag = 'b';

        if(left == 375 && top >= 346)
            flag = 'l';
        
        if(top == 346 && left <= 0)
            flag = 't';

        if(left == 0 && top <= 0)
            flag = 'r';

        if(flag == 'r')
            left ++;
        else if(flag == 'b')
            top ++;
        else if(flag == 'l')
            left --;
        else 
            top --;

        ele2.css({
            'top': top + 'px',
            'left': left + 'px'
        });
        // console.log(top,left);
    };
    var timer2 = setInterval(fun1,10);
    var flag2 = true;
    $('body button').click(()=>{
        if(flag2){
            let top = parseInt(ele2.css('top'));
            let left = parseInt(ele2.css('left'));
            clearInterval(timer2);
            flag2 = false;
            $('body button').text('开始');

            if(top == 0 && left == 125){
                alert('组图成功！');
            }
        }else{
            flag2 = true;
            timer2 = setInterval(fun1, 10);
            $('body button').text('暂停');
        }
    });
    script>
html>

    运行结果：

    前端:运用html+css+jquery.js实现截图游戏

    你可能感兴趣的:(前端,前端,javascript,html)

    • uni-app实现 步骤条 夏夏的码农 uni-app
      实现如图样式html部分代码如下投资期限与收益0?'active':'default'">募集开始1?'active':'default'">募集结束2?'active':'default'">产品成立3?'active':'default'">产品到期0?'active-step1':'step1'">1?'active-st
    • 大前端-postcss安装使用指南 黑夜照亮前行的路 postcss
      PostCSS是一款强大的CSS处理工具，可以用来自动添加浏览器前缀、代码合并、代码压缩等，提升代码的可读性，并支持使用最新的CSS语法。以下是一份简化的PostCSS安装使用指南：一、安装PostCSS在你的项目目录中，通过npm（NodePackageManager）来安装PostCSS。打开命令行窗口，输入以下命令：bash复制代码npminstallpostcss--save-dev这将把
    • 谷歌浏览器驱动Chromedriver（114-120版本）文件以及驱动下载教程 pigerr杨 Pythonpythonchromedrivers
      ChromeDriver官方网站GitHub||GoogleChromeLabs/chrome-for-testingChromeDriver113-125_JSONChromeforTestingavailability123-125zip白月黑羽Python基础|进阶|Qt图形界面|Django|自动化测试|性能测试|JS语言|JS前端|原理与安装
    • 虚拟 DOM 的优缺点有哪些 咕噜签名分发 前端javascript开发语言
      虚拟DOM（VirtualDOM）技术作为现代前端开发中的重要组成部分，已经成为了众多流行前端框架的核心特性。它的引入为前端开发带来了诸多优势，同时也需要我们认真思考其潜在的考量。下面简单的介绍一下虚拟DOM技术的优势与缺点，深入探讨其在实际应用中的影响。提升性能虚拟DOM的最大优势之一是提升页面性能。通过比较前后两次虚拟DOM树的差异，最小化实际DOM操作，从而减少页面重渲染时的性能消耗。这种优
    • 3、JavaWeb-Ajax/Axios-前端工程化-Element 所谓远行Misnearch #JavaWeb前端ajaxelementuijava前端框架
      P34Ajax介绍Ajax:AsynchroousJavaScriptAndXML，异步的JS和XMLJS网页动作，XML一种标记语言，存储数据，作用：数据交换：通过Ajax给服务器发送请求，并获取服务器响应的数据异步交互：在不重新加载整个页面的情况下，与服务器交换数据并实现更新部分网页的技术，例如：搜索联想、用户名是否可用的校验等等。同步与异步：同步：服务器在处理中客户端要处于等待状态，输入域名
    • python转码 Desamond python开发语言
      转码在许多场景中都有应用，以下是一些常见的场景：网页开发：当用户在网页上输入文本时，可能需要将特殊字符（如空格、引号、特殊符号等）进行转码，以防止这些字符对URL或HTML代码产生干扰。文件名处理：在处理文件名时，可能需要将特殊字符进行转码，以避免文件名被错误地解析或显示。数据传输：在数据传输过程中，为了确保数据的完整性和正确性，可能需要将数据中的特殊字符进行转码。数据存储：在数据库或数据存储中，
    • Python dict字符串转json对象，小数精度丢失问题 朝如青丝 暮成雪 jsonpython
      一前言JSON(JavaScriptObjectNotation)是一种轻量级的数据交换格式，dict是Python的一种数据格式。本篇介绍一个float数据转换时精度丢失的案例。二问题描述importjsontest_str1='{"π":3.1415926535897932384626433832795028841971}'test_str2='{"value":10.00000}'print
    • java实体中返回前端的double类型四舍五入（格式化） 婲落ヽ紅顏誶 java
      根据业务，需要通过后端给前端返回部分double类型的数值，一般需要保留两位小数，使用jackson转换对象packagecom.ruoyi.common.core.config;importcom.fasterxml.jackson.core.JsonGenerator;importcom.fasterxml.jackson.databind.JsonSerializer;importcom.f
    • Django forms组件 在飞行-米龙 Djangodjangopython后端
      【一】引入【1】实现登陆验证功能（1）需求分析登陆验证需要前后端交互，采用form表单提交数据对数据进行校验用户名必须以英文大写字母开头密码必须大于三位数反馈给用户错误的信息除了反馈错误的信息还有保留原始输入内容（2）后端代码使用user_info_dict字典每次刷新存储存储前端发送的信息存储后端进行验证的信息defhome(request):#每次后刷新这个信息字典user_info_dict
    • UNDERSTANDING HTML WITH LARGE LANGUAGE MODELS liferecords LLM语言模型人工智能自然语言处理
      UNDERSTANDINGHTMLWITHLARGELANGUAGEMODELS相关链接：arXiv关键字：大型语言模型、HTML理解、Web自动化、自然语言处理、机器学习摘要大型语言模型（LLMs）在各种自然语言任务上表现出色。然而，它们在HTML理解方面的能力——即解析网页的原始HTML，对于自动化基于Web的任务、爬取和浏览器辅助检索等应用——尚未被充分探索。我们为HTML理解模型（经过微调
    • Web前端Html的表单 任家伟 前端html
      表单的关键字：form标签表示一个表单区域action=“后端地址”method=“提交数据方式:get/post”input单行输入框type=“text”文本name=“定义名称名字自定义”向后端提交的键readonly=“readonly”只读，不可修改，但是可以提交disabled=“disabled”禁用组件不可修改，不能提交type=“password”密码框type=“radio”单
    • Thinkphp - 详细实现网站系统登录功能，附带 Mysql 数据库设置、Web 前端展示界面、信息校验等（详细代码，即设计过程） 王佳斌 +Thinkphpmysql前端数据库
      前言登录功能，是我们几乎开发每个系统都必须的模块。登录功能设计思路，主要包括几个方面。用户输入网址展示登录页面用户输入用户名，密码等点击登录进行信息校验校验通过之后，记录用户登录信息，跳转指定页面用户校验失败，提示失败信息页面目录具体功能实现为了快速搭建可用、美观的页面，我们采用一个比较成熟的前端框架Bootstrap。下面我们到Bootstrap的官网Bootsrap官网下载bootstrap。
    • javascript 日期转换为时间戳，时间戳转换为日期的函数 cdcdhj javascript学习日记javascript开发语言ecmascript
      日期转化为时间戳，主要用valueOf()来进行转化为毫秒时间戳，getTime()IOS系统无法解析转换，所以都有valueOf()letgetTimestampOrDate=function(timestamp){lettimeStamp='';constregex=/^\d{4}(-|\/)\d{2}(-|\/)\d{2}$/;constregex2=/^\d{4}(-|\/)\d{2}(-
    • COMP315 JavaScript Cloud Computing for E Commerce zhuyu0206girl javascript开发语言ecmascript
      Assignment1:Javascript1IntroductionAcommontaskincloudcomputingisdatacleaning,whichistheprocessoftakinganinitialdatasetthatmaycontainerroneousorincompletedata,andremovingorfixingthoseelementsbeforeform
    • JSON与AJAX：网页交互的利器 入冉心 jsonajax前端
      在现代Web开发中，JSON（JavaScriptObjectNotation）和AJAX（AsynchronousJavaScriptandXML）是两项不可或缺的技术。它们共同为网页提供了动态、实时的数据交互能力，为用户带来了更加流畅和丰富的体验。本文将详细介绍JSON和AJAX的概念、原理，并通过代码示例展示它们在实际开发中的应用。一、JSON：轻量级的数据交换格式JSON是一种轻量级的数据
    • 程序员开发技术整理 laizhixue 学习前端框架
      前端技术：vue-前端框架element-前端框架bootstrap-前端框架echarts-图标组件C#后端技术：webservice：soap架构：简单的通信协议，用于服务通信ORM框架：对象关系映射，如EF：对象实体模型，是ado.net中的应用技术soap服务通讯：xml通讯ado.net：OAuth2:登录授权认证：Token认证：JWT：jsonwebtokenJava后端技术：便捷工
    • 【前端学习——js篇】7.函数缓存 笔下无竹墨下有鱼 前端学习前端学习javascript
      具体见：https://github.com/febobo/web-interview7.函数缓存函数缓存，就是将函数运算过的结果进行缓存本质上就是用空间（缓存存储）换时间（计算过程）常用于缓存数据计算结果和缓存对象。其实现主要通过闭包、柯里化和高阶函数。下面主要介绍下柯里化：①柯里化柯里化（currying)是一种函数式编程的概念，指的是将一个带有多个参数的函数转换成一系列只接受一个参数的函数的
    • javascript的数据类型及转换 田小田txt
      一、JavaScript数据类型：共有string，number，boolean，object，function五种数据类型；其中Object，Date，Array为对象型；2个不包含任何值的数据类型：null，undefined。二、Typeof查看数据类型：typeof"John"//返回stringtypeof3.14//返回numbertypeofNaN//返回numbertypeoffa
    • html版本号 webpack_html-webpack-plugin详解 weixin_39994949 html版本号webpack
      引言最近在react项目中初次用到了html-webapck-plugin插件，用到该插件的两个主要作用：为html文件中引入的外部资源如script、link动态添加每次compile后的hash，防止引用缓存的外部文件问题可以生成创建html入口文件，比如单页面可以生成一个html文件入口，配置N个html-webpack-plugin可以生成N个页面入口有了这种插件，那么在项目中遇到类似上面
    • HTML语言剖析 混沌破晓
      HTML语言剖析Html简介-目录全写：HyperTextMark-upLanguage译名：超文本标识语言简释：一种为普通文件中某些字句加上标示的语言，其目的在于运用标签（tag）使文件达到预期的显示效果。由文字（字母，数字、标点符号）及标签组合而成。任何文字编辑器都可以，这里推荐用：Dreamweaver。1.Html特点：►描述性语言，结构语言，用于决定网页内容以什么样的形式显示；►通过标签
    • Websocket服务监听收发消息 beiback Java服务器问题websocket网络协议网络
      目录1.pom依赖坐标2.项目配置端口和项目包名2.创建处理器3.注册处理器4.前端页面1.pom依赖坐标org.springframework.bootspring-boot-starter-websocket2.项目配置端口和项目包名application.propertiesserver.port=8088//路径规范：为应用的所有servlet提供一个统一的前缀，使URL结构更加清晰和一致
    • Netty服务器结合WebSocke协议监听和接收数据 beiback 服务器问题Java服务器运维netty
      目录1.pom依赖2.配置属性3.创建netty服务器4.建立监听和响应5.创建启动器6.前端static下页面7.前端js8.注意异常问题9.创建netty服务器--使用守护线程1.pom依赖io.nettynetty-all4.1.86.Final2.配置属性application.properties#启动端口server.port=8088server.servlet.context-pa
    • 基于SSM+Vue企业销售培训系统 企业人才培训系统 企业课程培训管理系统 企业文化培训班系统Java 计算机程序老哥
      作者主页：计算机毕业设计老哥有问题可以主页问我一、开发介绍1.1开发环境开发语言：Java数据库：MySQL系统架构：B/S后端：SSM(Spring+SpringMVC+Mybatis)前端：Vue工具：IDEA或者Eclipse，JDK1.8，Maven二、系统介绍2.1图片展示注册登录页面：登陆.png前端页面功能：首页、培训班、在线学习、企业文化、交流论坛、试卷列表、系统公告、留言反馈、个
    • CDH 启停使用HiveServer2 金刚_30bf
      翻译：https://www.cloudera.com/documentation/enterprise/latest/topics/cdh_ig_hiveserver2_start_stop.html版本：5.14.2HiveServer2是HiveServer的改进版本，支持Kerberos身份验证和多客户端并发访问。您可以使用Beeline客户端访问HiveServer2。警告：如果以远程模
    • javascript实现SM2加密解密 人生在勤，不索何获 javascript前端jquery
      前提JavaWeb环境前端代码window.sm2=function(t){functioni(e){if(r[e])returnr[e].exports;varn=r[e]={i:e,l:!1,exports:{}};returnt[e].call(n.exports,n,n.exports,i),n.l=!0,n.exports}varr={};returni.m=t,i.c=r,i.d=fu
    • Vue：为什么要使用v-cloak 刻刻帝的海角 vue.js前端javascript
      Vue.js是一种流行的JavaScript框架，它使我们能够构建交互性强大的用户界面。在Vue.js中，v-cloak是一个指令，用于解决在页面加载时出现的闪烁问题。本文将介绍如何使用v-cloak及代码来优化Vue.js应用程序的渲染效果。引言当我们使用Vue.js构建应用程序时，有时会遇到一个问题：在页面加载时，由于Vue.js需要一定的时间来解析和渲染模板，会导致页面上显示出未经处理的Mu
    • HTML背景带视频的个人炫酷引导页源码 erthre 源码php
      正文:一款简洁大气得个人团队引导HTML单页，非常不错，LOGO支持自行更改替换，可以拿来做为团队官网也可以个人，只是单页没有后台。程序:wwhtxs.lanzouq.com/if6oE0i26ohi图片:
    • JavaScript快速入门笔记之二（变量、常量、数据类型） eshineLau 前端开发javascript笔记前端
      JavaScript快速入门笔记之二（变量、常量、数据类型）1、变量何时使用变量：程序中的一切数据都要保存在变量中，反复使用如何使用变量：2种情况：赋值和取值赋值：2步：1.1创建变量：——声明——创建一个新的空变量语法：var变量名;强调：仅声明，未赋值的变量，默认值是undefined命名：1.不能以数字开头2.不能用保留字。3.一般采用驼峰命名1.2赋值：将数据保存到变量中语法：变量名=数据
    • vue生命周期 涡看你就不是好人呐 vue.jsjavascript前端
      1.computed是在HTMLDOM加载后马上执行的，如赋值；2.methods则必须要有一定的触发条件才能执行，如点击事件；3.watch呢？它用于观察Vue实例上的数据变动。对应一个对象，键是观察表达式，值是对应回调。值也可以是方法名，或者是对象，包含选项。所以他们的执行顺序为：默认加载的时候先computed再watch，不执行methods；等触发某一事件后，则是：先methods再wa
    • 前端埋点解决方案 zhu_zhu_xia 前端
      一、前言：基于神策数据的前端埋点解决方案JavaScript快速使用·神策分析使用手册[预览版]二、sdkgitlab下载地址https://github.com/sensorsdata/sa-sdk-javascript/releases或者npm安装npmisa-sdk-javascript三、入门3.1接入sdk以及配置(version1.17.2)，入口文件接入sdk以及添加配置(func
    • 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其他