滚动篇————附一个简单单的自定义滚动条

好几天没有发文了，这几天考试，所有耽搁了下来。今天说一说滚动的问题。
前端学习中，页面滚动是一个很重要的部分。
首先要说的是偏移量的问题。先看元素的几个属性
1.offsetHeight,offsetWidth:这两个属性是元素在水平和垂直方向所占的空间大小。包含边框。
2.offsetLeft,offsetTop:元素相对于包含元素的上、左方向的距离。
再看一个问题，客户区的大小，指的是元素内容及其内边距所占的空间大小。不包含边框。用clientWidth,clientHeight表示。
最后要介绍的是滚动大小，scrollHeigth,和scrollWidth表示在没有滚动条的情况下，元素内容的总高度和总宽度。scrollLeft,scrollTop，被隐藏的内容区域的像素数。
在涉及浏览器的滚动的时候需要注意的是，混杂模式下IE是在body中滚动，而其他的浏览器大多认为是在浏览器的视口中滚动，所以在这里就用做一些兼容问题：

scrollHeight = document.documentElement.scrollHeight||document.body.scrollHeight;

接下来通过一个自定义滚动条来进一步讨论这两个问题。

<head>

    <script>

window.onload=function(){

    var div3=document.getElementById("div3");

    var div2=document.getElementById('div2');

    var div4=document.getElementById('div4');



    div3.onmousedown=function(e){

      var  e=e||event;



        var yy= e.clientY-div3.offsetTop





        document.onmousemove=function(ev){

         var   e=ev||event;

         var  l = e.clientY-yy;

            if(l<0){

                l=0;

            }else if(l>390){

                l=390   ;

            };

            div3.style.top=l+'px';

            div4.style.top=-l/390*(div4.offsetHeight-400)+'px';



        }

        document.onmouseup=function(){

            document.onmousemove=null;

        }

        return false;

    }

}



    </script>

    <style type="text/css">

        #div1{

            width:100px;

            height:400px;

            border:solid black 1px;

            float:left;

            position: relative;

        }

    </style>

</head>



<div id="div1" >

    <div id="div4" style="position: absolute;width:100px;overflow:hidden;">

    # 在此处输入标题



    标签（空格分隔）： 未分类



    ---

    ##javascript中event汇总

    ie firefox chrome opera Safari浏览器中对 event的处理并不一致，在此我将各个浏览器中event的兼容处理做了一个汇总，此处引用的是javascript中的event兼容处理代码。

    

    var EventUtil = {//在这里我们用一个对象来将对event的各种兼容处理封装起来

    //首先是对绑定事件的兼容

    addHandler: function(element, type, handler){

    if (element.addEventListener){

    //DOM2级处理绑定事件方法

    element.addEventListener(type, handler, false);

    } else if (element.attachEvent){

    //IE绑定方法

    element.attachEvent("on" + type, handler);

    } else {

    //DOM0级处理方法（可选，仅支持DOM0级的浏览器似乎已经不存在了）

    element["on" + type] = handler;

    }

    },

    //鼠标按钮的兼容处理

    getButton: function(event){

    if (document.implementation.hasFeature("MouseEvents", "2.0")){//首先检查是否是DOM标准

    return event.button;

    } else {

    //对IE向DOM兼容

    switch(event.button){

    case 0:

    case 1:

    case 3:

    case 5:

    case 7:

    return 0;

    case 2:

    case 6:

    return 2;

    case 4: return 1;

    }

    }

    },

    //获取字符编码

    getCharCode: function(event){

    if (typeof event.charCode == "number"){

    return event.charCode;

    } else {//IE8之前和opera 需要使用keyCode获取字符编码

    return event.keyCode;

    }

    },

    //剪切板的访问

    getClipboardText: function(event){

    var clipboardData =  (event.clipboardData || window.clipboardData);

    return clipboardData.getData("text");

    },

    //得到事件对象

    getEvent: function(event){

    return event ? event : window.event;

    },

    //得到相关元素

    getRelatedTarget: function(event){

    if (event.relatedTarget){

    return event.relatedTarget;

    } else if (event.toElement){

    return event.toElement;

    } else if (event.fromElement){

    return event.fromElement;

    } else {

    return null;

    }



    },

    //得到事件目标

    getTarget: function(event){

    return event.target || event.srcElement;

    },

    //对滑轮事件进行兼容

    getWheelDelta: function(event){

    if (event.wheelDelta){

    return (client.engine.opera && client.engine.opera < 9.5 ? -event.wheelDelta : event.wheelDelta);

    } else {

    return -event.detail * 40;

    }

    },

    //阻止默认事件

    preventDefault: function(event){

    if (event.preventDefault){

    event.preventDefault();

    } else {

    event.returnValue = false;

    }

    },

    //移除事件

    removeHandler: function(element, type, handler){

    if (element.removeEventListener){

    element.removeEventListener(type, handler, false);

    } else if (element.detachEvent){

    element.detachEvent("on" + type, handler);

    } else {

    element["on" + type] = null;

    }

    },

    //设置剪切板内容

    setClipboardText: function(event, value){

    if (event.clipboardData){

    event.clipboardData.setData("text/plain", value);

    } else if (window.clipboardData){

    window.clipboardData.setData("text", value);

    }

    },

    //阻止事件冒泡

    stopPropagation: function(event){

    if (event.stopPropagation){

    event.stopPropagation();

    } else {

    event.cancelBubble = true;

    }

    }



    };

   

    此处添加的事件尚不完全，有待扩充。

    </div>

