QUAN-铨
QUAN-铨

轮播图demo左右滑动-pc端

轮播图demo左右滑动-pc端

这里使用的是自己封装的动画，最完整，但是有点繁琐，还实现了节流的功能

外面只引入了四张图片的地址

轮播图demo左右滑动-pc端_第1张图片

有注释，直接上代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>轮播图demo左右滑动-pc端</title>
    <style>
        /* 轮播图 */
        /* 去掉默认样式 */
        li,i,ul{
     
            list-style: none;
            margin: 0;
            padding: 0;
        }
        .swiper{
     
            margin: 100px auto;
            overflow: hidden;
            width: 1226px;
            height: 460px;
            position: relative;
        }
        .swiper ul{
     
            position: absolute;
            top: 0;
            left: 0;
            height: 460px;
            width: 500%;
        }
        .swiper ul li{
     
            width: 1226px;
            height: 460px;
            float: left;
        }
        .swiper img{
     
            display: block;
            width: 100%;
            height: 100%;
        }
        /* 左右按钮 */
        .swiper span{
     
            font-size: 25px;
            display: block;
            width: 50px;
            height: 50px;
            line-height: 50px;
            text-align: center;
            color: #ccc;
            margin-top: -25px;
            position: absolute;
            top: 50%;
            /* 先隐藏，在鼠标进入轮播图区域的时候显示 */
            display: none;
            cursor: pointer;
        }
        .swiper .button-right{
     
            right: 0;
        }
        .swiper .button-left{
     
            left: 0;
        }
        .swiper span:hover{
     
            background-color: #e0e0e0;
            color: black;
        }
        /* 小圆圈 */
        .bullets{
     
            position: absolute;
            bottom: 30px;
            right: 60px;
            width: 300px;
            height: 20px;
            text-align: right;
        }
        .bullets i{
     
            display: inline-block;
            height: 10px;
            width: 10px;
            border: 3px solid #cccccc;
            background-color: #e0e0e0;
            border-radius: 50%;
            margin: 0 3px;
        }
        .bullets .active{
     
            background-color: #ffffff;
        }
    </style>
