没人回复我哼
没人回复我哼

元素滚动 scroll —— 仿淘宝固定右侧侧边栏

 
学习来源：https://www.bilibili.com/video/BV1HJ41147DG
 

要求

  1. 原先侧边栏是绝对定位
  2. 当页面滚动到一定位置，侧边栏改为固定定位
  3. 页面继续滚动，会让返回顶部显示出来
    元素滚动 scroll —— 仿淘宝固定右侧侧边栏_第1张图片
     
    元素滚动 scroll —— 仿淘宝固定右侧侧边栏_第2张图片

思路
4. 需要用到页面滚动事件 scroll 因为是页面滚动，所以事件源是 document
5. 滚动到某个位置，就是判断页面被卷去的上部值。
6. 页面被卷去的头部：可以通过 window.pageYOffset 获得，如果是被卷去的左侧 window.pageXOffset
7. 注意，元素被卷去的头部是 element.scrollTop , 如果是页面被卷去的头部则是 window.pageYOffset
8. 其实这个值 可以通过盒子的 offsetTop 可以得到，如果大于等于这个值，就可以让盒子固定定位了

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .slider-bar {
            position: absolute;
            left: 50%;
            top: 800px;
            margin-left: 600px;
            width: 45px;
            height: 130px;
            background-color: red;
            text-align: center;
        }

        .com {
            width: 1200px;
            margin: 10px auto;
        }

        .header {
            height: 200px;
            background-color: purple;
        }

        .banner {
            height: 500px;
            background-color: skyblue;
        }

        .main {
            height: 2000px;
            background-color: yellowgreen;
        }

        span {
            display: none;
            position: absolute;
            bottom: 0;
            cursor: pointer;
        }
    </style>
</head>

<body>
    <div class="slider-bar">
        <span class="goBack">返回顶部</span>
    </div>
    <div class="header com">头部区域</div>
    <div class="banner com">banner区域</div>
    <div class="main com">主体部分</div>
    <script>
        // 获取元素
        var sliderbar = document.querySelector('.slider-bar');
        var goBack = document.querySelector('.goBack');
        var banner = document.querySelector('.banner');
        var main = document.querySelector('.main');

        // banner.offestTop 就是被卷去头部的大小，一定要写到滚动的外面
        var bannerTop = banner.offsetTop;
        // 当侧边栏固定定位之后应该变化的数值
        var sliderbarTop = sliderbar.offsetTop - bannerTop;
        var mainTop = main.offsetTop;
        // 页面滚动事件 scroll
        document.addEventListener('scroll', function () {
            if (window.pageYOffset >= bannerTop) {
                sliderbar.style.position = 'fixed';
                sliderbar.style.top = sliderbarTop + 'px';
            } else {
                sliderbar.style.position = 'absolute';
                sliderbar.style.top = '800px';
            }
            // 当页面滚动到 main 盒子，就显示 goback 模块
            if (window.pageYOffset >= mainTop) {
                goBack.style.display = 'block';
            } else {
                goBack.style.display = 'none';
            }
        })
    </script>
</body>

