SevgiliD
SevgiliD

【移动端网页特效】02-移动端轮播图（原生JS）

移动端轮播图

  • 原生JS实现移动端轮播图
    • 结构搭建
      • html代码&css代码
    • 实现思路
    • JS核心代码

原生JS实现移动端轮播图

结构搭建

html代码&css代码

 <style>
        * {
            margin: 0;
            padding: 0;
        }

        ul li {
            list-style-type: none;
        }

        a {
            text-decoration: none;
        }

        .banner-wrap {
            width: 100vw;
            background-color: #bfa;
        }

        .banner-wrap .banner {
            width: 80%;
            margin: 0 auto;
            overflow: hidden;
            position: relative;
        }

        /* 设置ul */
        .slider-wrap {
            width: 500%;
            /* 设置应该显示的第一张图片，而非复制的放在最前边的最后一张图 */
            margin-left: -100%;
        }

        .slider-wrap li {
            width: 20%;
            height: 20vh;
            float: left;
        }

        .slider-wrap img {
            width: 100%;
        }

        /* 设置小圆圈 */
        .pointer {
            position: absolute;
            bottom: 15px;
            right: 15px;

        }

        .pointer li {
            width: 8px;
            height: 8px;
            border-radius: 4px;
            list-style-type: none;
            display: inline-block;
            background-color: hsla(0, 0%, 100%, .4);

        }

        .pointer li.current {
            width: 18px;
        }
    style>
head>

<body>
    <div class="banner-wrap">
        
        <div class="banner">
            <a href=""><span>特价直播span><span>特价好货直播中span>a>
            
            <ul class="slider-wrap">
                <li class="slider"><a href=""><img src="../../images/p-banner3.jpg" alt="">a>li>
                <li class="slider"><a href=""><img src="../../images/p-banner1.jpg" alt="">a>li>
                <li class="slider"><a href=""><img src="../../images/p-banner2.jpg" alt="">a>li>
                <li class="slider"><a href=""><img src="../../images/p-banner3.jpg" alt="">a>li>
                <li class="slider"><a href=""><img src="../../images/p-banner1.jpg" alt="">a>li>
            ul>
            
            <ol class="pointer">
                <li class="current">li>
                <li>li>
                <li>li>
            ol>
        div>
    div>

实现思路

  1. 图片滚动：移动端没有兼容性问题，此时可以不必使用之前的动画函数，才用定时器和css动画中的transform：translate及transition结合实现滚动动画效果
  2. 无缝滚动：同理PC端需要将第一张添加到最后一张后，需要将最后一张添加到第一张前；pc端为鼠标点击事件，移动端为触摸点拖动
  3. 小圆圈跟随变化：单独设置current样式，用classList切换类current（PC端时才用的排他写法）；图片过渡之后小圆圈再变化，用到transitionend事件

classList属性的用法：
【移动端网页特效】02-移动端轮播图（原生JS）_第1张图片在这里插入图片描述

  1. 手指滑动轮播图：本质是ul跟随手指移动，简单说就是移动端的拖动元素功能； 利用触摸事件touchstart来获取手指初始坐标； touchmove来计算手指的滑动距离，并且移动盒子； touchend手指离开事件通过滑动的距离判断不同的情况： 如果移动距离小于某个像素，就回弹到原来的位置，如果移动距离大于某个像素就滑动到上一张或者下一张
  2. 性能优化1：当我们点击轮播图的图片时，又不想移动了，这时候手指离开需要执行一大段代码。优化办法为：加一个flag全局变量，只有当手指真的移动了，才执行手指离开的一系列代码操作
  3. 性能优化2：如果屏幕比较长，手指在移动轮播图的过程可能会滚动屏幕。优化方法为：取消默认滚动屏幕的行为。在touchmove事件里加上e.preventDefault();即可

JS核心代码

