webNick
webNick

h5之scrollIntoView控制页面元素滚动

　　如果滚动页面也是DOM没有解决的一个问题。为了解决这个问题，浏览器实现了一下方法，以方便开发人员如何更好的控制页面的滚动。在各种专有方法中，HTML5选择了scrollIntoView()作为标准方法。scrollIntoView()可以在所有的HTML元素上调用，通过滚动浏览器窗口或某个容器元素，调用元素就可以出现在视窗中。如果给该方法传入true作为参数，或者不传入任何参数，那么窗口滚动之后会让调动元素顶部和视窗顶部尽可能齐平。如果传入false作为参数，调用元素会尽可能全部出现在视口中（可能的话，调用元素的底部会与视口的顶部齐平。）不过顶部不一定齐平.

一、scrollIntoView

html

<div>
    <h2>scrollIntoViewh2>
    <button id="roll1">scrollIntoView(false)button>
    <button id="roll2">scrollIntoView(true)button>

    <div>
        <div id="myDiv">div>
        <div id="roll_top">
            scrollIntoView(ture)元素上边框与视窗顶部齐平
            <span id="bottom">scrollIntoView(false)元素下边框与视窗底部齐平span>
        div>
    div>
div>

css

       #myDiv {
            height: 900px;
            background-color: gray;

        }

        #roll_top {
            height: 900px;
            background-color: green;
            color: #FFF;
            font-size: 50px;
            position: relative;
        }

        #bottom {
            position: absolute;
            display: block;
            left: 0;
            bottom: 0;
        }

js

  window.onload = function () {
        document.querySelector("#roll1").onclick = function () {
            document.querySelector("#roll_top").scrollIntoView(false);
        };
        document.querySelector("#roll2").onclick = function () {
            document.querySelector("#roll_top").scrollIntoView(true);
        };
    }

二、滚动监听

html

<div>
    <h2>scrollh2>
    <div id="nav">
        <div class="f1">floor1div>
        <div class="f2">floor2div>
        <div class="f3">floor3div>
        <div class="f4">floor4div>
        <div class="f5">floor5div>
    div>
    <p>
        页面结构
    p>
    <div class="main">
        <div id="f1">测试1div>
        <div id="f2">测试2div>
        <div id="f3">测试3div>
        <div id="f4">测试4div>
        <div id="f5">测试5div>
    div>
div>

css

      .main div {
            height: 1000px;
            width: 300px;
            margin: 20px;
            background-color: #C0C0C0;
        }

        #nav {
            position: fixed;
            width: 100px;
            height: 200px;
            top: 40%;
            right: 10px;
        }

        #nav div {
            cursor: pointer;
            text-align: center;

        }

js

    $(function () {
        $(window).scroll(function () {//为页面添加页面滚动监听事件
            var wst = $(window).scrollTop(); //滚动条距离顶端值
            for (var i = 1; i < 6; i++) {             //加循环
                if ($("#f" + i).offset().top <= wst + 10) { //判断滚动条位置
                    $('#nav div').css("background-color", "white");
                    $(".f" + i).css("background-color", "red");
                }
            }
        });
        $('#nav div').click(function () {
            $('html,body').animate({scrollTop: $("#" + this.className).offset().top}, 500);
//          $("#" + this.className)[0].scrollIntoView(true);//h5 scrollIntoView()

        });
    });

全部代码

DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>h5之scrollIntoView控制页面元素滚动title>
    <style>

        /*scrollIntoView*/
        #myDiv {
            height: 900px;
            background-color: gray;

        }

        #roll_top {
            height: 900px;
            background-color: green;
            color: #FFF;
            font-size: 50px;
            position: relative;
        }

        #bottom {
            position: absolute;
            display: block;
            left: 0;
            bottom: 0;
        }

        /*scroll*/
        .main div {
            height: 1000px;
            width: 300px;
            margin: 20px;
            background-color: #C0C0C0;
        }

        #nav {
            position: fixed;
            width: 100px;
            height: 200px;
            top: 40%;
            right: 10px;
        }

        #nav div {
            cursor: pointer;
            text-align: center;

        }
    style>
head>

<body>
<div>
    <h2>scrollIntoViewh2>
    <button id="roll1">scrollIntoView(false)button>
    <button id="roll2">scrollIntoView(true)button>

    <div>
        <div id="myDiv">div>
        <div id="roll_top">
            scrollIntoView(ture)元素上边框与视窗顶部齐平
            <span id="bottom">scrollIntoView(false)元素下边框与视窗底部齐平span>
        div>
    div>
div>