</html>

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

  • Vue环境变量配置指南：如何在开发、生产和测试中设置环境变量 Front_Yue 前端探索之路vue.js前端javascript
    -##前言Vue.js是一个流行的JavaScript框架，它提供了许多工具和功能来帮助开发人员构建高效、可维护的Web应用程序。其中一个重要的工具是环境变量，它可以让你在不同的环境中配置不同的参数和选项。在这篇博客中，我们将介绍如何在Vue应用程序中设置环境变量，以及如何在开发、生产和测试环境中使用它们。正文内容一、什么是环境变量环境变量是操作系统中的一组动态值，它们可以影响应用程序的行为。这些
  • 高赞 GitHub 项目盘点：中国 Web 开发者路线图 逛逛GitHub pythonjava编程语言大数据vue
    推荐最近很火的6个开源项目，本期所有推荐都已经收录到AwesomeGitHubRepo，欢迎各位读者Star。欢迎Star：https://github.com/Wechat-ggGitHub/Awesome-GitHub-Repo本期推荐的开源项目是：1.中国Web开发者路线图2.一个简单的绘图应用程序3.通过JSON配置就能生成各种后台页面4.针对直播、语聊、视频通话等推出的低代码解决方案5.
  • 华为OD机试2024年E卷-单词接龙[100分]（ Java | Python3 | C++ | C语言 | JsNode | Go）实现100%通过率 梅花C 华为OD题库算法华为odjavac++c语言golang
    点这里去解决这道题Go!题目描述单词接龙的规则是：可用于接龙的单词首字母必须要前一个单词的尾字母相同；当存在多个首字母相同的单词时，取长度最长的单词，如果长度也相等，则取字典序最小的单词；已经参与接龙的单词不能重复使用。现给定一组全部由小写字母组成单词数组，并指定其中的一个单词作为起始单词，进行单词接龙，请输出最长的单词串，单词串是单词拼接而成，中间没有空格。输入描述输入的第一行为一个非负整数，表
  • 华为OD机试E卷 --寻找符合要求的最长子串 --24年OD统一考试（Java & JS & Python & C & C++） 飞码创造者 最新华为OD机试题库2024华为odjavajavascriptpythonc语言
    文章目录题目描述输入描述输出描述用例题目解析JS算法源码Java算法源码python算法源码c算法源码c++算法源码题目描述给你一个字符串s，字符串s首尾相连成一个环形，请你在环中找出‘l’、‘o’、‘x’字符都恰好出现了偶数次最长子字符串的长度。输入描述输入是一串小写的字母组成的字符串输出描述输出是一个整数备注•1≤s.length≤5*10^5•s只包含小写英文字母用例输入alolobo输出6
  • 华为OD机试E卷 --最大值--24年OD统一考试（Java & JS & Python & C & C++） 飞码创造者 最新华为OD机试题库2024华为odjavajavascriptpythonc语言
    文章目录题目描述输入描述输出描述用例题目解析JS算法源码Java算法源码python算法源码c算法源码c++算法源码题目描述给定—组整数(非负)，重排顺序后输出一个最大的整数。示例1输入:[10,9]输出:910说明:输出结果可能非常大，所以你需要返回一个字符串而不是整数。输入描述数字组合输出描述最大的整数用例输入109输出910说明无题目解析给定一组非负整数，我们需要对这些整数进行重排，使得重新
  • 华为OD机试C卷-- 字符串变换最小字符串（Java & JS & Python & C） 飞码创造者 华为OD机试题库华为odc语言javajavascriptpython
    获取题库不需要订阅专栏，可直接私信我进入CSDN领军人物top1博主的华为OD交流圈观看完整题库、最新面试实况、考试报告等内容以及大佬一对一答疑。题目描述给定一个字符串s，最多只能进行一次变换，返回变换后能得到的最小字符串（按照字典序进行比较）。变换规则：交换字符串中任意两个不同位置的字符。输入描述一串小写字母组成的字符串s输出描述按照要求进行变换得到的最小字符串。备注s是都是小写字符组成1≤s.
  • VLM 系列——Qwen2 VL——论文解读——前瞻（源码解读） TigerZ* AIGC算法AIGC人工智能transformer计算机视觉图像处理
    一、概述1、是什么是一系列多模态大型语言模型（MLLM），其中包括2B、7B、72B三个版本，整体采用视觉编码器+LLM形式（可以认为没有任何投射层）。比较创新的是图像缩放方式+3DLLM位置编码+（预估后面的训练方式也不太一样）。能够处理包括文本、图像在内的多种数据类型，具备图片描述、单图文问答、多图问对话、视频理解对话、json格式、多语言、agent、高清图理解（代码编写和debug论文暂时
  • 记录一次RPC服务有损上线的分析过程 程序员
    作者：京东零售郭宏宇1.问题背景某应用在启动完提供JSF服务后，短时间内出现了大量的空指针异常。分析日志，发现是服务依赖的藏经阁配置数据未加载完成导致。即所谓的有损上线或者是直接发布，当****应用启动时，service还没加载完，就开始对外提供服务，导致失败调用。关键代码如下数据的初始化加载是通过实现CommandLineRunner接口完成的@ComponentpublicclassLoadS
  • Electron 开发者的 Tauri 2.0 实战指南：窗口管理与系统集成
    作为Electron开发者，我们已经习惯了使用BrowserWindow来管理窗口，以及通过各种内置模块来实现系统集成。在Tauri2.0中，这些功能虽然概念类似，但实现方式有所不同。本文将帮助你快速掌握Tauri的窗口管理和系统集成功能。窗口管理基础窗口操作Electron方式//main.jsconst{BrowserWindow}=require('electron')//创建窗口const
  • 回顾技术圈的2024尤雨溪喷React的“开年之战” 前端vue.jsreact
    在2024年初，前端开发社区的一场激烈讨论围绕着React新版文档展开。这场讨论的导火索来自于Vue.js的创始人尤雨溪，他在Twitter上发表了对React新版文档的批评，认为React将复杂性转嫁给用户，未能有效地减轻使用该框架的心智负担。尤雨溪的言论迅速在React和Vue社区间引发了广泛的讨论，许多开发者开始针对React文档的设计哲学展开辩论，这一事件引起了前端开发者对框架设计理念和用
  • 黑马程序员 大事件 vue.js前端
    在写黑马程序员大事件中，出现eslint配置不生效，prettier不生效问题一、eslint配置无法生效1、eslint配置无法生效:vscode的setting.json，"source.fixAll":true提示错误，要字符串，修改为"always"即可。"editor.codeActionsOnSave":{"source.fixAll":"always"},"editor.format
  • 关于商品详情 API 接口 JSON 格式返回数据解析的示例 csrfweb3php
    以下是一个关于商品详情API接口JSON格式返回数据解析的示例，不同的电商平台或者业务场景下具体数据结构会有所差异，大致的解析思路可以参考以下内容：一：示例JSON数据结构假设我们有如下一段模拟的商品详情API接口返回的JSON格式数据：{"product":{"id":"123456","name":"示例商品","description":"这是一款很实用的示例商品，具备多种功能。","pri
  • 只有 1% 的开发人员能在 60 秒内找到代码中的错误
    CSS技巧与案例详解vue2与vue3技巧合集VueUse源码解读下面这段简单的JavaScript代码里藏着一个不起眼但足以让人抓狂的错误：functiongetResult(a,b){return{result:a+b};}console.log(getResult(2,3));//结果真的是5吗？表面看上去，这只是一个“把两个数相加，然后返回对象”的函数，可实际运行后却并非预期的{resul
  • 发布工具包 到npm 服务 pzpcxy520 npm前端node.js
    操作步骤如下：1.创建文件夹，并创建文件index.js，在文件中声明函数，使用module.exports暴露2.npm初始化工具包，package.json填写包的信息(包的名字是唯一的)3.注册账号https://www.npmjs.com/signup4.激活账号（一定要激活账号）5.修改为官方的官方镜像(命令行中运行nrmusenpm)6.命令行下npmlogin填写相关用户信息7.命令
  • pip工具安装第三方库 nfenghklibra pippython
    使用pip+cmd引入第三方库pip是Python包管理工具，提供了对Python包的查找、下载、安装、卸载的功能。注意：pip已内置于Python3.4和2.7及以上版本，其他版本需另行安装常规命令：pipinstall安装第三方库的库名（以json为例）pipinstalljson指定版本号：pipinstall库名==库的版本号pipinstalljieba==0.42.1卸载库：pipun
  • requests库的安装和使用指南
    Requests库安装与使用指南Requests是一个简洁且功能强大的Python库，用于发送HTTP请求。它广泛应用于数据采集、API调用等场景。本文将详细介绍Requests库的安装与基本使用方法，并通过实例和图表帮助您快速掌握其核心功能。目录安装Requests库导入Requests库发送GET请求发送POST请求添加Headers处理响应处理JSON响应异常处理附加参数会话管理文件下载工作
  • json相关内容(python) 大哥喝阔落 jsonpython开发语言
    JSON（JavaScriptObjectNotation）是一种轻量级的数据交换格式，易于人阅读和编写，也易于机器解析和生成。Python提供了json模块来处理JSON数据。以下是关于Python中JSON的详细内容：1.导入json模块importjson2.将Python对象转换为JSON字符串使用json.dumps()函数可以将Python对象（如字典、列表、字符串、数字等）转换为JS
  • 开发浏览器插件太难？试试 crxjs，效率飙升的秘密武器！ 前端chrome
    浏览器插件开发一直以来都是前端开发者的一块重要阵地。它能让我们通过扩展浏览器功能，为用户提供便捷的工具和更流畅的使用体验。然而，许多开发者在尝试插件开发时，却常常因为复杂的API、缺乏现代开发工具支持以及传统工具链无法实现热重载而望而却步。每次修改代码都需要重新打包、加载插件，甚至重启浏览器，不仅耗时，还容易打断开发思路。如果你也有类似的困扰，那么crxjs能成为你的终极解决方案。什么是crxjs
  • 框架选型：Kratos、Go-Zero、GoFrame、Sponge 对比分析 框架开发工具web微服务
    框架比较特性/框架kratosgo-zerogoframesponge设计理念微服务框架，强调模块化和可扩展性高性能、简洁易用，面向微服务后端开发框架，强调开发效率和易用性基于sql、protobuf、json逆向生成模块化代码来组成项目所需的服务代码，强调易用性、开发效率、可扩展性，面向web和微服务HTTP服务支持支持支持支持(gin、gin+protobuf结合)RPC服务支持（gRPC）支
  • webpack多页面打包的一次尝试
    初始化cd项目名webpackinit创建第二页面与其头文件touchpage2.htmltouchsrc/page2.js修改page2.jsconsole.log("success")修改webpack.config.js添加page2.html至plugins项，添加src/page2.js至entry项最终模板:constpath=require('path');constHtmlWebp
  • nodejs创建ws服务器，前端浏览器用websocket接收信息和发送信息给服务端 cdcdhj nodejs服务器前端websocket
    首页是用nodejs建立服务器端//wsserver.jsconstWebSocket=require('ws');constwss=newWebSocket.Server({port:8080});wss.on('connection',functionconnection(ws){ws.on('error',console.error);//接收客户端发送过来的信息ws.on('message
  • 华为OD机试E卷 - 单词接龙（Java & Python& JS & C++ & C ） 算法大师 最新华为OD机试华为odjavapythonjavascriptc++C
    最新华为OD机试真题目录：点击查看目录华为OD面试真题精选：点击立即查看题目描述单词接龙的规则是：可用于接龙的单词首字母必须要前一个单词的尾字母相同；当存在多个首字母相同的单词时，取长度最长的单词，如果长度也相等，则取字典序最小的单词；已经参与接龙的单词不能重复使用。现给定一组全部由小写字母组成单词数组，并指定其中的一个单词作为起始单词，进行单词接龙，请输出最长的单词串，单词串是单词拼接而成，中间
  • nodejs获取git信息
    在一个长期维护的项目中，为了更好排查之前已上线或使用的版本的问题，我们可以在浏览器控制台中打印出git信息，如：git号、git提交时间、打包时间等，也可以生成一个git信息文件，方便后续排查问题。上代码constexecSync=require('child_process').execSync;constfs=require('fs');constpath=require('path');//
  • 玩转前端正则表达式 正则表达式前端后端
    文章首发本人博客，由于格式和图片解析问题，可以前往阅读原文JavaScript中的正则是Perl的大子集，但Perl内部的一些表达式却没有继承正则表达式是用于匹配字符串中字符组合的模式(可参考MDN教程)扫码关注公粽号，查看更多优质文章一个例子使用正则将一个数字以科学计数法进行表示，如：//10000000=>10,000,000现在用一个正则来解决conststr='10000000'const
  • 理解静态类型：为什么选择TypeScript？
    本文我们要讨论一个非常关键的概念——静态类型，以及它是如何帮助我们更好地编写代码的，特别是为什么在开发中选择TypeScript而不是传统的JavaScript。我们可能已经听说过静态类型这个词，但是它到底是什么意思？它对我们编写代码有哪些帮助？今天我们就带你一起深入理解静态类型，探讨TypeScript的优势。4.1什么是静态类型？首先，让我们明确一下静态类型这个概念。简单来说，静态类型是指变量
  • npm安装vue.js的2.x和3.x版本的vuex/vue-router/vue-cli安装命令
    1.vue2和vue3安装几个组件的指令有@的区别vue2安装组件指令没有@,但是vue3有,我不知道为啥。2.Vue.js2.x安装指令npminstall-gvue-cli#安装VueCLInpminstallvue#安装Vuenpminstallvuex#安装Vuexnpminstallvue-router#安装VueRouter3.Vue.js3.x安装指令npminstall-g@vue
  • 深度剖析 JavaScript 变量提升与暂时性死区：原理、实战与避坑指南
    在JavaScript中，变量提升与暂时性死区影响着着程序的运行逻辑、性能表现以及可维护性。接下来将从底层原理、实际场景案例以及最佳实践全方位展开深度剖析。变量提升：JavaScript引擎背后的“隐形重构”JavaScript在执行代码前，引擎会率先开启编译流程，其中变量提升堪称关键一环。使用var关键字声明的变量以及函数声明，都会被自动“提升”至所在作用域的顶部。这一过程并非物理层面挪动代码，
  • 大数据新视界 --大数据大厂之 Vue.js 与大数据可视化：打造惊艳的数据界面 青云交 大数据新视界大前端风云榜：引领技术浪潮大数据vue.js信息可视化大数据可视化数据驱动EchartsD3.js
    亲爱的朋友们，热烈欢迎你们来到青云交的博客！能与你们在此邂逅，我满心欢喜，深感无比荣幸。在这个瞬息万变的时代，我们每个人都在苦苦追寻一处能让心灵安然栖息的港湾。而我的博客，正是这样一个温暖美好的所在。在这里，你们不仅能够收获既富有趣味又极为实用的内容知识，还可以毫无拘束地畅所欲言，尽情分享自己独特的见解。我真诚地期待着你们的到来，愿我们能在这片小小的天地里共同成长，共同进步。本博客的精华专栏：大数
  • 认识包管理工具： npm、yarn和pnpm 前端npm工程化
    包管理工具的发展2010年1月，一款名为npm的包管理器诞生。它确立了包管理器工作的核心原则。npm的发布诞生了一场革命，在此之前，项目依赖项都是手动下载和管理的。npm引入了文件和元数据字段，将依赖项列表存储在package.json文件中，并且将下载的文件保存到node_modules文件夹中。后来因为npm的缺陷或者旧版本的不足，又出现了一个个替代npm来进行包管理的轮子，例如：yarn，y
  • Node.js 单线程模型如何处理高并发？
    引言Node.js是一个基于事件驱动、非阻塞I/O模型的运行时环境，这让它在处理高并发任务时表现出色。然而，与传统多线程模型不同，Node.js使用单线程架构，这让许多开发者在初学时感到困惑：单线程如何处理大量并发请求而不会阻塞呢？本文将聚焦于这个问题，解析Node.js单线程模型的核心机制，以及它在高并发场景中的应用和优势。Node.js的事件循环：单线程的秘密武器Node.js的单线程模型是建
  • Java开发中，spring mvc 的线程怎么调用？ 小麦麦子 springmvc
    今天逛知乎，看到最近很多人都在问spring mvc 的线程http://www.maiziedu.com/course/java/ 的启动问题，觉得挺有意思的，那哥们儿问的也听仔细，下面的回答也很详尽，分享出来，希望遇对遇到类似问题的Java开发程序猿有所帮助。 问题：     在用spring mvc架构的网站上，设一线程在虚拟机启动时运行，线程里有一全局
  • maven依赖范围 bitcarter maven
    1.test 测试的时候才会依赖，编译和打包不依赖，如junit不被打包 2.compile 只有编译和打包时才会依赖 3.provided 编译和测试的时候依赖，打包不依赖，如：tomcat的一些公用jar包 4.runtime 运行时依赖，编译不依赖 5.默认compile 依赖范围compile是支持传递的，test不支持传递 1.传递的意思是项目A，引用
  • Jaxb org.xml.sax.saxparseexception : premature end of file darrenzhu xmlprematureJAXB
    如果在使用JAXB把xml文件unmarshal成vo(XSD自动生成的vo)时碰到如下错误： org.xml.sax.saxparseexception : premature end of file 很有可能时你直接读取文件为inputstream，然后将inputstream作为构建unmarshal需要的source参数。InputSource inputSource = new In
  • CSS Specificity 周凡杨 html权重Specificitycss
      有时候对于页面元素设置了样式，可为什么页面的显示没有匹配上呢？ because specificity CSS 的选择符是有权重的，当不同的选择符的样式设置有冲突时，浏览器会采用权重高的选择符设置的样式。     规则：   HTML标签的权重是1 Class 的权重是10 Id 的权重是100
  • java与servlet g21121 servlet
    servlet 搞java web开发的人一定不会陌生，而且大家还会时常用到它。 下面是java官方网站上对servlet的介绍： java官网对于servlet的解释 写道 Java Servlet Technology Overview Servlets are the Java platform technology of choice for extending and enha
  • eclipse中安装maven插件 510888780 eclipsemaven
    1.首先去官网下载 Maven： http://www.apache.org/dyn/closer.cgi/maven/binaries/apache-maven-3.2.3-bin.tar.gz 下载完成之后将其解压， 我将解压后的文件夹：apache-maven-3.2.3， 并将它放在 D:\tools目录下， 即 maven 最终的路径是：D:\tools\apache-mave
  • jpa@OneToOne关联关系 布衣凌宇 jpa
    Nruser里的pruserid关联到Pruser的主键id，实现对一个表的增删改，另一个表的数据随之增删改。 Nruser实体类 //***************************************************************** @Entity @Table(name="nruser") @DynamicInsert @Dynam
  • 我的spring学习笔记11-Spring中关于声明式事务的配置 aijuans spring事务配置
    这两天学到事务管理这一块，结合到之前的terasoluna框架，觉得书本上讲的还是简单阿。我就把我从书本上学到的再结合实际的项目以及网上看到的一些内容，对声明式事务管理做个整理吧。我看得Spring in Action第二版中只提到了用TransactionProxyFactoryBean和<tx:advice/>,定义注释驱动这三种，我承认后两种的内容很好，很强大。但是实际的项目当中
  • java 动态代理简单实现 antlove javahandlerproxydynamicservice
    dynamicproxy.service.HelloService package dynamicproxy.service; public interface HelloService { public void sayHello(); }   dynamicproxy.service.impl.HelloServiceImpl package dynamicp
  • JDBC连接数据库 百合不是茶 JDBC编程JAVA操作oracle数据库
             如果我们要想连接oracle公司的数据库，就要首先下载oralce公司的驱动程序，将这个驱动程序的jar包导入到我们工程中;   JDBC链接数据库的代码和固定写法;     1,加载oracle数据库的驱动;     &nb
  • 单例模式中的多线程分析 bijian1013 javathread多线程java多线程
    谈到单例模式，我们立马会想到饿汉式和懒汉式加载，所谓饿汉式就是在创建类时就创建好了实例，懒汉式在获取实例时才去创建实例，即延迟加载。 饿汉式： package com.bijian.study; public class Singleton { private Singleton() { } // 注意这是private 只供内部调用 private static
  • javascript读取和修改原型特别需要注意原型的读写不具有对等性 bijian1013 JavaScriptprototype
            对于从原型对象继承而来的成员，其读和写具有内在的不对等性。比如有一个对象A，假设它的原型对象是B，B的原型对象是null。如果我们需要读取A对象的name属性值，那么JS会优先在A中查找，如果找到了name属性那么就返回；如果A中没有name属性，那么就到原型B中查找name，如果找到了就返回；如果原型B中也没有
  • 【持久化框架MyBatis3六】MyBatis3集成第三方DataSource bit1129 dataSource
    MyBatis内置了数据源的支持，如：   <environments default="development"> <environment id="development"> <transactionManager type="JDBC" /> <data
  • 我程序中用到的urldecode和base64decode,MD5 bitcarter cMD5base64decodeurldecode
    这里是base64decode和urldecode，Md5在附件中。因为我是在后台所以需要解码： string Base64Decode(const char* Data,int DataByte,int& OutByte) { //解码表 const char DecodeTable[] = { 0, 0, 0, 0, 0, 0
  • 腾讯资深运维专家周小军：QQ与微信架构的惊天秘密 ronin47
    社交领域一直是互联网创业的大热门，从PC到移动端，从OICQ、MSN到QQ。到了移动互联网时代，社交领域应用开始彻底爆发，直奔黄金期。腾讯在过去几年里，社交平台更是火到爆，QQ和微信坐拥几亿的粉丝，QQ空间和朋友圈各种刷屏，写心得，晒照片，秀视频，那么谁来为企鹅保驾护航呢？支撑QQ和微信海量数据背后的架构又有哪些惊天内幕呢？本期大讲堂的内容来自今年2月份ChinaUnix对腾讯社交网络运营服务中心
  • java-69-旋转数组的最小元素。把一个数组最开始的若干个元素搬到数组的末尾，我们称之为数组的旋转。输入一个排好序的数组的一个旋转，输出旋转数组的最小元素 bylijinnan java
    public class MinOfShiftedArray { /** * Q69 旋转数组的最小元素 * 把一个数组最开始的若干个元素搬到数组的末尾，我们称之为数组的旋转。输入一个排好序的数组的一个旋转，输出旋转数组的最小元素。 * 例如数组{3, 4, 5, 1, 2}为{1, 2, 3, 4, 5}的一个旋转，该数组的最小值为1。 */ publ
  • 看博客，应该是有方向的 Cb123456 反省看博客
    看博客，应该是有方向的:  我现在就复习以前的，在补补以前不会的，现在还不会的，同时完善完善项目，也看看别人的博客.  我刚突然想到的:  1.应该看计算机组成原理，数据结构，一些算法，还有关于android,java的。  2.对于我，也快大四了，看一些职业规划的，以及一些学习的经验，看看别人的工作总结的.    为什么要写
  • [开源与商业]做开源项目的人生活上一定要朴素,尽量减少对官方和商业体系的依赖 comsci 开源项目
         为什么这样说呢？  因为科学和技术的发展有时候需要一个平缓和长期的积累过程，但是行政和商业体系本身充满各种不稳定性和不确定性，如果你希望长期从事某个科研项目，但是却又必须依赖于某种行政和商业体系，那其中的过程必定充满各种风险。。。       所以，为避免这种不确定性风险，我
  • 一个 sql优化 （[精华] 一个查询优化的分析调整全过程！很值得一看 ） cwqcwqmax9 sql
    见   http://www.itpub.net/forum.php?mod=viewthread&tid=239011 Web翻页优化实例 提交时间: 2004-6-18 15:37:49      回复    发消息  环境： Linux ve
  • Hibernat and Ibatis dashuaifu Hibernateibatis
    Hibernate  VS  iBATIS 简介 Hibernate 是当前最流行的O/R mapping框架，当前版本是3.05。它出身于sf.net，现在已经成为Jboss的一部分了 iBATIS 是另外一种优秀的O/R mapping框架，当前版本是2.0。目前属于apache的一个子项目了。 相对Hibernate“O/R”而言，iBATIS 是一种“Sql Mappi
  • 备份MYSQL脚本 dcj3sjt126com mysql
    #!/bin/sh # this shell to backup mysql #[email protected] (QQ:1413161683 DuChengJiu) _dbDir=/var/lib/mysql/ _today=`date +%w` _bakDir=/usr/backup/$_today [ ! -d $_bakDir ] && mkdir -p
  • iOS第三方开源库的吐槽和备忘 dcj3sjt126com ios
    转自 ibireme的博客   做iOS开发总会接触到一些第三方库，这里整理一下，做一些吐槽。   目前比较活跃的社区仍旧是Github，除此以外也有一些不错的库散落在Google Code、SourceForge等地方。由于Github社区太过主流，这里主要介绍一下Github里面流行的iOS库。   首先整理了一份 Github上排名靠
  • html wlwmanifest.xml eoems htmlxml
    所谓优化wp_head()就是把从wp_head中移除不需要元素，同时也可以加快速度。 步骤： 加入到function.php remove_action('wp_head', 'wp_generator'); //wp-generator移除wordpress的版本号，本身blog的版本号没什么意义，但是如果让恶意玩家看到，可能会用官网公布的漏洞攻击blog remov
  • 浅谈Java定时器发展 hacksin java并发timer定时器
    java在jdk1.3中推出了定时器类Timer,而后在jdk1.5后由Dou Lea从新开发出了支持多线程的ScheduleThreadPoolExecutor，从后者的表现来看，可以考虑完全替代Timer了。 Timer与ScheduleThreadPoolExecutor对比： 1.    Timer始于jdk1.3,其原理是利用一个TimerTask数组当作队列
  • 移动端页面侧边导航滑入效果 ini jqueryWebhtml5cssjavascirpt
    效果体验：http://hovertree.com/texiao/mobile/2.htm可以使用移动设备浏览器查看效果。效果使用到jquery-2.1.4.min.js，该版本的jQuery库是用于支持HTML5的浏览器上，不再兼容IE8以前的浏览器，现在移动端浏览器一般都支持HTML5，所以使用该jQuery没问题。HTML文件代码： <!DOCTYPE html> <h
  • AspectJ+Javasist记录日志 kane_xie aspectjjavasist
    在项目中碰到这样一个需求，对一个服务类的每一个方法，在方法开始和结束的时候分别记录一条日志，内容包括方法名，参数名+参数值以及方法执行的时间。   @Override public String get(String key) { // long start = System.currentTimeMillis(); // System.out.println("Be
  • redis学习笔记 MJC410621 redisNoSQL
    1)nosql数据库主要由以下特点：非关系型的、分布式的、开源的、水平可扩展的。 1，处理超大量的数据 2，运行在便宜的PC服务器集群上， 3，击碎了性能瓶颈。 1)对数据高并发读写。 2)对海量数据的高效率存储和访问。 3)对数据的高扩展性和高可用性。 redis支持的类型： Sring 类型 set name lijie get name lijie set na
  • 使用redis实现分布式锁 qifeifei
    在多节点的系统中，如何实现分布式锁机制，其中用redis来实现是很好的方法之一，我们先来看一下jedis包中，有个类名BinaryJedis,它有个方法如下：   public Long setnx(final byte[] key, final byte[] value) { checkIsInMulti(); client.setnx(key, value); ret
  • BI并非万能，中层业务管理报表要另辟蹊径 张老师的菜 大数据BI商业智能信息化
           BI是商业智能的缩写，是可以帮助企业做出明智的业务经营决策的工具，其数据来源于各个业务系统，如ERP、CRM、SCM、进销存、HER、OA等。        BI系统不同于传统的管理信息系统，他号称是一个整体应用的解决方案，是融入管理思想的强大系统：有着系统整体的设计思想，支持对所有
  • 安装rvm后出现rvm not a function 或者ruby -v后提示没安装ruby的问题 wudixiaotie function
    1.在~/.bashrc最后加入 [[ -s "$HOME/.rvm/scripts/rvm" ]] && source "$HOME/.rvm/scripts/rvm"  2.重新启动terminal输入：   rvm use ruby-2.2.1 --default  把当前安装的ruby版本设为默
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他