<script>
        // 获取元素
        var ul = document.querySelector('.slider-wrap');
        var lis = ul.querySelectorAll('li');
        var banner = document.querySelector('.banner');
        var ol = banner.lastElementChild;
        // 1.图片滚动
        // 获取banner宽度
        var w = banner.offsetWidth;
        var index = 0;
        var timer = setInterval(function () {
            index++;
            var translatex = -index * w;
            // ul.style.transform = 'translateX('+ translatex + ' px)';//这个就不行？
            ul.style.transition = 'all .3s';
            ul.style.transform = 'translateX(' + translatex + 'px)';
        }, 2000);
        // 2.无缝滚动
        // 等图片过渡完成之后，再去判断监听过渡完成的事件
        ul.addEventListener('transitionend', function () {
            console.log(1);
            if (index >= 3) {
                index = 0;
                // 去掉过渡，让ul快速跳到目标位置
                ul.style.transition = 'none';
                //利用最新的索引号乘以宽度 继续滚动图片
                var translatex = -index * w;
                ul.style.transform = 'translateX(' + translatex + 'px)';
            } else if (index < 0) {
                index = 2;
                ul.style.transition = 'none';
                //利用最新的索引号乘以宽度 继续滚动图片
                var translatex = -index * w;
                ul.style.transform = 'translateX(' + translatex + 'px)';

            }
            // 3.小圆点跟随变化
            ol.querySelector('.current').classList.remove('current');
            ol.children[index].classList.add('current');

        })


        // 4. 手指滑动轮播图
        // 触摸元素touchstart：获取手指初始坐标
        var startX = 0;
        var moveX = 0;  // 后面会使用这个移动距离，所以要定义为全局变量
        var flag = false;  //用来标志手指是否真的移动，还是只是点击
        ul.addEventListener('touchstart', function (e) {
            startX = e.targetTouches[0].pageX;
            // 手指触摸的时候就停止定时器
            clearInterval(timer);
        });
        // 移动手指touchmove：计算手指的滑动距离，并且移动盒子
        ul.addEventListener('touchmove', function (e) {
            // 计算移动距离
            // e.targetTouches[0]为第一个手指，[1]表示第二个手指
            moveX = e.targetTouches[0].pageX - startX;
            // 移动盒子：盒子原来的位置 + 手指移动的距离
            var translateX = -index * w + moveX;
            // 手指拖动的时候，不需要动画效果，所以要取消过渡效果
            ul.style.transition = 'none';
            ul.style.transform = 'translateX(' + translateX + 'px)';
            flag = true;
            e.preventDefault();   //组织滚动屏幕的行为
        });
        // 手指离开，根据移动距离去判断是回弹还是播放上一张或者下一张
        ul.addEventListener('touchend', function (e) {
            // 只有手指移动过了，才执行下面的代码
            if (flag) {
                //（1）如果移动距离大于50像素，则播放上一张或者下一张
                if (Math.abs(moveX) > 50) {
                    // 如果是右滑就是播放上一张，moveX是正值
                    if (moveX > 0) {
                        index--;
                    } else {
                        // 如果是左滑就是播放下一张，moveX是负值
                        index++;
                    }
                    // 用最新的index乘以宽度
                    var translateX = -index * w;
                    ul.style.transition = 'all .3s';
                    ul.style.transform = 'translateX(' + translateX + 'px)';
                } else {
                    //（2）如果移动距离小于50像素就回弹
                    var translateX = -index * w;
                    ul.style.transition = 'all .1s';
                    ul.style.transform = 'translateX(' + translateX + 'px)';
                }
            }
            // 手指离开的时候就重新开启定时器
            // 注意：开启定时器之前要先清空之前的定时器，保证当前只有一个定时器在执行
            clearInterval(timer);
            timer = setInterval(function () {
                index++;
                var translateX = -index * w;
                // 添加动画效果
                ul.style.transition = 'all .3s';
                ul.style.transform = 'translateX(' + translateX + 'px)';
            }, 2000);
        });


    </script>