<div>
    <h2>scrollh2>
    <div id="nav">
        <div class="f1">floor1div>
        <div class="f2">floor2div>
        <div class="f3">floor3div>
        <div class="f4">floor4div>
        <div class="f5">floor5div>
    div>
    <p>
        页面结构
    p>
    <div class="main">
        <div id="f1">测试1div>
        <div id="f2">测试2div>
        <div id="f3">测试3div>
        <div id="f4">测试4div>
        <div id="f5">测试5div>
    div>
div>

<script>
    window.onload = function () {
        /*
         如果滚动页面也是DOM没有解决的一个问题。为了解决这个问题，浏览器实现了一下方法，以方便开发人员如何更好的控制页面的滚动。
         在各种专有方法中，HTML5选择了scrollIntoView()作为标准方法。scrollIntoView()可以在所有的HTML元素上调用，
         通过滚动浏览器窗口或某个容器元素，调用元素就可以出现在视窗中。如果给该方法传入true作为参数，或者不传入任何参数，
         那么窗口滚动之后会让调动元素顶部和视窗顶部尽可能齐平。如果传入false作为参数，调用元素会尽可能全部出现在视口中（可能的话，调用元素的底部会与视口的顶部齐平。）不过顶部不一定齐平.
         */

        document.querySelector("#roll1").onclick = function () {
            document.querySelector("#roll_top").scrollIntoView(false);
        };
        document.querySelector("#roll2").onclick = function () {
            document.querySelector("#roll_top").scrollIntoView(true);
        };
    }
script>

<script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js">script>
<script>
    $(function () {
        $(window).scroll(function () {//为页面添加页面滚动监听事件
            var wst = $(window).scrollTop(); //滚动条距离顶端值
            for (var i = 1; i < 6; i++) {             //加循环
                if ($("#f" + i).offset().top <= wst + 10) { //判断滚动条位置
                    $('#nav div').css("background-color", "white");
                    $(".f" + i).css("background-color", "red");
                }
            }
        });
        $('#nav div').click(function () {
            $('html,body').animate({scrollTop: $("#" + this.className).offset().top}, 500);
//          $("#" + this.className)[0].scrollIntoView(true);//h5 scrollIntoView()

        });
    });
script>
body>
html>
View Code

 