</div>

<div id="div2" style="height:400px;width:10px;border:1px solid black;float:left;position:relative;"><div id="div3" style="height:10px;width:10px;background:red;position:absolute;top:0px;"></div></div>

<body>



</div>

[实例测试](http://www.chinajs.net/test)

在这个自定义滚动条中我们通过设置top来更改元素的位置，不能使用scrollTop因为scrollTop是只读的。

你可能感兴趣的:(滚动条)

  • CSS 溢出问题及解决方案：实用案例与技巧 Judy1623 css前端
    在网页开发中，CSS的布局和样式起着至关重要的作用，但经常会遇到一个棘手的问题——溢出问题。溢出是指元素内的内容超出了其设定的容器大小，这不仅会影响页面的美观，还可能干扰用户体验。本文将详细探讨CSS溢出问题的案例，并提供常见的解决方法，同时给出相应的代码示例以供验证。visible：默认值，内容不会被剪裁，也不会显示滚动条。hidden：内容会被剪裁，并且不会显示滚动条。scroll：内容会被剪
  • uniapp 去除overflow-x overflow-y 产生的滚动条 星 辰. 前端html
    uniapp小程序去除overflow带来的滚动条要隐藏的盒子类名::-webkit-scrollbar{      width:0;      height:0;      background-color:transparent;   }
  • 2018移动端“事件交互篇-远程实战开发课程” weixin_44215351
    课程目录:1-移动端event相关问题2-touchEvent和滑屏3-滑屏的幻灯片（一）4-滑屏的幻灯片（二）5-移动端适配6-移动端布局注意事项7-音悦台布局8-显示隐藏的菜单和缓冲导航9-导航的缓冲和回弹动画10-滑屏选项卡上11-滑动选项卡12-3D（上）13-3D（下）14-百分比布局15-3d桌面切换16-touchEvent和transition的相关问题17-自定义滚动条18-相册
  • 移动端“事件交互篇-远程实战开发课程” qq_42672664 移动端
    课程目录:1-移动端event相关问题2-touchEvent和滑屏3-滑屏的幻灯片（一）4-滑屏的幻灯片（二）5-移动端适配6-移动端布局注意事项7-音悦台布局8-显示隐藏的菜单和缓冲导航9-导航的缓冲和回弹动画10-滑屏选项卡上11-滑动选项卡12-3D（上）13-3D（下）14-百分比布局15-3d桌面切换16-touchEvent和transition的相关问题17-自定义滚动条18-相册
  • Uniapp当中的scroll-view滚动条不出现或者触底刷新事件不触发 堕落年代 uniappuni-app
    一、未正确设置容器高度问题描述scroll-view未设置明确高度或高度值无效，导致无法形成有效滚动区域。解决方案•使用行内样式直接设置height（如style="height:500rpx;"），避免类名样式被覆盖。•动态计算高度（例如通过uni.getSystemInfoSync()获取屏幕剩余高度）。二、滚动条样式被覆盖或隐藏问题描述•默认滚动条被全局CSS样式（如::-webkit-sc
  • element表格滚动错位问题，使用uniapp写的项目 院人冲冲冲 uni-app
    element表格设置滚动条滚动到底错位_element表格滚动条无法滚动到最后-CSDN博客参考上面的博主写的::v-deep::-webkit-scrollbar{display:block!important;width:8px!important;height:8px!important;background:rgb(241,241,241)!important;-webkit-appea
  • element--el-table添加合计后固定列x轴滚动条无法滚动问题 冯浩(grow up) elementelement-plusvue.js前端javascript
    效果图改变固定列滚轮高度问题解决文章解决方案使用到的参数pointer-events属性用来控制一个元素能否响应鼠标操作，常用的关键字有auto和nonepointer-events:none;让一个元素忽略鼠标操作pointer-events:auto;还原浏览器设定的默认行为代码演示添加class添加css样式:deep.tableData{//滚动条高度调整::-webkit-scrollb
  • el-table（elementui）表格合计行使用以及滚动条默认样式修改 白小水i elementuivue.js前端
    一、el-table新增合计行以及el-table展示数据出现的问题1.使用合计行el-table的属性show-summary设为true，即可在表格尾部展示合计行。默认情况下，第一列不展示数据，而显示合计二字，可以通过sum-text自己配置，其余列会显示本列所有数据的和。__自定义合计逻辑:__在el-table标签使用summary-method传入一个方法，该方法会返回一个数组，该数组的
  • 鼠标拖动元素实现移动滚动条+实战 伊泽瑞尔. 前端开发实践javascript前端
    横向滚动条，选择隐藏滚动条ul{list-style-type:none;display:flex;border:1pxsolidred;width:200px;padding:0px;margin:5%;user-select:none;overflow-x:auto;/*添加横向滚动*/white-space:nowrap;/*防止标签换行*//*禁止文字复制*/}/*隐藏Webkit浏览器的
  • 在vue2项目中el-table表格的表头和内容错位问题 白小水i vue.jselementui前端
    一、问题描述以及产生原因问题描述：当el-table表格有横向滚动条和纵向滚动条，把横向滚动条拉到最右边，表格的表头会和内容错位（表头和内容列不对齐）问题产生原因：在el-table有纵向滚动条时，el-table__body-wrapper+纵向滚动条的宽度是100%，故表格内容区域宽度不足100%，而表头el-table__header-wrapper的宽度仍为100%，表格内容实际宽度小于表
  • 当内容超出宽度时实现横向滑动效果 十年 lius web前端csscsshtml5css3
    当内容超出宽度时，可以横向滚动我们经常会遇到内容超过高度时，页面出现滚动条，通过滚动条来继续浏览内容，比如当前页面就是。很简单，设置css属性overflow-y:auto;就可以实现。而如果想要内容不换行，当超过宽度，横向滚动呢，overflow-x:auto;就不能实现了，因为默认会换行。话不多说，直接上代码。{{prizeItem.amount}}.content{padding:020px
  • aardio - 虚表 —— 设置一个尺寸与内容完美匹配的表格 卢光庆 aardioaardio
    设置一个尺寸与内容完美匹配的表格。没有多余的空白背景。没有不必要的滚动条。importwin.ui;importgodking.vlistEx;/*DSG{{*/mainForm=win.form(text="vlistEx-tableadapter";right=639;bottom=647)mainForm.add(vlist={cls="vlistEx";left=8;top=8;right
  • html页面刷新瞬间有滚动条,js实现刷新页面后回到记录时滚动条的位置【两种方案可选】... 孙佳纯 html页面刷新瞬间有滚动条
    当div中绑定数据，给它一个属性overflow-y:scroll，添加长度大小，使其能够出现滚动条；每次刷新的时候滚动条总是会出现在最上方，这使我很头疼，经过查阅网上资料，返现两种方法可行。如下：第一种方案将上一个页面的div的scrolltop距离长度记录在cookie中，然后通过js调整刷新页面时的长度记录，代码如下：js代码：var_h=0;functionSetH(o){_h=o.scr
  • html 页面滚动时 div位置不变,js实现页面刷新滚动条位置不变 weixin_28785069 html页面滚动时div位置不变
    今天因为这个问题困扰了很久网上的例子都尝试没效果，后来发现一点原来是内容最外层没有div的原因protectedoverrideboolHeaderScriptFilter(Topevery.Framework.Web.Configuration.Scriptval){switch(val.Key){case"ajaxpro2.prototype":case"ajaxpro2.core":case
  • el-table 手动选择展示列 前端小趴菜05 vue.jsjavascriptelementui
    需求：由于表格的列过多,用滚动条进行滚动对比数据不方便，所以提出，手动选择展示列实现思路：表格默认展示所有字段，每个字段通过v-if属性来进行判断是否显示；点击设置按钮图标(表格右上角），弹出选择框el-popover；选择框中包括：全选复选框、所有字段复选框组el-checkbox-group、取消按钮、确定按钮；选择展示字段后，点击“确定”按钮：更新每个字段值的show属性（true/fals
  • wpf datagrid滚动使用外置滚动条控件 bug菌¹ 全栈Bug调优(实战版)#CSDN问答解惑(全栈版)wpf
    本文收录于《全栈Bug调优(实战版)》专栏，主要记录项目实战过程中所遇到的Bug或因后果及提供真实有效的解决方案，希望能够助你一臂之力，帮你早日登顶实现财富自由；同时，欢迎大家关注&&收藏&&订阅！持续更新中，up！up！up！！问题描述由于某些原因，我原本datagrid的垂直滚动条不能使用，故我希望在原本的datagrid旁边额外加上一条滚动条控件，让其绑定datagrid的滚动条，实现同步移
  • webView2 隐藏滚动条 雾散睛明 WebView2webview2隐藏滚动条
    参考：wenview2隐藏滚动条查看该链接内容，得知其主要是通过css修改body的overflow属性为：hide.这里贴出原链接的解决方案：privatevoidWebView2_NavigationCompleted(objectsender,CoreWebView2NavigationCompletedEventArgse){if(e.IsSuccess){((WebView2)sende
  • 解决 uView-UI和uv-ui 中 u-tabs 组件在微信小程序中出现横向滚动条的问题 溫冬＇＇123 uiuv微信小程序
    问题描述在微信小程序中使用uView-UI的u-tabs组件时，用户可能会遇到横向滚动条的问题。这不仅影响了页面的美观，还可能导致用户误操作。问题原因该问题的根本原因是未在微信小程序环境下屏蔽滚动条。uView-UI的u-tabs组件默认只在H5环境下屏蔽滚动条，而在微信小程序（MP-WEIXIN）环境下未做处理。解决方案要解决这个问题，我们需要修改u-tabs.vue文件，将微信小程序环境也加入
  • 完美隐藏滚动条方案 (2024 最新验证) AF01 javascript
    完美隐藏滚动条方案(2024最新验证)css/*全局隐藏竖直滚动条但保留滚动功能*/html{overflow:-moz-scrollbars-none;/*Firefox旧版*/scrollbar-width:none;/*Firefox64+*/-ms-overflow-style:none;/*IE/Edge*/overflow-y:overlay;/*防止布局偏移*/width:100vw
  • VBA第十四期 一种可以灵活显示的列表 jimin_callon windows服务器linux
    一种可以灵活显示的列表。VBA列表设计的时候，我们有时候需要显示足够多的数据，但如果我们一次性定义过多列，例如UserForm2.ListBox1.ColumnCount=100，这样定义有两个弊端，一是经常要拖动滚动条，二是大部分时间不需要看这么多数据。这样我们就需要设计一种可以灵活显示的列表，能够增加和减少显示列数。这里是通过一个文本框和两个按钮，一个增加显示列、一个减少显示列按钮，文本框用于
  • Qt常用控件之多行输入框QTextEdit laimaxgg qt开发语言c++qt6.3qt5
    多行输入框QTextEditQTextEdit是一个多行输入框控件，支持富文本和markdown格式，当文本内容超出编辑框的范围时能自动提供滚动条。QPlainTextEdit是只支持富文本格式的多行输入框，属性和使用上与QTextEdit几乎没有区别。QTextEdit属性属性说明markdown输入框内容，支持markdown格式，将markdown文本转化成html。html输入框内容，支持
  • HTML+JS+CSS 鼠标上下移动页面（非滚动条） 一念工作室 htmljavascriptcss
    HTML+JS+CSS鼠标上下移动页面（非滚动条）MouseDragScroll-IE11Compatiblebody{height:2000px;/*为了方便测试滚动效果，设置一个较长的页面*//*使用自定义的鼠标指针图片，这里假设图片名为grab.cur*/cursor:url('file:///C:/grab.cur'),default;}/*定义按下鼠标左键时的鼠标指针样式*/body.d
  • 怎么把焦点放在RichEdit的最后一行 猫叔66 C++Builder
    急急急！！！！如何把焦点放在RichEdit的最后一行！！请高手指点，在线等！！！！当添加到出现滚动条时焦点就不会往下了，怎么把焦点移到最后一行RichEdit->Lines->Add("ADF");------解决方案--------------------添加完以后让RichEdit滚动一下：RichEdit1->Lines->Add("ADF");RichEdit1->Lines->Add(
  • qtablewidget 设置列宽行高遇到的问题 foxgod windowsqt
    1设置行高和列宽后，点击网格线不完整的item时候，item不触发，滚动条滚动1//隐藏最后空列，有标题最后一行自动拉伸2ui.QTableWidget->horizontalHeader()->setStretchLastSection(true);这个方法我试了，是能自动完成列头的自动填充，但是有一个缺点：列头中空余的其余部分都是用最后一列来填充的，这样造成的问题就是最后一列很宽，严重影响美观
  • Kate文本编辑器 v24.12.9013 开源高级文本代码编辑器 SSASASA11 编辑器
    链接：https://pan.quark.cn/s/5577e74ab648Kate是一个可以跨平台使用的免费高级文本编辑器，支持标签页、代码高亮、显示行号、显示缩略图的滚动条、多文件查找、横向或者纵向显示多个视图等众多高级特性。软件功能1、双击当前标签页创建新标签页。2、支持启用/禁用自动换行。3、强大的多文件查找和替换功能。利用这个功能可以一键查找/替换所有已打开的文本中的内容。支持正则表达式
  • CSS 滚动条样式修改（详细） mr_cmx csscss3html
    1、滚动条整体部分使用::-webkit-scrollbar示例：.container::-webkit-scrollbar{width:20px;//修改滚动条宽度}2、滚动条中的滑块使用::-webkit-scrollbar-thumb示例：.container::-webkit-scrollbar-thumb{border-radius:8px;box-shadow:inset005pxrg
  • video 标签实现进度条不可拖动，并监听观看状态、超时触发挂机验证 牡丹城沉静的萝卜 html5前端javascript
    需求：用户观看视频时，实时监听观看状态，超过一定时长后，触发挂机验证，并禁止拖动滚动条快进查看。技术：主要是用html5的vidoe标签做的，用到了自带的暂停（pause）、播放（play）、监听（timeupdate）等事件html：javascript：data(){return{videoUrl:'',video:{currTime:'',maxTime:'',tipsTime:0,//出现
  • selenium 控制内嵌table滚动条的方法 qq_492448446 Web自动化selenium测试工具
    selenium控制内嵌table滚动条的方法我们经常会遇到selenium无法捕获到对应元素的问题，其中有一个原因是由于页面中存在滚动条，而需要操作的元素需要滑动滚动条后才能捕获到。之前有使用过如下方式：document.getElementById('id').scrollTop=10000但是当出现需要操作内嵌table的滚动条时，这种方式就不可用了。正确的操作方式如下，遇到这种情况时，需要
  • QT批量UI操作 qt
    在QT批量操作的时候,可以选择先将渲染关闭,用户操作关闭,等执行完后,开启渲染,开启用户操作voidbeginBatchOperations(QWidget*widget){widget->setUpdatesEnabled(false);widget->setEnabled(false);//需要的话还可以把滚动条disabled}voidendBatchOperations(QWidget*w
  • element-ui el-scrollbar滚动条初始化不显示 努力往上爬de蜗牛 vue.js前端elementui
    当使用el-scrollbar的时候，比如你的数据列表是后端获取的，这时候，初始化的时候，因为数据还没有获取到，导致里面的内容没有撑开，所以滚动条是不显示的，但是可以正常滚动。解决方法：获取左侧菜单的数据时，{{$t('menuTip')}}//解决滚动条初始化消失的问题--接口请求获取数据时this.$refs.scrollbar.update()
  • 统一思想认识 永夜-极光 思想
    1.统一思想认识的基础,才能有的放矢  原因:    总有一种描述事物的方式最贴近本质,最容易让人理解.    如何让教育更轻松,在于找到最适合学生的方式.          难点在于,如何模拟对方的思维基础选择合适的方式.   &
  • Joda Time使用笔记 bylijinnan javajoda time
    Joda Time的介绍可以参考这篇文章： http://www.ibm.com/developerworks/cn/java/j-jodatime.html 工作中也常常用到Joda Time，为了避免每次使用都查API，记录一下常用的用法：     /** * DateTime变化（增减） */ @Tes
  • FileUtils API eksliang FileUtilsFileUtils API
    转载请出自出处：http://eksliang.iteye.com/blog/2217374 一、概述 这是一个Java操作文件的常用库，是Apache对java的IO包的封装，这里面有两个非常核心的类FilenameUtils跟FileUtils，其中FilenameUtils是对文件名操作的封装;FileUtils是文件封装，开发中对文件的操作，几乎都可以在这个框架里面找到。 非常的好用。
  • 各种新兴技术 不懂事的小屁孩 技术
    1:gradle Gradle 是以 Groovy 语言为基础，面向Java应用为主。基于DSL（领域特定语言）语法的自动化构建工具。 现在构建系统常用到maven工具，现在有更容易上手的gradle， 搭建java环境: http://www.ibm.com/developerworks/cn/opensource/os-cn-gradle/ 搭建android环境： http://m
  • tomcat6的https双向认证 酷的飞上天空 tomcat6
    1.生成服务器端证书 keytool -genkey -keyalg RSA -dname "cn=localhost,ou=sango,o=none,l=china,st=beijing,c=cn" -alias server -keypass password -keystore server.jks -storepass password -validity 36
  • 托管虚拟桌面市场势不可挡 蓝儿唯美
    用户还需要冗余的数据中心，dinCloud的高级副总裁兼首席营销官Ali Din指出。该公司转售一个MSP可以让用户登录并管理和提供服务的用于DaaS的云自动化控制台，提供服务或者MSP也可以自己来控制。 在某些情况下，MSP会在dinCloud的云服务上进行服务分层，如监控和补丁管理。 MSP的利润空间将根据其参与的程度而有所不同，Din说。 “我们有一些合作伙伴负责将我们推荐给客户作为个
  • spring学习——xml文件的配置 a-john spring
    在Spring的学习中，对于其xml文件的配置是必不可少的。在Spring的多种装配Bean的方式中，采用XML配置也是最常见的。以下是一个简单的XML配置文件： <?xml version="1.0" encoding="UTF-8"?> <beans xmlns="http://www.springframework.or
  • HDU 4342 History repeat itself 模拟 aijuans 模拟
    来源：http://acm.hdu.edu.cn/showproblem.php?pid=4342 题意：首先让求第几个非平方数，然后求从1到该数之间的每个sqrt(i)的下取整的和。 思路：一个简单的模拟题目，但是由于数据范围大，需要用__int64。我们可以首先把平方数筛选出来，假如让求第n个非平方数的话，看n前面有多少个平方数，假设有x个，则第n个非平方数就是n+x。注意两种特殊情况，即
  • java中最常用jar包的用途 asia007 java
    java中最常用jar包的用途 jar包用途axis.jarSOAP引擎包commons-discovery-0.2.jar用来发现、查找和实现可插入式接口，提供一些一般类实例化、单件的生命周期管理的常用方法.jaxrpc.jarAxis运行所需要的组件包saaj.jar创建到端点的点到点连接的方法、创建并处理SOAP消息和附件的方法，以及接收和处理SOAP错误的方法.  w
  • ajax获取Struts框架中的json编码异常和Struts中的主控制器异常的解决办法 百合不是茶 jsjson编码返回异常
    一:ajax获取自定义Struts框架中的json编码  出现以下 问题:       1,强制flush输出  json编码打印在首页 2, 不强制flush js会解析json 打印出来的是错误的jsp页面   却没有跳转到错误页面 3,  ajax中的dataType的json 改为text 会
  • JUnit使用的设计模式 bijian1013 java设计模式JUnit
    JUnit源代码涉及使用了大量设计模式 1、模板方法模式（Template Method）         定义一个操作中的算法骨架，而将一些步骤延伸到子类中去，使得子类可以不改变一个算法的结构，即可重新定义该算法的某些特定步骤。这里需要复用的是算法的结构，也就是步骤，而步骤的实现可以在子类中完成。   
  • Linux常用命令（摘录） sunjing crondchkconfig
    chkconfig --list   查看linux所有服务 chkconfig --add servicename 添加linux服务 netstat -apn | grep 8080  查看端口占用 env 查看所有环境变量 echo $JAVA_HOME 查看JAVA_HOME环境变量   安装编译器 yum install -y gcc
  • 【Hadoop一】Hadoop伪集群环境搭建 bit1129 hadoop
     结合网上多份文档，不断反复的修正hadoop启动和运行过程中出现的问题，终于把Hadoop2.5.2伪分布式安装起来，跑通了wordcount例子。Hadoop的安装复杂性的体现之一是，Hadoop的安装文档非常多，但是能一个文档走下来的少之又少，尤其是Hadoop不同版本的配置差异非常的大。Hadoop2.5.2于前两天发布，但是它的配置跟2.5.0，2.5.1没有分别。 &nb
  • Anychart图表系列五之事件监听 白糖_ chart
    创建图表事件监听非常简单：首先是通过addEventListener('监听类型',js监听方法)添加事件监听，然后在js监听方法中定义具体监听逻辑。 以钻取操作为例，当用户点击图表某一个point的时候弹出point的name和value，代码如下： <script> //创建AnyChart var chart = new AnyChart(); //添加钻取操作&quo
  • Web前端相关段子 braveCS web前端
    Web标准：结构、样式和行为分离   使用语义化标签 0）标签的语义：使用有良好语义的标签，能够很好地实现自我解释，方便搜索引擎理解网页结构，抓取重要内容。去样式后也会根据浏览器的默认样式很好的组织网页内容，具有很好的可读性，从而实现对特殊终端的兼容。 1）div和span是没有语义的：只是分别用作块级元素和行内元素的区域分隔符。当页面内标签无法满足设计需求时，才会适当添加div
  • 编程之美-24点游戏 bylijinnan 编程之美
    import java.util.ArrayList; import java.util.Arrays; import java.util.HashSet; import java.util.List; import java.util.Random; import java.util.Set; public class PointGame { /**编程之美
  • 主页面子页面传值总结 chengxuyuancsdn 总结
    1、showModalDialog returnValue是javascript中html的window对象的属性,目的是返回窗口值,当用window.showModalDialog函数打开一个IE的模式窗口时,用于返回窗口的值 主界面 var sonValue=window.showModalDialog("son.jsp"); 子界面 window.retu
  • [网络与经济]互联网+的含义 comsci 互联网+
          互联网+后面是一个人的名字 = 网络控制系统       互联网+你的名字 =  网络个人数据库       每日提示:如果人觉得不舒服,千万不要外出到处走动,就呆在床上,玩玩手游,更不能够去开车,现在交通状况不
  • oracle 创建视图 with check option daizj 视图vieworalce
    我们来看下面的例子： create or replace view testview as select empno,ename from emp where ename like ‘M%’ with check option; 这里我们创建了一个视图，并使用了with check option来限制了视图。 然后我们来看一下视图包含的结果： select * from testv
  • ToastPlugin插件在cordova3.3下使用 dibov Cordova
        自己开发的Todos应用，想实现“ 再按一次返回键退出程序 ”的功能，采用网上的ToastPlugins插件，发现代码或文章基本都是老版本，运行问题比较多。折腾了好久才弄好。下面吧基于cordova3.3下的ToastPlugins相关代码共享。       ToastPlugin.java package&nbs
  • C语言22个系统函数 dcj3sjt126com cfunction
    C语言系统函数一、数学函数下列函数存放在math.h头文件中Double floor(double num) 求出不大于num的最大数。Double fmod(x, y) 求整数x/y的余数。Double frexp(num, exp); double num; int *exp; 将num分为数字部分（尾数）x和 以2位的指数部分n，即num=x*2n，指数n存放在exp指向的变量中，返回x。D
  • 开发一个类的流程 dcj3sjt126com 开发
    本人近日根据自己的开发经验总结了一个类的开发流程。这个流程适用于单独开发的构件，并不适用于对一个项目中的系统对象开发。开发出的类可以存入私人类库，供以后复用。   以下是开发流程： 1. 明确类的功能，抽象出类的大概结构 2. 初步设想类的接口 3. 类名设计（驼峰式命名） 4. 属性设置(权限设置) 判断某些变量是否有必要作为成员属
  • java 并发 shuizhaosi888 java 并发
    能够写出高伸缩性的并发是一门艺术   在JAVA SE5中新增了3个包 java.util.concurrent java.util.concurrent.atomic java.util.concurrent.locks 在java的内存模型中，类的实例字段、静态字段和构成数组的对象元素都会被多个线程所共享，局部变量与方法参数都是线程私有的，不会被共享。
  • Spring Security（11）——匿名认证 234390216 Spring SecurityROLE_ANNOYMOUS匿名
    匿名认证 目录 1.1     配置 1.2     AuthenticationTrustResolver          对于匿名访问的用户，Spring Security支持为其建立一个匿名的AnonymousAuthenticat
  • NODEJS项目实践0.2[ express,ajax通信...] 逐行分析JS源代码 Ajaxnodejsexpress
      一、前言         通过上节学习，我们已经        ubuntu系统搭建了一个可以访问的nodejs系统，并做了nginx转发。本节原要做web端服务 及 mongodb的存取，但写着写着，web端就
  • 在Struts2 的Action中怎样获取表单提交上来的多个checkbox的值 lhbthanks javahtmlstrutscheckbox
    第一种方法：获取结果String类型 在 Action 中获得的是一个 String 型数据，每一个被选中的 checkbox 的 value 被拼接在一起，每个值之间以逗号隔开(,)。 所以在 Action 中定义一个跟 checkbox 的 name 同名的属性来接收这些被选中的 checkbox 的 value 即可。 以下是实现的代码： 前台 HTML 代码：
  • 003.Kafka基本概念 nweiren hadoopkafka
    Kafka基本概念：Topic、Partition、Message、Producer、Broker、Consumer。 Topic：             消息源（Message）的分类。 Partition：             Topic物理上的分组，一
  • Linux环境下安装JDK roadrunners jdklinux
    1、准备工作 创建JDK的安装目录： mkdir -p /usr/java/   下载JDK，找到适合自己系统的JDK版本进行下载： http://www.oracle.com/technetwork/java/javase/downloads/index.html   把JDK安装包下载到/usr/java/目录，然后进行解压： tar -zxvf jre-7
  • Linux忘记root密码的解决思路 tomcat_oracle linux
    1：使用同版本的linux启动系统，chroot到忘记密码的根分区passwd改密码 　　2：grub启动菜单中加入init=/bin/bash进入系统，不过这时挂载的是只读分区。根据系统的分区情况进一步判断. 　　3: grub启动菜单中加入 single以单用户进入系统. 　　4:用以上方法mount到根分区把/etc/passwd中的root密码去除 　　例如: 　　ro
  • 跨浏览器 HTML5 postMessage 方法以及 message 事件模拟实现 xueyou jsonpjquery框架UIhtml5
    postMessage 是 HTML5 新方法，它可以实现跨域窗口之间通讯。到目前为止，只有 IE8+, Firefox 3, Opera 9, Chrome 3和 Safari 4 支持，而本篇文章主要讲述 postMessage 方法与 message 事件跨浏览器实现。postMessage 方法 JSONP 技术不一样，前者是前端擅长跨域文档数据即时通讯，后者擅长针对跨域服务端数据通讯，p
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他