你可能感兴趣的:(JavaScript初级,【前端学习笔记】,javascript,css,css3)

  • android 自定义曲线图,Android自定义View——贝赛尔曲线 weixin_39767513 android自定义曲线图
    个人博客：haichenyi.com。感谢关注本文针对有一定自定义View的童鞋，最好对贝赛尔曲线有辣么一丢丢了解，不了解也没关系。花5分钟看一下GcsSloop的安卓自定义View进阶-Path之贝塞尔曲线。本文的最终效果图：最终效果图.gif思路首先他是一个只有上半部分的正弦形状的水波纹，很规则。其次，他这个正弦图左右在移动。然后，就是它这个自定义View，上下也在移动，是慢慢增加的最后，优化
  • 大前端-postcss安装使用指南 黑夜照亮前行的路 postcss
    PostCSS是一款强大的CSS处理工具，可以用来自动添加浏览器前缀、代码合并、代码压缩等，提升代码的可读性，并支持使用最新的CSS语法。以下是一份简化的PostCSS安装使用指南：一、安装PostCSS在你的项目目录中，通过npm（NodePackageManager）来安装PostCSS。打开命令行窗口，输入以下命令：bash复制代码npminstallpostcss--save-dev这将把
  • 3、JavaWeb-Ajax/Axios-前端工程化-Element 所谓远行Misnearch #JavaWeb前端ajaxelementuijava前端框架
    P34Ajax介绍Ajax:AsynchroousJavaScriptAndXML，异步的JS和XMLJS网页动作，XML一种标记语言，存储数据，作用：数据交换：通过Ajax给服务器发送请求，并获取服务器响应的数据异步交互：在不重新加载整个页面的情况下，与服务器交换数据并实现更新部分网页的技术，例如：搜索联想、用户名是否可用的校验等等。同步与异步：同步：服务器在处理中客户端要处于等待状态，输入域名
  • 李金清焦点网络初级班34期 约练46次，坚持分享79天 清水清水
    约练心得咨询中，忍受不了沉默；聊天中，忍受不了寂静；工作中，忍受不了闲暇。自己心中按耐不住的着急，总想一步做的最好，总想让大家开心，总怕别人尴尬，总怕冷场，，，这些都充满着习惯，充满着认为自己该做的事。咨询中的沉默是为了让来访者时间考虑思索，更好的打开，有力咨询的开展。聊天中的静下来，是为了对上个问题的思考和对下个问题的开展留有空间。工作中的闲暇，是为了让自己有时间静下来整理和积累，为了以后的忙而
  • Python dict字符串转json对象，小数精度丢失问题 朝如青丝 暮成雪 jsonpython
    一前言JSON(JavaScriptObjectNotation)是一种轻量级的数据交换格式，dict是Python的一种数据格式。本篇介绍一个float数据转换时精度丢失的案例。二问题描述importjsontest_str1='{"π":3.1415926535897932384626433832795028841971}'test_str2='{"value":10.00000}'print
  • 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}(-
  • react native 总结 一切顺势而行 reactnativereact.jsjavascript
    reactapp.js相当与vueapp.vueimportReactfrom'react';import'./App.css';importReactRoutefrom'./router'import{HashRouterasRouter,Link}from'react-router-dom'classAppextendsReact.Component{constructor(props){su
  • 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是一种轻量级的数据
  • javascript的数据类型及转换 田小田txt
    一、JavaScript数据类型：共有string，number，boolean，object，function五种数据类型；其中Object，Date，Array为对象型；2个不包含任何值的数据类型：null，undefined。二、Typeof查看数据类型：typeof"John"//返回stringtypeof3.14//返回numbertypeofNaN//返回numbertypeoffa
  • 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
  • JavaScript快速入门笔记之二（变量、常量、数据类型） eshineLau 前端开发javascript笔记前端
    JavaScript快速入门笔记之二（变量、常量、数据类型）1、变量何时使用变量：程序中的一切数据都要保存在变量中，反复使用如何使用变量：2种情况：赋值和取值赋值：2步：1.1创建变量：——声明——创建一个新的空变量语法：var变量名;强调：仅声明，未赋值的变量，默认值是undefined命名：1.不能以数字开头2.不能用保留字。3.一般采用驼峰命名1.2赋值：将数据保存到变量中语法：变量名=数据
  • 张乐，中原焦点团队网络初级第33期，坚持分享第75天，2022-05-04 梦里花雕
    奇迹问句奇迹问句引导当事人进入想象：当问题已经获得解决时之未来美好愿景、细节以及正向影响为何。再结合其他问句带领当事人思考如何由目前的处境向此愿景靠近一步。奇迹问句给予当事人一个深层的相信与想象：他们的生活是可以改变的。如此将能鼓舞当事人拥有希望，也让当事人愿意思考可能改变的结果与好处。奇迹问句特别能在尊重当事人的问题强度下，使当事人能戏剧化地从谈论问题转而开始聚焦思考解决之道，同时还能帮助当事人
  • 前端埋点解决方案 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
  • vue时间组件：dayjs与moment 煸橙干儿~~ VUE实战vue.js前端javascript
    一、dayjs使用Day.js是一个极简的JavaScript库，可以为现代浏览器解析、验证、操作和显示日期和时间。具体使用可参考：dayjs官网1、本年start=dayjs().startOf('year').format('YYYY-MM-DD')end=dayjs().endOf('year').format('YYYY-MM-DD')console.log(start,end)//['2
  • webpack快速基础 风漫漫雨歇歇 webpackwebpack前端前端框架
    文章目录webpack快速基础1.概念1.1入口1.2输出(output)1.3loader1.4插件（plugin)2.建立项目，用于测试功能2.1安装webpack，2.2创建webpack配置文件,2.3配置package.json，运行项目3.配置mode开发环境4.配置entry编译入口5.配置output编译出口6.配置加载csswebpack快速基础1.概念webpack是现代Jav
  • 帮你清理阻碍你摄影进步的7个问题 暂未命名人员
    “为什么自己拍的照片不够好看？”这个问题是每个摄影师晋级之路上都会遇到的，可以算是摄影爱好者或者是职业摄影师成长之路必须要经历的瓶颈期。如何找到问题根源并比较快地提升摄影水平呢？1、是否每幅照片都要有主体——主体与主题的探讨许多初级摄影者可能不会考虑这类问题，主体与主题究竟是什么样的关系，是否每张照片都需要一个明确的主题或主体。但当你拍摄的照片被问“你拍这张照片究竟想说明什么？”、“你想呈现给观者
  • CSS color-mix() 函数 蚂蚁上的大象 前端的那些事CSScss前端
    CSScolor-mix()函数是近年来CSS色彩模块新增的一项强大功能，允许开发者在样式表中直接混合两种或多种颜色。这一特性为设计师和开发者带来了更多创作空间，让网页的颜色设计变得更加生动和丰富。本文将带你了解color-mix()函数的使用方法及其在实际项目中的应用。什么是CSScolor-mix()函数？color-mix()是一个即将推出的CSS颜色函数，它能够根据指定的颜色模型（如RGB
  • DIV + CSS 布局：盒子内容超出宽度时，不换行，以滚动条形式水平滑动 01空间 常见场景解决方案csshtml
    滚动条水平滚动展示溢出内容htmlcss（less）思路html11112222333344445555666677778888css（less）.outer{background-color:#39a9ed;overflow-x:auto;&::-webkit-scrollbar{display:none;}white-space:nowrap;.item{display:inline-bloc
  • APP UI自动化测试思路总结 程序员老鹰 ui测试工具开发语言软件测试经验分享程序人生程序员
    首先想要说明一下，APP自动化测试可能很多公司不用，但也是大部分自动化测试工程师、高级测试工程师岗位招聘信息上要求的，所以为了更好的待遇，我们还是需要花时间去掌握的，毕竟谁也不会跟钱过不去。接下来，一起总结一下APPUI自动化测试的思路吧。一，开发语言选择通常用于自动化测试的编程语言有：Python、Java、Javascript、Ruby、C#、PHP等。一般我们会选择自己熟悉的编程语言来编写自
  • JS的设计模式（23种） 是个车迷 JavaScriptjavascript设计模式开发语言
    JavaScript设计模式是指在JavaScript编程中普遍应用的一系列经过验证的最佳实践和可重用的解决方案模板，它们用来解决在软件设计中频繁出现的问题，如对象的创建、职责分配、对象间通信以及系统架构等。设计模式并不特指某个具体的代码片段，而是一种描述在特定上下文中如何组织程序结构和对象交互的通用指导原则。JavaScript设计模式涵盖了创建型模式（处理对象创建的方式）、结构型模式（关注对象
  • 二月难忘，未来可期 悠之不语斋
    大家好，我是来自河南项城莲溪初级中学的龚淑华，非常荣幸能在这里交流分享，我分享的题目是《二月难忘，未来可期》就在今天冬天，我们美丽的神州大地，上亿万家庭迎来了一场突如其来的没有硝烟的战争，全国各地像按下了暂停键一样，二月，也一改往日的喧嚣，全国人民，同心抗疫。同时，也让我们人类有时间静静的深深的思索，人类需要大自然、大自然不需要人类。人类的确应该敬畏大自然，否则，后果严重的无法想象！在这个二月里，
  • JavaScript和HTML/CSS之间有什么区别？它们之间的关系是什么？ 智伴科技 javascripthtmlcss
    下面是一个简单的代码示例，展示了HTML、CSS和JavaScript是如何一起工作的：HTML,CSS,JavaScriptExample/*在HTML文档内使用内联CSS*/.greeting{color:blue;font-size:24px;}Hello,素材8网，www.sucai8.cnChangeText//在HTML文档内使用内联JavaScriptdocument.addEven
  • 【SQL】COUNT(*)和COUNT(1)有什么区别？查看国外论坛我竟发现了领先国内十几年的早期互联网battle！ 独上西楼影三人 计算机常识sql数据库OracleMySQLPostgreSQLSQLServer
    前言近期浏览网页时又看到类似内容的文章，遂觉得有必要写一篇文章深入分析一下该问题的历史渊源，何以持续探讨了几十年。对于初级开发者、DBA、数据开发人员来说，面试时很可能会被问到“COUNT(*)和COUNT(1)有什么区别？”这个问题。网上也有很多资料有说不一样的（早年间很普遍），有说一样的。那么真实情况是什么样呢？下面且听我娓娓道来。1、结论正常来讲，一个设计良好、符合国际标准的数据库管理软件系
  • 【大咖力荐 新手必备】软件开发入门，这300篇文章就够了！ 高校俱乐部 软件开发新手必备数据编码IP
    小编在这里根据知识图谱整理了CSDN站内的优质文章300篇，帮助见习工程提升技术能力、实现系统化学习！基础IT技术文章300篇大合集包含：【信息/编码】进制转换25篇、数据编码25篇；【IP/组网】网关与网段25篇、IP协议26篇、主机与DNS23篇、访问控制37篇；【程序逻辑】JavaScript29篇、常用算法37篇；【Web基础】HTML31篇、CSS32篇、DOM与BOM23篇扫码添加小助
  • 项目里面引入字体包react 前端小灰灰
    项目里面引入字体包：①字体包放在public目录下，②新建一个font.css文件，//font.css@font-face{font-family:AlibabaSans;src:url('./font/AlibabaSans-Black.otf');}③在HTML文件全局引入④然后在less里面就能使用了：例：font-family:AlibabaSans;
  • CSS-DAY2 i330. 前端css前端
    CSS-DAY22024/2/4Emmet语法快速生成HTML结构语法如果想要生成多个相同标签加上*就可以了比如div*3就可以快速生成3个div如果有父子级关系的标签，可以用>比如ul>li就可以了如果有兄弟关系的标签，用+就可以了比如div+p如果生成带有类名或者id名字的，直接写.demo或者#twotab键就可以了（默认是div，如需修改其他标签只需在.之前加上标签名即可，如p.color
  • 问了一下 GPT--当前基于 React + TypeScript 的生态中 一名前端工程师需要具备哪些能力？ zoe_ya 前端gptreact.js
    在当前基于React+TypeScript的生态中，你需要掌握一系列的技能和知识，以构建现代化、高效能且可维护的前端应用程序。以下是一些关键领域的知识和技能点：基础知识HTML/CSS/JavaScript:理解语义化的HTML、CSS布局和定位技术以及现代JavaScript（ES6+）的特性。TypeScript:掌握TypeScript的基本语法、类型系统以及如何在React项目中使用Typ
  • reactive 和ref区别和原理 小王学前端️ vue3vue.js前端javascript
    reactive和ref区别和原理在Vue3中，reactive和ref都是用来创建响应式数据的方法。它们的主要区别在于如何使用它们以及它们如何处理值.reactive是用来创建响应式对象的。当你传递一个普通的JavaScript对象给reactive，它会返回一个新的响应式对象，这个对象与原始对象具有相同的属性和值，但是当这些属性被修改时，Vue会自动跟踪这些更改并更新视图。import{rea
  • 矩阵求逆（JAVA）初等行变换 qiuwanchi 矩阵求逆（JAVA）
    package gaodai.matrix; import gaodai.determinant.DeterminantCalculation; import java.util.ArrayList; import java.util.List; import java.util.Scanner; /** * 矩阵求逆(初等行变换) * @author 邱万迟 *
  • JDK timer antlove javajdkschedulecodetimer
    1.java.util.Timer.schedule(TimerTask task, long delay)：多长时间（毫秒）后执行任务 2.java.util.Timer.schedule(TimerTask task, Date time)：设定某个时间执行任务 3.java.util.Timer.schedule(TimerTask task, long delay,longperiod
  • JVM调优总结 -Xms -Xmx -Xmn -Xss coder_xpf jvm应用服务器
    堆大小设置JVM 中最大堆大小有三方面限制：相关操作系统的数据模型（32-bt还是64-bit）限制；系统的可用虚拟内存限制；系统的可用物理内存限制。32位系统下，一般限制在1.5G~2G；64为操作系统对内存无限制。我在Windows Server 2003 系统，3.5G物理内存，JDK5.0下测试，最大可设置为1478m。 典型设置： java -Xmx
  • JDBC连接数据库 Array_06 jdbc
    package Util; import java.sql.Connection; import java.sql.DriverManager; import java.sql.ResultSet; import java.sql.SQLException; import java.sql.Statement; public class JDBCUtil { //完
  • Unsupported major.minor version 51.0（jdk版本错误） oloz java
    java.lang.UnsupportedClassVersionError: cn/support/cache/CacheType : Unsupported major.minor version 51.0 (unable to load class cn.support.cache.CacheType) at org.apache.catalina.loader.WebappClassL
  • 用多个线程处理1个List集合 362217990 多线程threadlist集合
      昨天发了一个提问，启动5个线程将一个List中的内容，然后将5个线程的内容拼接起来，由于时间比较急迫，自己就写了一个Demo，希望对菜鸟有参考意义。。 import java.util.ArrayList; import java.util.List; import java.util.concurrent.CountDownLatch; public c
  • JSP简单访问数据库 香水浓 sqlmysqljsp
    学习使用javaBean，代码很烂，仅为留个脚印 public class DBHelper { private String driverName; private String url; private String user; private String password; private Connection connection; privat
  • Flex4中使用组件添加柱状图、饼状图等图表 AdyZhang Flex
    1.添加一个最简单的柱状图 ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 <?xml version= "1.0"&n
  • Android 5.0 - ProgressBar 进度条无法展示到按钮的前面 aijuans android
    在低于SDK < 21 的版本中，ProgressBar 可以展示到按钮前面，并且为之在按钮的中间，但是切换到android 5.0后进度条ProgressBar 展示顺序变化了，按钮再前面，ProgressBar 在后面了我的xml配置文件如下：   [html]  view plain copy   <RelativeLa
  • 查询汇总的sql baalwolf sql
    select   list.listname, list.createtime,listcount from dream_list as list ,   (select listid,count(listid) as listcount  from dream_list_user  group by listid  order by count(
  • Linux du命令和df命令区别 BigBird2012 linux
            1，两者区别             du，disk usage,是通过搜索文件来计算每个文件的大小然后累加，du能看到的文件只是一些当前存在的，没有被删除的。他计算的大小就是当前他认为存在的所有文件大小的累加和。        
  • AngularJS中的$apply，用还是不用？ bijian1013 JavaScriptAngularJS$apply
            在AngularJS开发中，何时应该调用$scope.$apply()，何时不应该调用。下面我们透彻地解释这个问题。         但是首先，让我们把$apply转换成一种简化的形式。         scope.$apply就像一个懒惰的工人。它需要按照命
  • [Zookeeper学习笔记十]Zookeeper源代码分析之ClientCnxn数据序列化和反序列化 bit1129 zookeeper
    ClientCnxn是Zookeeper客户端和Zookeeper服务器端进行通信和事件通知处理的主要类，它内部包含两个类，1. SendThread 2. EventThread， SendThread负责客户端和服务器端的数据通信，也包括事件信息的传输，EventThread主要在客户端回调注册的Watchers进行通知处理   ClientCnxn构造方法   &
  • 【Java命令一】jmap bit1129 Java命令
    jmap命令的用法：   [hadoop@hadoop sbin]$ jmap Usage: jmap [option] <pid> (to connect to running process) jmap [option] <executable <core> (to connect to a
  • Apache 服务器安全防护及实战 ronin47
    此文转自IBM. Apache 服务简介 Web 服务器也称为 WWW 服务器或 HTTP 服务器 (HTTP Server)，它是 Internet 上最常见也是使用最频繁的服务器之一，Web 服务器能够为用户提供网页浏览、论坛访问等等服务。 由于用户在通过 Web 浏览器访问信息资源的过程中，无须再关心一些技术性的细节，而且界面非常友好，因而 Web 在 Internet 上一推出就得到
  • unity 3d实例化位置出现布置？ brotherlamp unity教程unityunity资料unity视频unity自学
    问：unity 3d实例化位置出现布置？ 答：实例化的同时就可以指定被实例化的物体的位置,即 position  Instantiate (original : Object, position : Vector3, rotation : Quaternion) : Object 这样你不需要再用Transform.Position了,   如果你省略了第二个参数(
  • 《重构，改善现有代码的设计》第八章 Duplicate Observed Data bylijinnan java重构
    import java.awt.Color; import java.awt.Container; import java.awt.FlowLayout; import java.awt.Label; import java.awt.TextField; import java.awt.event.FocusAdapter; import java.awt.event.FocusE
  • struts2更改struts.xml配置目录 chiangfai struts.xml
    struts2默认是读取classes目录下的配置文件，要更改配置文件目录，比如放在WEB-INF下，路径应该写成../struts.xml(非/WEB-INF/struts.xml) web.xml文件修改如下：   <filter> <filter-name>struts2</filter-name> <filter-class&g
  • redis做缓存时的一点优化 chenchao051 redishadooppipeline
            最近集群上有个job，其中需要短时间内频繁访问缓存，大概7亿多次。我这边的缓存是使用redis来做的，问题就来了。       首先，redis中存的是普通kv，没有考虑使用hash等解结构，那么以为着这个job需要访问7亿多次redis，导致效率低，且出现很多redi
  • mysql导出数据不输出标题行 daizj mysql数据导出去掉第一行去掉标题
    当想使用数据库中的某些数据，想将其导入到文件中，而想去掉第一行的标题是可以加上-N参数 如通过下面命令导出数据： mysql -uuserName -ppasswd -hhost -Pport -Ddatabase -e " select * from tableName"  > exportResult.txt 结果为： studentid
  • phpexcel导出excel表简单入门示例 dcj3sjt126com PHPExcelphpexcel
    先下载PHPEXCEL类文件，放在class目录下面，然后新建一个index.php文件，内容如下 <?php error_reporting(E_ALL); ini_set('display_errors', TRUE); ini_set('display_startup_errors', TRUE);   if (PHP_SAPI == 'cli') die('
  • 爱情格言 dcj3sjt126com 格言
     1) I love you not because of who you are, but because of who I am when I am with you. 　　 我爱你，不是因为你是一个怎样的人，而是因为我喜欢与你在一起时的感觉。 　　2) No man or woman is worth your tears, and the one who is, won‘t
  • 转 Activity 详解——Activity文档翻译 e200702084 androidUIsqlite配置管理网络应用
    activity 展现在用户面前的经常是全屏窗口，你也可以将 activity 作为浮动窗口来使用（使用设置了 windowIsFloating 的主题），或者嵌入到其他的 activity （使用 ActivityGroup ）中。 当用户离开 activity 时你可以在 onPause() 进行相应的操作 。更重要的是，用户做的任何改变都应该在该点上提交 ( 经常提交到 ContentPro
  • win7安装MongoDB服务 geeksun mongodb
    1.  下载MongoDB的windows版本：mongodb-win32-x86_64-2008plus-ssl-3.0.4.zip，Linux版本也在这里下载，下载地址： http://www.mongodb.org/downloads   2.  解压MongoDB在D:\server\mongodb, 在D:\server\mongodb下创建d
  • Javascript魔法方法:__defineGetter__,__defineSetter__ hongtoushizi js
    转载自： http://www.blackglory.me/javascript-magic-method-definegetter-definesetter/ 在javascript的类中,可以用defineGetter和defineSetter_控制成员变量的Get和Set行为 例如,在一个图书类中,我们自动为Book加上书名符号: function Book(name){
  • 错误的日期格式可能导致走nginx proxy cache时不能进行304响应 jinnianshilongnian cache
    昨天在整合某些系统的nginx配置时，出现了当使用nginx cache时无法返回304响应的情况，出问题的响应头： Content-Type:text/html; charset=gb2312 Date:Mon, 05 Jan 2015 01:58:05 GMT Expires:Mon , 05 Jan 15 02:03:00 GMT Last-Modified:Mon, 05
  • 数据源架构模式之行数据入口 home198979 PHP架构行数据入口
    注：看不懂的请勿踩，此文章非针对java，java爱好者可直接略过。   一、概念 行数据入口（Row Data Gateway）：充当数据源中单条记录入口的对象，每行一个实例。   二、简单实现行数据入口 为了方便理解，还是先简单实现： <?php /** * 行数据入口类 */ class OrderGateway { /*定义元数
  • Linux各个目录的作用及内容 pda158 linux脚本
    1）根目录“/” 　　根目录位于目录结构的最顶层，用斜线（/）表示，类似于 Windows 操作系统的“C:\“，包含Fedora操作系统中所有的目录和文件。 　　2）/bin 　　/bin 　　目录又称为二进制目录，包含了那些供系统管理员和普通用户使用的重要 linux命令的二进制映像。该目录存放的内容包括各种可执行文件，还有某些可执行文件的符号连接。常用的命令有：cp、d
  • ubuntu12.04上编译openjdk7 ol_beta HotSpotjvmjdkOpenJDK
    获取源码 从openjdk代码仓库获取(比较慢) 安装mercurial Mercurial是一个版本管理工具。 sudo apt-get install mercurial 将以下内容添加到$HOME/.hgrc文件中，如果没有则自己创建一个： [extensions] forest=/home/lichengwu/hgforest-crew/forest.py fe
  • 将数据库字段转换成设计文档所需的字段 vipbooks 设计模式工作正则表达式
            哈哈，出差这么久终于回来了，回家的感觉真好！         PowerDesigner的物理数据库一出来，设计文档中要改的字段就多得不计其数，如果要把PowerDesigner中的字段一个个Copy到设计文档中，那将会是一件非常痛苦的事情。
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他