</head>
<body>
    <div class="swiper">
        <!-- 轮播的图片 -->
        <ul></ul>
        <!-- 左右按钮 -->
        <span class="button-left">&lt;</span>
        <span class="button-right">&gt;</span>
        <!-- 小圆圈 -->
        <div class="bullets"></div>
    </div>
    <script>
        // 定义一些中间值
        let num=0//记录图片滚动,滚动一次就+1,或者点击小圈变到相应的index
        let circle=0//记录小圈变化,滚动一次就+1,或者点击变到相应的index
        let flag=true//节流阀

        // 获取元素
        let swiper=document.querySelector('.swiper')
        let ul=document.querySelector('.swiper ul')
        let bullets=document.querySelector('.bullets')
        let button_left=document.querySelector('.button-left')
        let button_right=document.querySelector('.button-right')

        // 动态添加图片和小圈
        let arr=['./img/main-back-1.jpg','./img/main-back-2.jpg','./img/main-back-3.jpg','./img/main-back-4.jpg']
        let html=''
        for(let i=0;i<arr.length;i++){
     
            html+='
    • '    
            // 这里生成小圈
            let ii=document.createElement('i')
            ii.setAttribute('index',i)
            bullets.appendChild(ii)
        }
        ul.innerHTML=html

        // 克隆第一张图片放到最后这是为了实现无缝滚动效果
        let last_li=ul.children[0].cloneNode(true)
        ul.appendChild(last_li)
        // 默认第一个小圈是active
        bullets.children[0].className='active'


        // 控制左右按钮的显示与隐藏
        swiper.addEventListener('mouseenter',function(){
     
            button_left.style.display="block"
            button_right.style.display="block"
            // 鼠标进入的时候，不轮播
            clearInterval(timer)
            timer=null
        })
        swiper.addEventListener('mouseleave',function(){
     
            button_left.style.display="none"
            button_right.style.display="none"
            // 出去的时候继续轮播
            timer=setInterval(function(){
     
                button_right.click()
            },2000)
        })

        // 点击右边按钮
        button_right.addEventListener('click',function(){
     
            //上一个动画未执行完成，不能执行下一个
            if(flag){
     
                flag=false
                // 如果到了最后一张图片，就立马回到一开始的第一张，这两张图片一样
                if(num==ul.children.length-1){
     
                    num=0
                    ul.style.left=0
                }
                num++
                quan_animate(ul,-num*swiper.offsetWidth,function(){
     flag=true})
                // 小圈改变
                circle++
                if(circle==bullets.children.length) circle=0
                circleChange()
            }
        })

        // 点击右边的按钮
        button_left.addEventListener('click',function(){
     
            // 和右移差不多
            if(flag){
     
                flag=false
                if(num==0){
     
                    num=ul.children.length-1
                    ul.style.left=-num*swiper.offsetWidth+'px'
                }
                num--
                quan_animate(ul,-num*swiper.offsetWidth,function(){
     flag=true})
                // 小圈改变
                circle--
                if(circle<0) circle=bullets.children.length-1
                circleChange()
            }
        })

        // 点击小圈的时候也可以控制播放（这里可以在生成小圈的时候直接加监听，也可以在这里）
        for(let i=0;i<bullets.children.length;i++){
     
            bullets.children[i].addEventListener('click',function(){
     
                // 得到小圈的index
                circle=this.getAttribute('index')
                // 调用下面定义好的函数
                circleChange()
                num=circle
                quan_animate(ul,-num*swiper.offsetWidth)
            })
        }

        // 小圈的改变
        function circleChange(){
     
            for(let i=0;i<bullets.children.length;i++){
     
                bullets.children[i].className=''
            }
            bullets.children[circle].className='active'
        }

        // 自动轮播
        let timer=setInterval(function(){
     
            button_right.click()
        },2000)

        // 因为很多次都用到移动的动画，这里直接封装一个动画
        function quan_animate(obj,target,callback){
     
            clearInterval(obj.timer)
            obj.timer=setInterval(function(){
     
                // 步长，越来越慢
                let step=(target-obj.offsetLeft)/10
                // 取整,不出现小数的情况，在step为正数时，向上取整（0.5变为1）在step为负数时，向下取整（0.5变为-1）这样才能保证他在小数时一直移动
                step=step>0?Math.ceil(step):Math.floor(step)
                // 相等了就清空定时器
                if(obj.offsetLeft==target){
     
                    clearInterval(obj.timer)
                    // 有回调函数就执行回调函数
                    callback&&callback()
                }
                // 移动
                obj.style.left=obj.offsetLeft+step+'px'
            },15)
        }
    </script>