你可能感兴趣的:(h5之scrollIntoView控制页面元素滚动)

  • 免登录H5快手商城系统/抖音小店商城全开源运营版本 云深不知处㊣ 源码专区免登录商城源码
    内容目录一、详细介绍二、效果展示1.部分代码2.效果图展示三、学习资料下载一、详细介绍最近因为直播需要然后在互站花500买了一套仿抖音的商城系统，感觉确实还可以，反正都买了所以就分享给有需要的人以下是互站那边的网站介绍可以了看一下，还是很不错的1、无需登录直接可以购买商品2、独立后台支持分站3、修复已知问题完美运营4、支持对接第三方支付：易支付、码支付、虎皮椒等。二、效果展示1.部分代码代码如下（
  • HTML之JavaScript DOM（document）编程处理事件 录大大i 前端HTMLJavaScriptjavascripthtml前端
    HTML之JavaScriptDOM（document）编程处理事件Document/*事件：本质是行为，用户的行为或者浏览器的行为；事件发生指的是处罚js函数执行事件的三要素：事件源、事件、事件处理程序事件的绑定：1.通过元素的属性绑定on***2.通过DOM编程动态绑定注：1.一个事件可以绑定多个函数；eg：onclick="show(),show1()2.一个元素可以绑定多个事件eg：onc
  • 算法面试题 阿芯爱编程 面试算法算法
    以下是一些常见的算法面试题：一、排序算法请简述快速排序算法的时间复杂度和空间复杂度，并说明其稳定性。答案：时间复杂度：平均情况：O(nlogn)O(nlogn)O(nlogn)，其中nnn是待排序元素的数量。这是因为快速排序每次划分大致将数组分成两半，需要进行lognlognlogn次划分，每次划分的操作近似为线性时间。最坏情况：O(n2)O(n^2)O(n2)，当每次划分都极度不平衡（例如已经有
  • 前端面试题 阿芯爱编程 面试前端
    以下是一些前端面试题：一、HTML/CSS部分请描述HTML的语义化标签的重要性，并列举一些常用的语义化标签。答案：重要性：对搜索引擎优化（SEO）有帮助，搜索引擎能够更好地理解页面结构，从而提高网站在搜索结果中的排名。提高代码的可读性和可维护性，使开发者更容易理解页面布局和功能逻辑。对于辅助技术（如屏幕阅读器）更友好，能够准确地向用户传达页面内容。常用语义化标签：：定义页面或区域的头部内容，通常
  • Pytorch实现之SCGAN实现人脸修复 这张生成的图像能检测吗 优质GAN模型训练自己的数据集GAN系列pytorch人工智能python生成对抗网络深度学习计算机视觉gan
    简介简介：在输入端对输入图像采用掩码遮挡部分图像，之后通过跳跃生成对抗网络生成修复掩码部分的人脸进而生成完整的人脸数据。对于生成器结构的损失采用MES损失，对于鉴别器的结构采用WGAN-GP的损失。鉴别器为双鉴别器结构，一个负责检验完整图像的真假，一个负责检验掩码部分图像的真假。论文题目：SCGAN:GenerativeAdversarialNetworksofSkipConnectionforF
  • 【linux numa】 NUMA 绑核 Dayu_log linuxlinux
    1.NUMA的前世今生NUMA（NonUniformMemoryAccess）和UMA（UniformMemoryAccess）是两种CPU相关的硬件架构。在早期的UMA架构中，CPU通过前端总线（FSB，FrontSideBus）连接到北桥芯片，然后北桥芯片连接到内存，即内存控制器集成在北桥芯片中。外部IO设备与南桥芯片相连，南桥芯片与北桥芯片通过内部总线相连。下图为UMA架构图下图为早期的UM
  • 设计模式之建造者模式 Forget the Dream 设计模式设计模式建造者模式c++java
    概念建造者模式（BuilderPattern）是一种创建型设计模式，它将一个复杂对象的构建与表示分离，使得同样的构建过程可以创建不同的表示。该模式允许你逐步构建复杂对象，同时将构建步骤的具体实现封装起来，客户端只需要指定要构建的对象类型，而不需要关心对象的具体构建细节。优缺点优点封装性和可维护性高：将对象构建过程封装，降低模块耦合，客户端无需了解细节，便于代码维护。可扩展性强：构建与表示分离，新增
  • 数据库-第一范式、第二范式、第三范式、BC范式、第四范式简析 DS_Watson 数据库
    在设计与操作维护数据库时，最关键的问题就是要确保数据能够正确地分布到数据库的表中。使用正确的数据结构，不仅有助于对数据库进行相应的存取操作，还可以极大地简化应用程序中的其他内容(查询、窗体、报表、代码等)，按照“数据库规范化”对表进行设计，其目的就是减少数据库中的数据冗余，以增加数据的一致性。泛化时在识别数据库中的一个数据元素、关系以及定义所需的表和各表中的项目这些初始工作之后的一个细化的过程。常
  • JavaScript系列（75）--代理模式专题 ᅟᅠ        ‌‍‎‏ 一进制 JavaScriptjavascript代理模式开发语言
    JavaScript代理模式专题JavaScript的Proxy提供了强大的对象代理能力，能够拦截和自定义对象的基本操作。本文将深入探讨Proxy的各种模式、应用场景和最佳实践。代理基础小知识：代理模式允许我们创建一个对象的代理，从而可以控制对这个对象的访问。JavaScript的ProxyAPI提供了13种基本操作的拦截器（trap），使我们能够自定义对象的行为。//基础代理操作consttar
  • Go算法之希尔排序 思远久安 Go数据结构与算法小白入门算法golang后端排序算法
    一、什么是希尔排序希尔排序有点像插入排序的升级版，它的主要就是，我们一开始先确定一个步长（某个长度），然后让i（初始为0）和该步长位置的值比较大小，让i不断++，再用个变量为i+该步长。接着比较之后，缩短步长大小，最终排序到合理位置。在Go语言中实现希尔排序，可以按照以下步骤进行：选择增量序列：增量序列决定了元素之间的间隔。常见的增量序列有希尔增量（初始增量为数组长度的一半，之后每次减半，直到增量
  • STM32基础教程——按键控制LED Czzzzlq stm32嵌入式硬件单片机
    目录概要技术实现1.硬件接线图2.引脚定义3.代码实现实验要点问题总结概要1.实验名称:按键控制LED2.实验环境:STM32F103C8T6最小系统板3.实验内容：两个按键分别控制两个LED的亮灭4.作者；abai5.实验时间：2025-2-18技术实现1.硬件接线图2.引脚定义3.代码实现main.c#include"stm32f10x.h"//Deviceheader#include"Del
  • 华为云OBS配置方法 芊言凝语 数据库网络服务器
    华为云对象存储服务（ObjectStorageService，OBS）是一种海量、安全、低成本、高可靠的云存储服务。以下是华为云OBS配置的详细步骤及相关说明：创建OBS桶登录华为云控制台后，在搜索框中输入“对象存储服务”，选择对应的服务进入OBS管理页面。点击“创建桶”按钮，进入创建桶的配置页面。基本信息桶名称：输入一个全局唯一的桶名称，例如可以采用项目名称或业务名称相关的命名方式，方便识别和管
  • 深入了解单片机：原理、应用及发展趋势 xzzz2016 单片机
    在当今数字化时代，单片机作为嵌入式系统中的关键组成部分，扮演着不可或缺的角色。本文将深入探讨单片机的原理、应用以及未来发展趋势，希望能够帮助读者更好地了解这一领域。一、单片机原理单片机是一种集成了处理器、存储器、输入输出接口和定时器等功能于一体的微型计算机系统。常见的单片机包括由8位或16位CPU构成的芯片，通过外部连接的电路可实现各种功能。单片机的工作原理是通过执行存储在其存储器中的程序来控制外
  • 【Python 语法】 collections.Counter 用法 一杯水果茶！ 人生苦短我用Pythonpython
    Counter的基本用法Counter示例示例1：创建`Counter`并统计元素出现次数示例2：字符串中各字符出现次数示例3：`most_common(n)`返回出现次数最多的前n个元素及其次数示例4：`elements()`方法，按照计数的频率返回元素示例5：`update()`方法示例6：`subtract()`方法Counter是Python标准库collections模块中的一个子类，专
  • 6种最新算法（小龙虾优化算法COA、螳螂搜索算法MSA、红尾鹰算法RTH、新雀优化算法NOA、鳑鲏鱼优化算法BFO、蜘蛛蜂优化算法SWO）求解机器人路径规划（提供MATLAB代码） IT猿手 机器人路径规划优化算法无人机路径规划算法机器人matlab宽度优先开发语言人工智能前端
    一、机器人路径规划介绍移动机器人（Mobilerobot，MR）的路径规划是移动机器人研究的重要分支之，是对其进行控制的基础。根据环境信息的已知程度不同，路径规划分为基于环境信息已知的全局路径规划和基于环境信息未知或局部已知的局部路径规划。随着科技的快速发展以及机器人的大量应用，人们对机器人的要求也越来越高，尤其表现在对机器人的智能化方面的要求，而机器人自主路径规划是实现机器人智能化的重要步骤，路
  • Linux上清理内存缓存、缓冲与交换空间 饭饭饭饭饭～ linux缓存运维
    每个Linux系统都有三个选项可以在不中断任何进程或服务的情况下清除缓存。1只清除页面缓存（pagecache）sync;echo1>/proc/sys/vm/drop_caches2清除目录项和inodesync;echo2>/proc/sys/vm/drop_caches3清除页面缓存、目录项和i节点sync;echo3>/proc/sys/vm/drop_caches上述命令的解释sync命
  • [js高手之路] dom常用API【appendChild,insertBefore,removeChild,replaceChild,cloneNode】详解与应用 nqxcwl 前端javascriptappencchildinsertbeforeclonenodereplacechildremovechild
    本文主要讲解DOM常用的CURD操作，appendChild(往后追加节点),insertBefore(往前追加节点),removeChild(移除节点),replaceChild(替换节点),cloneNode(克隆节点)的语法与实战应用一、appendChild:向元素的内部最后面增加一个节点，或者移动一个现有的节点到元素的内部最后面用法:someNode.appendChild(newNod
  • GDOI2008 指纹 题解 搂鱼114514 算法
    题意有nnn张图片，第iii张图片有A,B,C,DA,B,C,DA,B,C,D四个元素。称一张图片是累赘的：有两张图片x,yx,yx,y，如果xxx有至少三个元素大于yyy所对应的三个元素，那个yyy就是累赘的。例如x(A,B,C,D)=(2,3,3,4),y(A,B,C,D)=(4,2,5,6)x(A,B,C,D)=(2,3,3,4),\y(A,B,C,D)=(4,2,5,6)x(A,B,C,D
  • 使用 INFINI Gateway 保护 Elasticsearch 集群之阻断不合理的查询 数据库
    本文将探讨如何使用INFINIGateway阻止不合理的查询发送到Elasticsearch，此方法同样适用于Opensearch和Easysearch。在以往处理ElasticsearchOOM（内存溢出）问题的经验中，我们发现许多案例是由于查询操作导致节点出现OOM的情况。经过调查，这些案例主要分为两类：一类是由于查询吞吐量超出了集群的处理能力，另一类则是在执行某些不合理的查询时触发了OOM。
  • Flutter学习 T_yoo_csdn Flutter前端Flutter
    flutter环境搭建mac版Flutter中文网Flutter原理及美团的实践背景Flutter的目标是使同一套代码同时运行在Android和iOS系统上，并且拥有媲美原生应用的性能，Flutter甚至提供了两套控件来适配Android和iOS（滚动效果、字体和控件图标等等），为了让App在细节处看起来更像原生应用。在Flutter诞生之前，已经有许多跨平台UI框架的方案，比如基于WebView
  • Linux内存管理方式 wjq++ 操作系统linux服务器网络
    Linux内存管理涉及到多个方面，包括物理内存的分配和回收、虚拟内存的管理、页面置换、内存保护等。以下是Linux内存管理的主要方式和机制：1.虚拟内存（VirtualMemory）虚拟地址空间：每个进程拥有自己的虚拟地址空间，虚拟地址空间与物理内存是分开的。进程在运行时使用虚拟地址，操作系统和硬件负责将虚拟地址映射到物理内存。页表（PageTables）：虚拟地址到物理地址的映射通过页表完成。每
  • 商汤绝影端到端自动驾驶的迭代优化 AGI大模型与大数据研究院 计算机软件编程原理与应用实践javapythonjavascriptkotlingolang架构人工智能
    自动驾驶,端到端,迭代优化,深度学习,感知,规划,控制,模型训练,数据增强,模型微调1.背景介绍随着人工智能和计算机视觉技术的飞速发展，自动驾驶汽车从科幻走进了现实。商汤科技推出的绝影端到端自动驾驶系统，就是其中的佼佼者。本文将深入剖析商汤绝影端到端自动驾驶系统的迭代优化过程，帮助读者理解其背后的技术原理和架构设计。2.核心概念与联系商汤绝影端到端自动驾驶系统的核心架构如下：graphLRA[感知
  • 网络工程师 （43）IP数据报 IT 青年 软考网络工程师软考网络工程师
    前言IP数据报是互联网传输控制协议（InternetProtocol，IP）的数据报格式，由首部和数据两部分组成。一、首部IP数据报的首部是控制部分，包含了数据报传输和处理所需的各种信息。首部可以分为固定部分和可变部分。固定部分：版本：占4位，指IP协议的版本。目前广泛使用的协议版本号为4（即IPv4）。通信双方的协议版本必须一致。首部长度：占4位，表示数据报首部的长度。因首部长度可表示的最大数值
  • 服务器数据传输协议,详解前端websocket服务器之数据传输协议 前言 服务器发送数据 服务端接受数据 总结... weixin_39980575 服务器数据传输协议
    前言上一篇文章我们初步搭建了一个websocket，但是还不能发送和接收数据，这篇文章我们聊一聊它是如何收发数据的。websocket支持文本和二进制的传输，内部是如何接收和发送数据的对使用者来说是不可见的，虽然这不影响使用，但是为了更加深入了解websocket的原理，我们还是有必要一探究竟！我们首先来看一张数据结构的二进制图，如下：如图1，乍一看可能看不懂，我先来解释一下：图1最上面表示的是二
  • 控制论的革命者：阿拉德时代智利的技术与政治 shenminyin 控制论社会主义科学技术史赛博历史传记
    本书背景位于南美国家智利，版图形如窄条，夹在安第斯山脉与太平洋之间。1970年，智利选民选择了在萨尔瓦多·阿连德·戈森斯（SalvadorGuillermoAllendeGossens）的领导下通过民主道路进行社会主义变革。图书推荐书籍简介本书讲述了20世纪70年代智利阿连德政府时期，一场独特的技术与政治变革实验——Cybersyn项目。这是一个旨在通过控制论和计算机技术，建立覆盖全国的实时经济信
  • springboot学生宿舍信息的系统（11574） codercode2022 springboot后端java开发语言springgulp前端框架
    有需要的同学，源代码和配套文档领取，加文章最下方的名片哦一、项目演示项目演示视频二、资料介绍完整源代码（前后端源代码+SQL脚本）配套文档（LW+PPT+开题报告）远程调试控屏包运行三、技术介绍Java语言SSM框架SpringBoot框架Vue框架JSP页面Mysql数据库IDEA/Eclipse开发四、项目截图有需要的同学，源代码和配套文档领取，加文章最下方的名片哦!
  • vue单词汇总 小六妹妹 vue.js前端javascript
    vueVue单词大全0~9vue:(view)视图，视觉;message:消息;item:项目;in:在...里面;在(某范围或空间内的)某一点;在(某物的形体或范围)中;在…内;在…中;进入;counter:计数器;柜台;对立面;el:(element)(计算计)挂载元素;Vue实例挂载的元素节点;data:数据;methods:方法,方法论;add:添加;reduce:减少;10~19func
  • Java进阶篇之Lambda表达式 code2cat JavaJava进阶开发语言javaideintellij-ideaideamyeclipse
    引言在前面的文章中，我们介绍了线程池（Java进阶篇之线程池）。你是不是经常遇到需要写大量匿名内部类的情况？比如，我们在使用Java的集合、事件监听器、或者某些框架时，常常需要实现接口中的单一方法。传统的方式往往会导致代码冗长，影响可读性。而Lambda表达式的出现，正是为了简化这些重复的代码，让我们能够以更加简洁、优雅的方式表达操作。今天，我们将深入探讨Java中的Lambda表达式，看看它如何
  • C语言数组之字符数组 椒绿个屁 c语言算法数据结构
    C语言主要内容数组字符数组数组字符数组概念元素类型为char字符型的数组，字符数组往往是用来存储字符串数组的。需要注意的一点是，我们C语言中的字符是字节字符。字节字符：也就是1个字符占一个字节，在C语言中，我们使用char表示字节。测试题：chara='A';//正确charb='1';//正确charc=65;//正确，char支持两种赋值形式，一种是字符，一种是数值，如果是数值表示ASCII码
  • 内聚的程度 冰暮流星 软设笔记软件工程笔记
    偶然内聚:一个模块内各处理元素之间没有任何联系。关键字:无直接关系逻辑内聚:模块内执行若干个逻辑上相似的功能，通过参数确定该模块完成哪一个功能。关键字:逻辑相似，参数决定时间内聚:把需要同时执行的动作组合成一起行成的模块。关键字:同时执行过程内聚:一个模块完成多个任务，这些任务必须按指定的过程执行。关键字:指定的过程顺序通信内聚:模块内所有处理元素都在同一个数据结构上操作，或者各处理使用相同的输入
  • 312个免费高速HTTP代理IP（能隐藏自己真实IP地址） yangshangchuan 高速免费superwordHTTP代理
        124.88.67.20:843 190.36.223.93:8080 117.147.221.38:8123 122.228.92.103:3128 183.247.211.159:8123 124.88.67.35:81 112.18.51.167:8123 218.28.96.39:3128 49.94.160.198:3128 183.20
  • pull解析和json编码 百合不是茶 androidpull解析json
    n.json文件: [{name:java,lan:c++,age:17},{name:android,lan:java,age:8}]   pull.xml文件 <?xml version="1.0" encoding="utf-8"?> <stu>     <name>java
  • [能源与矿产]石油与地球生态系统 comsci 能源
          按照苏联的科学界的说法,石油并非是远古的生物残骸的演变产物,而是一种可以由某些特殊地质结构和物理条件生产出来的东西,也就是说,石油是可以自增长的....       那么我们做一个猜想: 石油好像是地球的体液,我们地球具有自动产生石油的某种机制,只要我们不过量开采石油,并保护好
  • 类与对象浅谈 沐刃青蛟 java基础
           类，字面理解，便是同一种事物的总称，比如人类，是对世界上所有人的一个总称。而对象，便是类的具体化，实例化，是一个具体事物，比如张飞这个人，就是人类的一个对象。但要注意的是：张飞这个人是对象，而不是张飞，张飞只是他这个人的名字，是他的属性而已。而一个类中包含了属性和方法这两兄弟，他们分别用来描述对象的行为和性质（感觉应该是
  • 新站开始被收录后，我们应该做什么？ IT独行者 PHPseo
    新站开始被收录后，我们应该做什么？         百度终于开始收录自己的网站了，作为站长，你是不是觉得那一刻很有成就感呢，同时，你是不是又很茫然，不知道下一步该做什么了？至少我当初就是这样，在这里和大家一份分享一下新站收录后，我们要做哪些工作。       至于如何让百度快速收录自己的网站，可以参考我之前的帖子《新站让百
  • oracle 连接碰到的问题 文强chu oracle
    Unable to find a java Virtual Machine－－安装64位版Oracle11gR2后无法启动SQLDeveloper的解决方案 作者：草根IT网 来源：未知 人气：813标签： 导读：安装64位版Oracle11gR2后发现启动SQLDeveloper时弹出配置java.exe的路径，找到Oracle自带java.exe后产生的路径“C:\app\用户名\prod
  • Swing中按ctrl键同时移动鼠标拖动组件（类中多借口共享同一数据） 小桔子 java继承swing接口监听
            都知道java中类只能单继承，但可以实现多个接口，但我发现实现多个接口之后，多个接口却不能共享同一个数据，应用开发中想实现：当用户按着ctrl键时，可以用鼠标点击拖动组件，比如说文本框。 编写一个监听实现KeyListener,NouseListener,MouseMotionListener三个接口，重写方法。定义一个全局变量boolea
  • linux常用的命令 aichenglong linux常用命令
    1 startx切换到图形化界面 2 man命令:查看帮助信息 man 需要查看的命令,man命令提供了大量的帮助信息,一般可以分成4个部分 name:对命令的简单说明 synopsis:命令的使用格式说明 description:命令的详细说明信息 options:命令的各项说明 3 date:显示时间 语法：date [OPTION]... [+FORMAT]
  • eclipse内存优化 AILIKES javaeclipsejvmjdk
    一 基本说明      在JVM中，总体上分2块内存区,默认空余堆内存小于 40%时，JVM就会增大堆直到-Xmx的最大限制；空余堆内存大于70%时，JVM会减少堆直到-Xms的最小限制。     1)堆内存(Heap memory):堆是运行时数据区域，所有类实例和数组的内存均从此处分配,是Java代码可及的内存，是留给开发人
  • 关键字的使用探讨 百合不是茶 关键字
    //关键字的使用探讨/*访问关键词private 只能在本类中访问public 只能在本工程中访问protected 只能在包中和子类中访问默认的 只能在包中访问*//*final   类 方法 变量 final 类 不能被继承 final 方法 不能被子类覆盖，但可以继承 final 变量 只能有一次赋值，赋值后不能改变 final 不能用来修饰构造方法*///this()
  • JS中定义对象的几种方式 bijian1013 js
        1. 基于已有对象扩充其对象和方法(只适合于临时的生成一个对象)： <html> <head> <title>基于已有对象扩充其对象和方法(只适合于临时的生成一个对象)</title> </head> <script> var obj = new Object();
  • 表驱动法实例 bijian1013 java表驱动法TDD
    获得月的天数是典型的直接访问驱动表方式的实例，下面我们来展示一下： MonthDaysTest.java package com.study.test; import org.junit.Assert; import org.junit.Test; import com.study.MonthDays; public class MonthDaysTest { @T
  • LInux启停重启常用服务器的脚本 bit1129 linux
    启动，停止和重启常用服务器的Bash脚本，对于每个服务器，需要根据实际的安装路径做相应的修改   #! /bin/bash Servers=(Apache2, Nginx, Resin, Tomcat, Couchbase, SVN, ActiveMQ, Mongo); Ops=(Start, Stop, Restart); currentDir=$(pwd); echo
  • 【HBase六】REST操作HBase bit1129 hbase
    HBase提供了REST风格的服务方便查看HBase集群的信息，以及执行增删改查操作   1. 启动和停止HBase REST 服务 1.1 启动REST服务 前台启动（默认端口号8080） [hadoop@hadoop bin]$ ./hbase rest start   后台启动 hbase-daemon.sh start rest   启动时指定
  • 大话zabbix 3.0设计假设 ronin47
    What’s new in Zabbix 2.0? 去年开始使用Zabbix的时候，是1.8.X的版本，今年Zabbix已经跨入了2.0的时代。看了2.0的release notes，和performance相关的有下面几个：          :: Performance improvements::Trigger related da
  • http错误码大全 byalias http协议javaweb
    响应码由三位十进制数字组成，它们出现在由HTTP服务器发送的响应的第一行。 响应码分五种类型，由它们的第一位数字表示： 1）1xx：信息，请求收到，继续处理 2）2xx：成功，行为被成功地接受、理解和采纳 3）3xx：重定向，为了完成请求，必须进一步执行的动作 4）4xx：客户端错误，请求包含语法错误或者请求无法实现 5）5xx：服务器错误，服务器不能实现一种明显无效的请求
  • J2EE设计模式-Intercepting Filter bylijinnan java设计模式数据结构
    Intercepting Filter类似于职责链模式 有两种实现 其中一种是Filter之间没有联系，全部Filter都存放在FilterChain中，由FilterChain来有序或无序地把把所有Filter调用一遍。没有用到链表这种数据结构。示例如下： package com.ljn.filter.custom; import java.util.ArrayList;
  • 修改jboss端口 chicony jboss
    修改jboss端口   %JBOSS_HOME%\server\{服务实例名}\conf\bindingservice.beans\META-INF\bindings-jboss-beans.xml   中找到 <!-- The ports-default bindings are obtained by taking the base bindin
  • c++ 用类模版实现数组类 CrazyMizzz C++
    最近c++学到数组类，写了代码将他实现，基本具有vector类的功能 #include<iostream> #include<string> #include<cassert> using namespace std; template<class T> class Array { public: //构造函数
  • hadoop dfs.datanode.du.reserved 预留空间配置方法 daizj hadoop预留空间
    对于datanode配置预留空间的方法 为：在hdfs-site.xml添加如下配置  <property>     <name>dfs.datanode.du.reserved</name>     <value>10737418240</value>    
  • mysql远程访问的设置 dcj3sjt126com mysql防火墙
    第一步: 激活网络设置 你需要编辑mysql配置文件my.cnf. 通常状况，my.cnf放置于在以下目录： /etc/mysql/my.cnf (Debian linux) /etc/my.cnf （Red Hat Linux/Fedora Linux) /var/db/mysql/my.cnf (FreeBSD) 然后用vi编辑my.cnf，修改内容从以下行： [mysqld] 你所需要: 1
  • ios 使用特定的popToViewController返回到相应的Controller dcj3sjt126com controller
    1、取navigationCtroller中的Controllers NSArray * ctrlArray = self.navigationController.viewControllers; 2、取出后，执行， [self.navigationController popToViewController:[ctrlArray objectAtIndex:0] animated:YES
  • Linux正则表达式和通配符的区别 eksliang 正则表达式通配符和正则表达式的区别通配符
    转载请出自出处：http://eksliang.iteye.com/blog/1976579 首先得明白二者是截然不同的 通配符只能用在shell命令中,用来处理字符串的的匹配。 判断一个命令是否为bash shell(linux 默认的shell)的内置命令 type -t commad 返回结果含义 file  表示为外部命令 alias  表示该
  • Ubuntu Mysql Install and CONF gengzg Install
    http://www.navicat.com.cn/download/navicat-for-mysql Step1: 下载Navicat ，网址：http://www.navicat.com/en/download/download.html Step2：进入下载目录，解压压缩包：tar -zxvf navicat11_mysql_en.tar.gz
  • 批处理，删除文件bat huqiji windowsdos
    @echo off ::演示：删除指定路径下指定天数之前（以文件名中包含的日期字符串为准）的文件。 ::如果演示结果无误，把del前面的echo去掉，即可实现真正删除。 ::本例假设文件名中包含的日期字符串（比如：bak-2009-12-25.log） rem 指定待删除文件的存放路径 set SrcDir=C:/Test/BatHome rem 指定天数 set DaysAgo=1
  • 跨浏览器兼容的HTML5视频音频播放器 天梯梦 html5
    HTML5的video和audio标签是用来在网页中加入视频和音频的标签，在支持html5的浏览器中不需要预先加载Adobe Flash浏览器插件就能轻松快速的播放视频和音频文件。而html5media.js可以在不支持html5的浏览器上使video和audio标签生效。   How to enable <video> and <audio> tags in
  • Bundle自定义数据传递 hm4123660 androidSerializable自定义数据传递BundleParcelable
          我们都知道Bundle可能过put****()方法添加各种基本类型的数据，Intent也可以通过putExtras(Bundle)将数据添加进去，然后通过startActivity()跳到下一下Activity的时候就把数据也传到下一个Activity了。如传递一个字符串到下一个Activity   把数据放到Intent
  • C＃：异步编程和线程的使用（.NET 4.5 ） powertoolsteam .net线程C#异步编程
    异步编程和线程处理是并发或并行编程非常重要的功能特征。为了实现异步编程，可使用线程也可以不用。将异步与线程同时讲，将有助于我们更好的理解它们的特征。 本文中涉及关键知识点 1. 异步编程 2. 线程的使用 3. 基于任务的异步模式 4. 并行编程 5. 总结 异步编程 什么是异步操作？异步操作是指某些操作能够独立运行，不依赖主流程或主其他处理流程。通常情况下，C＃程序
  • spark 查看 job history 日志 Stark_Summer 日志sparkhistoryjob
    SPARK_HOME/conf 下: spark-defaults.conf 增加如下内容 spark.eventLog.enabled true spark.eventLog.dir hdfs://master:8020/var/log/spark spark.eventLog.compress true spark-env.sh 增加如下内容 export SP
  • SSH框架搭建 wangxiukai2015eye springHibernatestruts
    MyEclipse搭建SSH框架 Struts Spring Hibernate 1、new一个web project。 2、右键项目，为项目添加Struts支持。    选择Struts2 Core Libraries -<MyEclipes-Library>      点击Finish。src目录下多了struts
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他