</body>
</html>
    作为自己学习过程的总结，菜鸡一枚，有什么问题与错误，请不吝赐教

    你可能感兴趣的:(js,js)

    • npm和webpack学习 fechild npmwebpack学习
      npmnpmnpminstallxxxnpminstallxxx--savenpminstallxxx--save-dev安装在node_modules不在package.json安装在node_modules，在package.json的dependencies，生产环境打包时，会出现在依赖包里。安装在node_modules，在package.json的devDependencies，生产环境
    • 手写JS高阶组件 执念一分 jsjavascript
      map()Array.prototype.map=function(callback,arg){if(this==='null'){thrownewTypeError("cannotreadproperty'map'ifnull")}if(this==='undefined'){thrownewTypeError("cannotreadproperty'map'ifundefined")}if(O
    • 记录一次RPC服务有损上线的分析过程 京东云开发者 rpcjavasql
      作者：京东零售郭宏宇1.问题背景某应用在启动完提供JSF服务后，短时间内出现了大量的空指针异常。分析日志，发现是服务依赖的藏经阁配置数据未加载完成导致。即所谓的有损上线或者是直接发布，当****应用启动时，service还没加载完，就开始对外提供服务，导致失败调用。关键代码如下数据的初始化加载是通过实现CommandLineRunner接口完成的@ComponentpublicclassLoadS
    • 大三学生面试经历（2） 无限大. 面试面试职场和发展
      继续昨天的内容，我面试的是一个Java实习岗，但是居然也问了我前端（vue）相关的问题最大的感觉就是，现在真的越来越卷了，后端都把前端的东西卷完了，当时是线上面试，感觉答的不太好（因为确实没准备的太全），接下来的时间继续加强加强这些方面的学习愿与诸君共勉！具体如下1.请简述Vue.js的生命周期函数及其执行顺序2.Vue.js中的v-bind指令和v-model指令有什么区别?3.请简述Vue.j
    • 华为OD机试E卷 --快递投放问题 --24年OD统一考试（Java & JS & Python & C & C++） 飞码创造者 最新华为OD机试题库2024华为odjavajavascriptc语言python
      文章目录题目描述输入描述输出描述用例题目解析JS算法源码Java算法源码python算法源码c算法源码题目描述有N个快递站点用字符串标识，某些站点之间有道路连接。每个站点有一些包裹要运输，每个站点间的包裹不重复，路上有检查站Q会导致部分货物无法通行，计算哪些货物无法正常投递?输入描述第一行输入MN，M个包裹N个道路信息…O<=M,N<=100,检查站禁止通行的包裹如果有多个以空格分开输出描述输出不
    • JNI Android Bitmap 和 cv::Mat 互相转换安卓手机运行Opencv动态库或普通c++函数配置指南 chezabo6116 android
      JNIAndroidBitmap和cv::Mat互相转换https://blog.csdn.net/tyfwin/article/details/140714946安卓手机运行Opencv动态库或普通c++函数配置指南https://blog.csdn.net/snjs000111/article/details/135067493
    • React框架详解：从入门到精通（详细版） 布兰妮甜 #Reactreact.js前端前端框架
      文章目录前言一、官方网站二、安装React使用CreateReactApp手动安装三、React核心概念1.组件化2.JSX3.虚拟DOM4.Props和State四、生命周期方法五、新特性介绍1.Hooks2.ContextAPI六、状态管理1.Redux2.Mobx3.ReactContextAPI七、最佳实践1.组件划分2.代码复用3.性能优化4.错误边界结语前言React是由Faceboo
    • nodeJS 系统学习（模块-章节1） BYh_blog js基础node.jsjavascript
      module（模块）1.概念（理论）利用模块化，根据代码功用将应用拆分为不同的模块。增强代码的可读性，可迭代性等一切具有客观良性的作用。一般情况下每个文件就是一个模块。文件路径则是模块名。2.实践（操作）CODE模块之间可以相互引用。通过require、exports、module三个预先定义好的node环境变量module.js测试模块代码console.log(module);module.e
    • 华为OD机试E卷 - 螺旋数字矩阵（Java & Python& JS & C++ & C ） 算法大师 最新华为OD机试华为od矩阵java华为OD机试E卷pythonjavascriptC语言
      最新华为OD机试真题目录：点击查看目录华为OD面试真题精选：点击立即查看题目描述疫情期间，小明隔离在家，百无聊赖，在纸上写数字玩。他发明了一种写法：给出数字个数n和行数m（0
    • 深入探讨Web应用开发：从前端到后端的全栈实践 禁默 前端
      目录引言1.Web应用开发的基本架构2.前端开发技术HTML、CSS和JavaScript前端框架与库响应式设计与移动优先3.后端开发技术Node.js（JavaScript后端）Python（Flask和Django）RubyonRailsJava（SpringBoot）4.数据库选择与管理关系型数据库（SQL）非关系型数据库（NoSQL）5.API设计与开发RESTfulAPIGraphQL6
    • 【Springboot】——响应与分层解耦架构 Y小夜 架构springboot后端javaspring
      博主现有专栏：C51单片机（STC89C516），c语言，c++，离散数学，算法设计与分析，数据结构，Python，Java基础，MySQL，linux，基于HTML5的网页设计及应用，Rust（官方文档重点总结），jQuery，前端vue.js，Javaweb开发，设计模式、Python机器学习、Springboot等主页链接：Y小夜-CSDN博客目录响应响应数据✨@ResponseBody✨G
    • 华为OD机试E卷 --矩阵扩散--24年OD统一考试（Java & JS & Python & C & C++） 飞码创造者 最新华为OD机试题库2024华为od矩阵javapythonjavascript
      文章目录题目描述输入描述输出描述用例题目解析JS算法源码Java算法源码python算法源码c算法源码题目描述存在一个m×n的二维数组，其成员取值范围为0或1。其中值为1的成员具备扩散性，每经过1s，将上下左右值为0的成员同化为1。二维数组的成员初始值都为0，将第[i,j]和[k,l]两个个位置上元素修改成1后，求矩阵的所有元素变为1需要多长时间。输入描述输入数据中的：•前面2个数字表示这是一个m
    • node.js基于的人事管理系统程序+论文 可用于毕业设计 亦月学姐毕设 node.js课程设计
      本系统（程序+源码+数据库+调试部署+开发环境）带文档lw万字以上，文末可获取源码系统程序文件列表开题报告内容选题背景关于人事管理系统的研究，现有研究主要以传统模式下的人事信息管理为主，多侧重于基本的员工信息存储与简单的考勤统计等功能实现。专门针对集成化、智能化且功能全面覆盖现代企业人事管理各环节的研究较少。在国外，一些先进的人事管理系统已具备高度自动化和数据分析功能，但因国情和企业管理文化差异，
    • 如何使用Docker容器化Node.js应用？ JJCTO袁龙 Node.jsdockernode.js容器
      在Node.js中，使用Docker容器化应用是一种常见的实践，它可以提供一致的开发和部署环境，简化部署流程，并提高应用的可移植性。以下是如何使用Docker容器化Node.js应用的步骤：编写Dockerfile：创建一个名为Dockerfile的文件，定义你的应用如何被容器化。以下是一个基本的Dockerfile示例：#使用官方Node.js作为基础镜像FROMnode:14#设置工作目录WO
    • Node.js 模块化编程实践：管理大型项目和依赖 AI天才研究院 计算AI大模型企业级应用开发实战大数据AI人工智能javapythonjavascriptkotlingolang架构人工智能大厂程序员硅基计算碳基计算认知计算生物计算深度学习神经网络大数据AIGCAGILLM系统架构设计软件哲学Agent程序员实现财富自由
      《Node.js模块化编程实践：管理大型项目和依赖》关键词：Node.js、模块化编程、大型项目、依赖管理、包管理工具、性能优化、测试与调试、实战项目摘要：本文将深入探讨Node.js模块化编程实践，从基础知识和模块化概述开始，逐步讲解如何管理大型项目和依赖。我们将详细介绍Node.js的模块加载机制、包管理工具、大型项目构建与优化、测试与调试等关键点。通过一系列实战项目案例，读者将掌握Node.
    • Node.js 镜像的全方位指南 ivwdcwso node.js
      Node.js是一门广泛应用于构建服务器端和客户端应用的JavaScript运行时。在容器化环境中，构建和使用Node.js镜像是非常常见的任务。以下是有关Node.js镜像的通常选择、制作流程、不同场景下的应用、安全性最佳实践以及镜像优化的全方位指南。1.选择合适的基础镜像1.1官方Node.js镜像DockerHub提供了官方Node.js镜像，由Node.js官方维护，提供了最新的稳定版本和
    • React Remix框架：前端开发的“瑞士军刀” 程序员
      ReactRemix框架：前端开发的“瑞士军刀”大家好，我是你们的前端小伙伴大鱼，今天咱们来聊聊一个最近挺火的前端框架——Remix。如果你是个React开发者，那你一定听说过Next.js，但Remix这个“新秀”也不容小觑。它不仅是React生态中的一员猛将，还带着一股“颠覆传统”的气息。今天我们就来扒一扒Remix的底细，顺便和Next.js来个正面PK。什么是Remix？Remix是一个全
    • 淘宝爬虫自动化 qq_42307546 爬虫自动化python
      importjsonimportosimportreimportthreadingimporttimeimportopenpyxlfromDrissionPageimportChromiumOptions,ChromiumPage#创建一个excel文件defcreate_excel(file_name):#实例化工作簿对象workbook=openpyxl.Workbook()#激活当前工作表w
    • 如何在Docker上构建Node.js应用程序 cunchi4221 dockerjavapythonvuelinuxViewUI
      Dockerhasbeenthelatesttrendingtopicoverthepastcoupleofyearsandifyouhaven’tbeentospaceorspentsometimeinthecaves,youprobablymusthavecomeacrossthistechbuzzword.在过去的几年中，Docker一直是最新的趋势话题，如果您没有去过太空或在洞穴中度过了一
    • 基于微信小程序的个人健康管理系统 计算机学姐 微信小程序源码微信小程序小程序springbootjavavue.jsintellij-ideamybatis
      作者：计算机学姐开发技术：SpringBoot、SSM、Vue、MySQL、JSP、ElementUI、Python、小程序等，“文末源码”。专栏推荐：前后端分离项目源码、SpringBoot项目源码、Vue项目源码、SSM项目源码、微信小程序源码精品专栏：Java精选实战项目源码、Python精选实战项目源码、大数据精选实战项目源码系统展示基于微信小程序+Java+SpringBoot+Vue+
    • 包管理工具 npm/yarn/pnpm对比，你选对了码 小姚爱吃辣 yarn
      在前端开发领域，包管理工具是开发者不可或缺的利器。它们不仅帮助我们管理依赖，还能提升项目的构建效率。目前，最常用的三大前端包管理工具分别是npm、Yarn和pnpm。本文将深入探讨这三种工具的优缺点，帮助你在项目中做出最合适的选择。一、npm图片1.什么是npm？npm（NodePackageManager）是随Node.js一起发布的包管理和分发工具。它是目前使用最广泛的JavaScript包管
    • 浅谈我理解的,bug如何定位前后端问题 追星徐小粉 软件测试定位前后端问题linuxnginx
      测试，如何定位前后端bug?首先需要清楚知道数据的传输流程：用户在前端页面操作，如点击某个功能，页面携带数据进行请求，访问具体功能接口，由后端服务执行该接口相应的业务逻辑，如涉及数据，后端从数据库取相关信息，并组装数据返回给前端，前端页面进行渲染和展示对应的页面和数据。1接口分析法：抓包或浏览器F12，选择NETWORK网络，选择XHR，JS，WS，Manifest，Other,过滤一些其他内容，
    • Sass,Scss,Less的区别 _会飞的肥牛 笔记sassless
      一.Sass和Scss区别Scss是Sass的升级版,他用{}代替了缩进更符合书写习惯.homecolor:#42b983.home{color:#42b983;}二.Sass/Scss和Less区别1.编译环境不同Sass是在服务端处理的，以前是Ruby，现在是Dart-Sass或Node-Sass，而Less是需要引入less.js来处理Less代码输出CSS到浏览器，也可以在开发服务器将Le
    • 腾讯实时股票数据接口怎么获取行情？ 百态老人 腾讯云云计算
      获取腾讯实时股票数据接口的方法如下：首先注册成为腾讯云用户，并创建一个API密钥（SecretId和SecretKey）；然后使用HTTPS协议调用腾讯云提供的接口，可以通过发送HTTPGET请求获取指定股票代码的实时行情数据；通过解析返回的JSON格式数据，即可获取对应股票的当前股价、涨跌幅等信息。需要注意的是，使用腾讯云提供的股票行情接口需要支付一定的服务费用。另外，使用该接口前需要仔细了解其
    • 【前端】包管理器：npm、Yarn 和 pnpm 的全面比较 帅比九日 踩过的坑前端npmnode.js
      前端开发中的包管理器：npm、Yarn和pnpm的全面比较在现代前端开发中，包管理器是开发者必不可少的工具。它们不仅能帮我们管理项目的依赖，还能极大地提高开发效率。本文将详细介绍三种主流的前端包管理器：npm、Yarn和pnpm，探讨它们的特点、优缺点以及它们之间的关系和对比。npm(NodePackageManager)简介npm是Node.js的默认包管理器，由Node.js官方维护。自201
    • 前端打包工具之npm、yarn、pnpm对比 前端~初学者 前端工程化前端npmnode.js
      前端打包工具之npm、yarn、pnpm对比1、npm1.1概述1.2安装1.3常用命令1.4优缺点2、yarn2.1概述2.2安装2.3常用命令2.4优缺点3、pnpm3.1概述3.2安装3.3常用命令3.4优缺点2.54、总结1、npm1.1概述NPM（NodePackageManager），作为默认的JavaScript应用包管理器，与Node.js一同安装，它是目前使用最广泛的包管理器，得
    • 抽取网易云音乐热门评论（附代码）：html+css+python+js 音乐与灵魂的碰撞 爱玩游戏的jason otherhtmlcsspython
      抽取网易云音乐热门评论：html+css+python+js音乐与灵魂的碰撞代码链接不说废话，上代码！！！get.py#get.pyimporturllib.requestimporturllib.errorimporturllib.parseimportjson#抓取网易云音乐指定url的热评defget_hotComments(id):url='https://music.163.com/we
    • 如何正确定位前后端bug？ ℡52Hz★ 前后联调总结bugvue.js前端vue
      在平时的开发过程中，正确定位前后端bug是提高开发效率和项目质量的关键。以下是一些实用的方法。一、前后端bug特征前端主要负责显示数据，后端主要负责处理数据、存储数据，前后端主要通过接口进行数据交换。1.前端bug特征界面显示类问题：如文字大小不一，控件颜色不搭，控件不整齐，静态界面错误；页面布局类问题：文字排版没有统一，行间距大小、重叠、显示不全；页面交互类问题：没有点击，拖拽，基本都是JS的问
    • NPM 与 Node.js 版本兼容问题：npm warn cli npm does not support Node.js 我命由我12345 前端-问题清单node.jsnpm前端前端框架jsjavascripthtml5
      问题描述与处理策略1、问题描述npmwarnclinpmv10.9.2doesnotsupportNode.jsv18.16.1.Thisversionofnpmsupportsthefollowingnodeversions:`^18.17.0||>=20.5.0`.Youcanfindthelatestversionathttps://nodejs.org/.#翻译npmwarnclinpmv
    • 自定义注解格式化处理BigDecimal 都要好好的O java自定义注解
      一、场景描述在开发过程中，如果有实体类的属性中存在BigDecimal的属性，并且需要对其进行校验，例如：限制BigDecimal的小数点位数是两位或者处理精度自动补0。但目前没有注解可以完成这个操作，因此我们可以使用下面的工具类和注解进行处理。二、实现步骤1、自定义类importcom.fasterxml.jackson.core.JsonGenerator;importcom.fasterxm
    • java Illegal overloaded getter method with ambiguous type for propert的解决 zwllxs javajdk
      好久不来iteye,今天又来看看，哈哈,今天碰到在编码时，反射中会抛出 Illegal overloaded getter method with ambiguous type for propert这么个东东，从字面意思看，是反射在获取getter时迷惑了，然后回想起java在boolean值在生成getter时，分别有is和getter，也许我们的反射对象中就有is开头的方法迷惑了jdk，
    • IT人应当知道的10个行业小内幕 beijingjava 工作互联网
      10. 虽然IT业的薪酬比其他很多行业要好，但有公司因此视你为其“佣人”。 　　尽管IT人士的薪水没有互联网泡沫之前要好，但和其他行业人士比较，IT人的薪资还算好点。在接下的几十年中，科技在商业和社会发展中所占分量会一直增加，所以我们完全有理由相信，IT专业人才的需求量也不会减少。 　　然而，正因为IT人士的薪水普遍较高，所以有些公司认为给了你这么多钱，就把你看成是公司的“佣人”，拥有你的支配
    • java 实现自定义链表 CrazyMizzz java数据结构
      1.链表结构   链表是链式的结构 2.链表的组成    链表是由头节点，中间节点和尾节点组成    节点是由两个部分组成：       1.数据域       2.引用域 3.链表的实现 &nbs
    • web项目发布到服务器后图片过一会儿消失 麦田的设计者 struts2上传图片永久保存
        作为一名学习了android和j2ee的程序员，我们必须要意识到，客服端和服务器端的交互是很有必要的，比如你用eclipse写了一个web工程，并且发布到了服务器（tomcat）上，这时你在webapps目录下看到了你发布的web工程，你可以打开电脑的浏览器输入http://localhost:8080/工程/路径访问里面的资源。但是，有时你会突然的发现之前用struts2上传的图片
    • CodeIgniter框架Cart类 name 不能设置中文的解决方法 IT独行者 CodeIgniterCart框架　
      今天试用了一下CodeIgniter的Cart类时遇到了个小问题，发现当name的值为中文时，就写入不了session。在这里特别提醒一下。 在CI手册里也有说明，如下： $data = array( 'id' => 'sku_123ABC', 'qty' => 1, '
    • linux回收站 _wy_ linux回收站
      今天一不小心在ubuntu下把一个文件移动到了回收站，我并不想删，手误了。我急忙到Nautilus下的回收站中准备恢复它，但是里面居然什么都没有。     后来我发现这是由于我删文件的地方不在HOME所在的分区，而是在另一个独立的Linux分区下，这是我专门用于开发的分区。而我删除的东东在分区根目录下的.Trash-1000/file目录下，相关的删除信息（删除时间和文件所在
    • jquery回到页面顶端 知了ing htmljquerycss
      html代码： <h1 id="anchor">页面标题</h1> <div id="container">页面内容</div> <p><a href="#anchor" class="topLink">回到顶端</a><
    • B树、B-树、B+树、B*树 矮蛋蛋 B树
      原文地址： http://www.cnblogs.com/oldhorse/archive/2009/11/16/1604009.html B树        即二叉搜索树：        1.所有非叶子结点至多拥有两个儿子（Left和Right）； &nb
    • 数据库连接池 alafqq 数据库连接池
      http://www.cnblogs.com/xdp-gacl/p/4002804.html @Anthor:孤傲苍狼 数据库连接池 用MySQLv5版本的数据库驱动没有问题，使用MySQLv6和Oracle的数据库驱动时候报如下错误： java.lang.ClassCastException: $Proxy0 cannot be cast to java.sql.Connec
    • java泛型 百合不是茶 java泛型
      泛型 在Java SE 1.5之前，没有泛型的情况的下，通过对类型Object的引用来实现参数的“任意化”，任意化的缺点就是要实行强制转换，这种强制转换可能会带来不安全的隐患   泛型的特点：消除强制转换 确保类型安全 向后兼容   简单泛型的定义：      泛型：就是在类中将其模糊化，在创建对象的时候再具体定义 class fan
    • javascript闭包[两个小测试例子] bijian1013 JavaScriptJavaScript
      一.程序一 <script> var name = "The Window"; var Object_a = { 　　name : "My Object", 　　getNameFunc : function(){ var that = this; 　　　　return function(){ 　　　　
    • 探索JUnit4扩展：假设机制（Assumption） bijian1013 javaAssumptionJUnit单元测试
      一.假设机制（Assumption）概述        理想情况下，写测试用例的开发人员可以明确的知道所有导致他们所写的测试用例不通过的地方，但是有的时候，这些导致测试用例不通过的地方并不是很容易的被发现，可能隐藏得很深，从而导致开发人员在写测试用例时很难预测到这些因素，而且往往这些因素并不是开发人员当初设计测试用例时真正目的，
    • 【Gson四】范型POJO的反序列化 bit1129 POJO
      在下面这个例子中，POJO(Data类)是一个范型类，在Tests中，指定范型类为PieceData，POJO初始化完成后，通过 String str = new Gson().toJson(data); 得到范型化的POJO序列化得到的JSON串，然后将这个JSON串反序列化为POJO   import com.google.gson.Gson; import java.
    • 【Spark八十五】Spark Streaming分析结果落地到MySQL bit1129 Stream
      几点总结： 1. DStream.foreachRDD是一个Output Operation，类似于RDD的action，会触发Job的提交。DStream.foreachRDD是数据落地很常用的方法 2. 获取MySQL Connection的操作应该放在foreachRDD的参数（是一个RDD[T]=>Unit的函数类型)，这样，当foreachRDD方法在每个Worker上执行时，
    • NGINX + LUA实现复杂的控制 ronin47 nginx lua
      安装lua_nginx_module 模块 lua_nginx_module 可以一步步的安装，也可以直接用淘宝的OpenResty Centos和debian的安装就简单了。。 这里说下freebsd的安装： fetch http://www.lua.org/ftp/lua-5.1.4.tar.gz tar zxvf lua-5.1.4.tar.gz cd lua-5.1.4 ma
    • java-递归判断数组是否升序 bylijinnan java
      public class IsAccendListRecursive { /*递归判断数组是否升序 * if a Integer array is ascending,return true * use recursion */ public static void main(String[] args){ IsAccendListRecursiv
    • Netty源码学习-DefaultChannelPipeline2 bylijinnan javanetty
      Netty3的API http://docs.jboss.org/netty/3.2/api/org/jboss/netty/channel/ChannelPipeline.html 里面提到ChannelPipeline的一个“pitfall”： 如果ChannelPipeline只有一个handler（假设为handlerA）且希望用另一handler（假设为handlerB） 来
    • Java工具之JPS chinrui java
      JPS使用     熟悉Linux的朋友们都知道，Linux下有一个常用的命令叫做ps（Process Status)，是用来查看Linux环境下进程信息的。同样的，在Java Virtual Machine里面也提供了类似的工具供广大Java开发人员使用，它就是jps（Java Process Status)，它可以用来
    • window.print分页打印 ctrain window
      function init() { var tt = document.getElementById("tt"); var childNodes = tt.childNodes[0].childNodes; var level = 0; for (var i = 0; i < childNodes.length; i++) {
    • 安装hadoop时 执行jps命令Error occurred during initialization of VM daizj jdkhadoopjps
      在安装hadoop时，执行JPS出现下面错误   [slave16][email protected]:/tmp/hsperfdata_hdfs# jps Error occurred during initialization of VM java.lang.Error: Properties init: Could not determine current working
    • PHP开发大型项目的一点经验 dcj3sjt126com PHP重构
      一、变量 最好是把所有的变量存储在一个数组中，这样在程序的开发中可以带来很多的方便，特别是当程序很大的时候。变量的命名就当适合自己的习惯，不管是用拼音还是英语，至少应当有一定的意义，以便适合记忆。变量的命名尽量规范化，不要与PHP中的关键字相冲突。 二、函数 PHP自带了很多函数，这给我们程序的编写带来了很多的方便。当然，在大型程序中我们往往自己要定义许多个函数，几十
    • android笔记之--向网络发送GET/POST请求参数 dcj3sjt126com android
      使用GET方法发送请求 private static boolean sendGETRequest (String path, Map<String, String> params) throws Exception{ //发送地http://192.168.100.91:8080/videoServi
    • linux复习笔记 之bash shell (3) 通配符 eksliang linux 通配符linux通配符
      转载请出自出处： http://eksliang.iteye.com/blog/2104387 在bash的操作环境中有一个非常有用的功能，那就是通配符。 下面列出一些常用的通配符，如下表所示 符号 意义 * 万用字符，代表0个到无穷个任意字符 ? 万用字符，代表一定有一个任意字符 [] 代表一定有一个在中括号内的字符。例如：[abcd]代表一定有一个字符，可能是a、b、c
    • Android关于短信加密 gqdy365 android
      关于Android短信加密功能，我初步了解的如下（只在Android应用层试验）：     1、因为Android有短信收发接口，可以调用接口完成短信收发；         发送过程：APP（基于短信应用修改）接受用户输入号码、内容——>APP对短信内容加密——>调用短信发送方法Sm
    • asp.net在网站根目录下创建文件夹 hvt .netC#hovertreeasp.netWeb Forms
      假设要在asp.net网站的根目录下建立文件夹hovertree,C#代码如下： string m_keleyiFolderName = Server.MapPath("/hovertree"); if (Directory.Exists(m_keleyiFolderName)) { //文件夹已经存在 return; } else { try { D
    • 一个合格的程序员应该读过哪些书 justjavac 程序员书籍
      编者按：2008年8月4日，StackOverflow 网友 Bert F 发帖提问：哪本最具影响力的书，是每个程序员都应该读的？ “如果能时光倒流，回到过去，作为一个开发人员，你可以告诉自己在职业生涯初期应该读一本， 你会选择哪本书呢？我希望这个书单列表内容丰富，可以涵盖很多东西。” 很多程序员响应，他们在推荐时也写下自己的评语。 以前就有国内网友介绍这个程序员书单，不过都是推荐数
    • 单实例实践 跑龙套_az 单例
         1、内部类 public class Singleton { private static class SingletonHolder { public static Singleton singleton = new Singleton(); } public Singleton getRes
    • PO VO BEAN 理解 q137681467 VODTOpo
      PO：      全称是 persistant object持久对象 最形象的理解就是一个PO就是数据库中的一条记录。 好处是可以把一条记录作为一个对象处理，可以方便的转为其它对象。     BO：     全称是 business object:业务对象 主要作用是把业务逻辑封装为一个对象。这个对
    • 战胜惰性，暗自努力 金笛子 努力
      偶然看到一句很贴近生活的话：“别人都在你看不到的地方暗自努力，在你看得到的地方，他们也和你一样显得吊儿郎当，和你一样会抱怨，而只有你自己相信这些都是真的，最后也只有你一人继续不思进取。”很多句子总在不经意中就会戳中一部分人的软肋，我想我们每个人的周围总是有那么些表现得“吊儿郎当”的存在，是否你就真的相信他们如此不思进取，而开始放松了对自己的要求随波逐流呢？ 我有个朋友是搞技术的，平时嘻嘻哈哈，以
    • NDK/JNI二维数组多维数组传递 wenzongliang 二维数组jniNDK
      多维数组和对象数组一样处理，例如二维数组里的每个元素还是一个数组 用jArray表示，直到数组变为一维的，且里面元素为基本类型，去获得一维数组指针。给大家提供个例子。已经测试通过。 Java_cn_wzl_FiveChessView_checkWin( JNIEnv* env,jobject thiz,jobjectArray qizidata) { jint i,j; int s
    按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他