前端小袁
前端小袁

【JS】公共鼠标滚动事件(从下进入，从上进入)，html 版本

DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Documenttitle>
	head>
	<style>
		* {
			margin: 0;
			padding: 0;
		}
		:root {
			--c1-Height: 308vh;
			--c2-Height: 230vh;
		}

		html,
		body {
			width: 100%;
			height: 100%;
			box-sizing: border-box;
		}
		body {
			overflow-y: auto;
		}
		.box {
			width: 100%;
			height: 120%;
			background-color: #b1ffb1;
		}
		.container {
			top: 0;
			width: 100%;
			position: relative;
			background-color: #4787e7b9;
			height: calc(var(--c1-Height) + var(--c2-Height));
		}

		.c1 {
			left: 0;
			width: 50%;
			position: absolute;
			height: var(--c1-Height);
			background-color: #cf7bcf;
		}
		.c2 {
			right: 0;
			width: 50%;
			position: absolute;
			height: var(--c2-Height);
			background-color: #cfad7b;
		}

		.flooter {
			width: 100%;
			height: 130vh;
			overflow: hidden;
			background-color: black;
		}
	style>
	<body>
		<div class="box">div>

		<div class="container">
			<div class="c1">
				<div>11111111111111111div>
				<div>11111111111111111div>
				<div>11111111111111111div>
				<div>11111111111111111div>
				<div>11111111111111111div>
				<div>11111111111111111div>
				<div>11111111111111111div>
				<div>11111111111111111div>
				<div>11111111111111111div>
				<div>11111111111111111div>
				<div>11111111111111111div>
				<div>11111111111111111div>
				<div>11111111111111111div>
				<div>11111111111111111div>
				<div>11111111111111111div>
				<div>11111111111111111div>
				<div>11111111111111111div>
				<div>11111111111111111div>
				<div>11111111111111111div>
				<div>11111111111111111div>
				<div>11111111111111111div>
				<div>11111111111111111div>
				<div>11111111111111111div>
				<div>11111111111111111div>
				<div>11111111111111111div>
				<div>11111111111111111div>
				<div>11111111111111111div>
				<div>11111111111111111div>
				<div>11111111111111111div>
				<div>11111111111111111div>
				<div>11111111111111111div>
				<div>11111111111111111div>
				<div>11111111111111111div>
				<div>11111111111111111div>
				<div>11111111111111111div>
				<div>11111111111111111div>
				<div>11111111111111111div>
				<div>11111111111111111div>
				<div>11111111111111111div>
				<div>11111111111111111div>
				<div>11111111111111111div>
				<div>11111111111111111div>
				<div>11111111111111111div>
				<div>11111111111111111div>
				<div>11111111111111111div>
				<div>11111111111111111div>
				<div>11111111111111111div>
				<div>11111111111111111div>
				<div>11111111111111111div>
				<div>11111111111111111div>
				<div>11111111111111111div>
				<div>11111111111111111div>
				<div>11111111111111111div>
				<div>11111111111111111div>
				<div>11111111111111111div>
				<div>11111111111111111div>
				<div>11111111111111111div>
				<div>11111111111111111div>
				<div>11111111111111111div>
				<div>11111111111111111div>
				<div>11111111111111111div>
				<div>11111111111111111div>
				<div>11111111111111111div>
				<div>11111111111111111div>
				<div>11111111111111111div>
				<div>11111111111111111div>
				<div>11111111111111111div>
				<div>11111111111111111div>
				<div>11111111111111111div>
				<div>11111111111111111div>
				<div>11111111111111111div>
				<div>11111111111111111div>
				<div>11111111111111111div>
				<div>11111111111111111div>
				<div>11111111111111111div>
				<div>11111111111111111div>
				<div>11111111111111111div>
				<div>11111111111111111div>
				<div>11111111111111111div>
				<div>11111111111111111div>
				<div>11111111111111111div>
				<div>11111111111111111div>
				<div>11111111111111111div>
				<div>11111111111111111div>
				<div>11111111111111111div>
				<div>11111111111111111div>
				<div>11111111111111111div>
				<div>11111111111111111div>
				<div>11111111111111111div>
				<div>11111111111111111div>
				<div>11111111111111111div>
				<div>11111111111111111div>
				<div>11111111111111111div>
				<div>11111111111111111div>
				<div>11111111111111111div>
				<div>11111111111111111div>
				<div>11111111111111111div>
				<div>11111111111111111div>
				<div>11111111111111111div>
				<div>11111111111111111div>
				<div>11111111111111111div>
				<div>11111111111111111div>
				<div>11111111111111111div>
				<div>11111111111111111div>
				<div>11111111111111111div>
				<div>11111111111111111div>
				<div>11111111111111111div>
				<div>11111111111111111div>
				<div>11111111111111111div>
				<div>11111111111111111div>
				<div>11111111111111111div>
				<div>11111111111111111div>
				<div>11111111111111111div>
				<div>11111111111111111div>
				<div>11111111111111111div>
				<div>11111111111111111div>
				<div>11111111111111111div>
				<div>11111111111111111div>
				<div>11111111111111111div>
				<div>11111111111111111div>
				<div>11111111111111111div>
				<div>11111111111111111div>
				<div>11111111111111111div>
				<div>11111111111111111div>
				<div>11111111111111111div>
				<div>11111111111111111div>
				<div>11111111111111111div>
				<div>11111111111111111div>
				<div>11111111111111111div>
				<div>11111111111111111div>
				<div>11111111111111111div>
				<div>11111111111111111div>
				<div>11111111111111111div>
				<div>11111111111111111div>
				<div>11111111111111111div>
			div>
			<div class="c2">
				<div>55555555555555555555555div>
				<div>55555555555555555555555div>
				<div>22222222222222222222222div>
				<div>22222222222222222222222div>
				<div>22222222222222222222222div>
				<div>22222222222222222222222div>
				<div>22222222222222222222222div>
				<div>22222222222222222222222div>
				<div>22222222222222222222222div>
				<div>22222222222222222222222div>
				<div>22222222222222222222222div>
				<div>22222222222222222222222div>
				<div>22222222222222222222222div>
				<div>22222222222222222222222div>
				<div>22222222222222222222222div>
				<div>22222222222222222222222div>
				<div>22222222222222222222222div>
				<div>22222222222222222222222div>
				<div>22222222222222222222222div>
				<div>22222222222222222222222div>
				<div>22222222222222222222222div>
				<div>22222222222222222222222div>
				<div>22222222222222222222222div>
				<div>22222222222222222222222div>
				<div>22222222222222222222222div>
				<div>22222222222222222222222div>
				<div>22222222222222222222222div>
				<div>22222222222222222222222div>
				<div>22222222222222222222222div>
				<div>22222222222222222222222div>
				<div>22222222222222222222222div>
				<div>22222222222222222222222div>
				<div>22222222222222222222222div>
				<div>22222222222222222222222div>
				<div>22222222222222222222222div>
				<div>22222222222222222222222div>
				<div>22222222222222222222222div>
				<div>22222222222222222222222div>
				<div>22222222222222222222222div>
				<div>22222222222222222222222div>
				<div>22222222222222222222222div>
				<div>22222222222222222222222div>
				<div>22222222222222222222222div>
				<div>22222222222222222222222div>
				<div>22222222222222222222222div>
				<div>22222222222222222222222div>
				<div>22222222222222222222222div>
				<div>22222222222222222222222div>
				<div>22222222222222222222222div>
				<div>22222222222222222222222div>
				<div>22222222222222222222222div>
				<div>22222222222222222222222div>
				<div>22222222222222222222222div>
				<div>22222222222222222222222div>
				<div>22222222222222222222222div>
				<div>22222222222222222222222div>
				<div>22222222222222222222222div>
				<div>22222222222222222222222div>
				<div>22222222222222222222222div>
				<div>22222222222222222222222div>
				<div>22222222222222222222222div>
				<div>22222222222222222222222div>
				<div>22222222222222222222222div>
				<div>22222222222222222222222div>
				<div>22222222222222222222222div>
				<div>22222222222222222222222div>
				<div>22222222222222222222222div>
				<div>22222222222222222222222div>
				<div>22222222222222222222222div>
				<div>22222222222222222222222div>
				<div>22222222222222222222222div>
				<div>22222222222222222222222div>
				<div>22222222222222222222222div>
				<div>22222222222222222222222div>
				<div>22222222222222222222222div>
				<div>22222222222222222222222div>
				<div>22222222222222222222222div>
				<div>22222222222222222222222div>
				<div>22222222222222222222222div>
				<div>22222222222222222222222div>
				<div>22222222222222222222222div>
				<div>22222222222222222222222div>
				<div>22222222222222222222222div>
				<div>22222222222222222222222div>
				<div>22222222222222222222222div>
				<div>22222222222222222222222div>
				<div>22222222222222222222222div>
				<div>22222222222222222222222div>
				<div>22222222222222222222222div>
				<div>22222222222222222222222div>
				<div>22222222222222222222222div>
				<div>22222222222222222222222div>
				<div>22222222222222222222222div>
				<div>22222222222222222222222div>
				<div>22222222222222222222222div>
				<div>22222222222222222222222div>
				<div>22222222222222222222222div>
				<div>22222222222222222222222div>
				<div>22222222222222222222222div>
				<div>22222222222222222222222div>
				<div>22222222222222222222222div>
			div>
		div>

		<div class="flooter">div>
	body>

	<script>
		const con = document.querySelector(".container");
		const c1 = document.querySelector(".c1");
		const c2 = document.querySelector(".c2");

        c1.style.top = 0;
        con.style.height = con.offsetHeight - window.innerHeight + 20 + "px";

        /** 从下进入 */
        const enterFromBelow = () => {
            /** 判断父元素距离顶部可视窗口的距离是否小于等于0 */
            if(con.getBoundingClientRect().top <= 0 && con.getBoundingClientRect().top >= -500) {
                c2.style.top = 0;
                c2.style.position = "fixed";
            };

            let bottom = window.innerHeight - c1.getBoundingClientRect().bottom;
            /** 判断左侧元素距离底部可视窗口的距离是否大于等于0 */
            if(bottom >= 0 && bottom < 500) {
                c1.style.top = '';
                c1.style.bottom = 0;
                c1.style.position = "fixed";
                c2.style.position = "absolute";
                c2.style.top = c1.offsetHeight - window.innerHeight + 20 + "px";
            };

            let pb = window.innerHeight - con.getBoundingClientRect().bottom;
            /** 判断父元素距离底部可视区域的距离 */
            if(pb >= 0 && pb < 500) {
                c1.style.position = "absolute";
            };
        };
        /** 从上进入 */
        const enterFromAbove = () => {
            /** 判断父元素距离顶部可视窗口的距离是否大于等于0 */
            if(con.getBoundingClientRect().bottom >= 0 && con.getBoundingClientRect().bottom < 500) {
                c1.style.top = '';
                c1.style.bottom = 0;
                c1.style.position = "absolute";
                c2.style.top = '';
                c2.style.bottom = 0;
                c2.style.position = "absolute";
            };

            let pb = window.innerHeight - con.getBoundingClientRect().bottom;
            /** 判断父元素距离底部可视区域的距离 */
            if(pb <= 0 && pb > -500) {
                c1.style.top = "";
                c1.style.bottom = 0;
                c1.style.position = "fixed";
            };

            let top = c2.getBoundingClientRect().top;
            /** 判断右侧元素距离顶部可视窗口的距离是否大于等于0 */
            if(top >= 0 && top < 500) {
                c1.style.top = 0;
                c1.style.bottom = '';
                c1.style.position = "absolute";
                c2.style.top = 0;
                c2.style.position = "fixed";
            };
            /** 判断父元素距离顶部可视窗口的距离是否小于等于0 */
            let ct = con.getBoundingClientRect().top;
            if(ct >= 0 && ct < 500) {
                c2.style.top = 0;
                c2.style.position = "absolute";
            };
        }

        /** 进入方式 0：未进入 1：进入 2：离开 */
        let way = 0;
		/** 定义滚动条滚动方向 */
		let scrollType = true;
		/** 获取初始滚动位置 */
		let scrollPos = window.pageYOffset || document.documentElement.scrollTop;
		/** 监听滚动条事件 */
		window.addEventListener("scroll", function (e) {
			/** 确定新的滚动位置 */
			const newScrollPos = window.pageYOffset || document.documentElement.scrollTop;
			if (newScrollPos > scrollPos) scrollType = true;
			else scrollType = false;
			/** 更新滚动位置 */
			scrollPos = newScrollPos;
            /** 不同方向进入可视区域 */
            if(scrollType && way != 0) way == 1 ? enterFromBelow() : '离开事件';
            else if(!scrollType && way != 0) way == 1 ? enterFromAbove() : '离开事件';
		});

		/** 观察元素 */
		const callback = (entries) => entries.forEach((entry) => entry.isIntersecting ? way = 1 : way = 2);

		/** 创建一个观察者 */
		const observer = new IntersectionObserver(callback, {
			threshold: 0,
		});
        observer.observe(document.querySelector(".container"));
	script>
html>

左右分屏滚动

> vue 版本

你可能感兴趣的:(前端JavaScript,javascript)

  • Long类型前后端数据不一致 igotyback 前端
    响应给前端的数据浏览器控制台中response中看到的Long类型的数据是正常的到前端数据不一致前后端数据类型不匹配是一个常见问题，尤其是当后端使用Java的Long类型（64位）与前端JavaScript的Number类型（最大安全整数为2^53-1，即16位）进行数据交互时，很容易出现精度丢失的问题。这是因为JavaScript中的Number类型无法安全地表示超过16位的整数。为了解决这个问
  • DIV+CSS+JavaScript技术制作网页（旅游主题网页设计与制作）云南大理 STU学生网页设计 网页设计期末网页作业html静态网页html5期末大作业网页设计web大作业
    ️精彩专栏推荐作者主页:【进入主页—获取更多源码】web前端期末大作业：【HTML5网页期末作业(1000套)】程序员有趣的告白方式：【HTML七夕情人节表白网页制作(110套)】文章目录二、网站介绍三、网站效果▶️1.视频演示2.图片演示四、网站代码HTML结构代码CSS样式代码五、更多源码二、网站介绍网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。网站程
  • 【加密社】Solidity 中的事件机制及其应用 加密社 闲侃区块链智能合约区块链
    加密社引言在Solidity合约开发过程中，事件（Events）是一种非常重要的机制。它们不仅能够让开发者记录智能合约的重要状态变更，还能够让外部系统（如前端应用）监听这些状态的变化。本文将详细介绍Solidity中的事件机制以及如何利用不同的手段来触发、监听和获取这些事件。事件存储的地方当我们在Solidity合约中使用emit关键字触发事件时，该事件会被记录在区块链的交易收据中。具体而言，事件
  • 关于城市旅游的HTML网页设计——(旅游风景云南 5页)HTML+CSS+JavaScript 二挡起步 web前端期末大作业javascripthtmlcss旅游风景
    ⛵源码获取文末联系✈Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业|游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作|HTML期末大学生网页设计作业，Web大学生网页HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScrip
  • HTML网页设计制作大作业（div+css） 云南我的家乡旅游景点 带文字滚动 二挡起步 web前端期末大作业web设计网页规划与设计htmlcssjavascriptdreamweaver前端
    Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作HTML期末大学生网页设计作业HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScript：做与用户的交互行为文章目录前端学习路线
  • node.js学习 小猿L node.jsnode.js学习vim
    node.js学习实操及笔记温故node.js，node.js学习实操过程及笔记~node.js学习视频node.js官网node.js中文网实操笔记githubcsdn笔记为什么学node.js可以让别人访问我们编写的网页为后续的框架学习打下基础，三大框架vuereactangular离不开node.jsnode.js是什么官网：node.js是一个开源的、跨平台的运行JavaScript的运行
  • springboot+vue项目实战一-创建SpringBoot简单项目 苹果酱0567 面试题汇总与解析springboot后端java中间件开发语言
    这段时间抽空给女朋友搭建一个个人博客，想着记录一下建站的过程，就当做笔记吧。虽然复制zjblog只要一个小时就可以搞定一个网站，或者用cms系统，三四个小时就可以做出一个前后台都有的网站，而且想做成啥样也都行。但是就是要从新做，自己做的意义不一样，更何况，俺就是专门干这个的，嘿嘿嘿要做一个网站，而且从零开始，首先呢就是技术选型了，经过一番思量决定选择-SpringBoot做后端，前端使用Vue做一
  • JavaScript 中，深拷贝（Deep Copy）和浅拷贝（Shallow Copy） 跳房子的前端 前端面试javascript开发语言ecmascript
    在JavaScript中，深拷贝（DeepCopy）和浅拷贝（ShallowCopy）是用于复制对象或数组的两种不同方法。了解它们的区别和应用场景对于避免潜在的bugs和高效地处理数据非常重要。以下是对深拷贝和浅拷贝的详细解释，包括它们的概念、用途、优缺点以及实现方式。1.浅拷贝（ShallowCopy）概念定义：浅拷贝是指创建一个新的对象或数组，其中包含了原对象或数组的基本数据类型的值和对引用数
  • 博客网站制作教程 2401_85194651 javamaven
    首先就是技术框架：后端：Java+SpringBoot数据库：MySQL前端：Vue.js数据库连接：JPA(JavaPersistenceAPI)1.项目结构blog-app/├──backend/│├──src/main/java/com/example/blogapp/││├──BlogApplication.java││├──config/│││└──DatabaseConfig.java
  • JavaScript `Map` 和 `WeakMap`详细解释 跳房子的前端 JavaScript原生方法javascript前端开发语言
    在JavaScript中，Map和WeakMap都是用于存储键值对的数据结构，但它们有一些关键的不同之处。MapMap是一种可以存储任意类型的键值对的集合。它保持了键值对的插入顺序，并且可以通过键快速查找对应的值。Map提供了一些非常有用的方法和属性来操作这些数据对：set(key,value):将一个键值对添加到Map中。如果键已经存在，则更新其对应的值。get(key):获取指定键的值。如果键
  • 最简单将静态网页挂载到服务器上(不用nginx) 全能全知者 服务器nginx运维前端html笔记
    最简单将静态网页挂载到服务器上(不用nginx)如果随便弄个静态网页挂在服务器都要用nignx就太麻烦了，所以直接使用Apache来搭建一些简单前端静态网页会相对方便很多检查Web服务器服务状态：sudosystemctlstatushttpd#ApacheWeb服务器如果发现没有安装web服务器：安装Apache：sudoyuminstallhttpd启动Apache：sudosystemctl
  • 补充元象二面 Redstone Monstrosity 前端面试
    1.请尽可能详细地说明，防抖和节流的区别，应用场景？你的回答中不要写出示例代码。防抖（Debounce）和节流（Throttle）是两种常用的前端性能优化技术，它们的主要区别在于如何处理高频事件的触发。以下是防抖和节流的区别和应用场景的详细说明：防抖和节流的定义防抖：在一段时间内，多次执行变为只执行最后一次。防抖的原理是，当事件被触发后，设置一个延迟定时器。如果在这个延迟时间内事件再次被触发，则重
  • 微信小程序开发注意事项 jun778895 微信小程序小程序
    微信小程序开发是一个融合了前端开发、用户体验设计、后端服务（可选）以及微信小程序平台特性的综合性项目。这里，我将详细介绍一个典型的小程序开发项目的全过程，包括项目规划、设计、开发、测试及部署上线等各个环节，并尽量使内容达到或超过2000字的要求。一、项目规划1.1项目背景与目标假设我们要开发一个名为“智慧校园助手”的微信小程序，旨在为学生提供一站式校园生活服务，包括课程表查询、图书馆座位预约、食堂
  • 切换淘宝最新npm镜像源是 hai40587 npm前端node.js
    切换淘宝最新npm镜像源是一个相对简单的过程，但首先需要明确当前淘宝npm镜像源的状态和最新的镜像地址。由于网络环境和服务更新，镜像源的具体地址可能会发生变化，因此，我将基于当前可获取的信息，提供一个通用的切换步骤，并附上最新的镜像地址（截至回答时）。一、了解npm镜像源npm（NodePackageManager）是JavaScript的包管理器，用于安装、更新和管理项目依赖。由于npm官方仓库
  • 字节二面 Redstone Monstrosity 前端面试
    1.假设你是正在面试前端开发工程师的候选人，面试官让你详细说出你上一段实习过程的收获和感悟。在上一段实习过程中，我获得了宝贵的实践经验和深刻的行业洞察，以下是我的主要收获和感悟：一、专业技能提升框架应用熟练度：通过实际项目，我深入掌握了React、Vue等前端框架的使用，不仅提升了编码效率，还学会了如何根据项目需求选择合适的框架。问题解决能力：在实习期间，我遇到了许多预料之外的技术难题。通过查阅文
  • 前端代码上传文件 余生逆风飞翔 前端javascript开发语言
    点击上传文件import{ElNotification}from'element-plus'import{API_CONFIG}from'../config/index.js'import{UploadFilled}from'@element-plus/icons-vue'import{reactive}from'vue'import{BASE_URL}from'../config/index'i
  • uniapp实现动态标记效果详细步骤【前端开发】 2401_85123349 uni-app
    第二个点在于实现将已经被用户标记的内容在下一次获取后刷新它的状态为已标记。这是什么意思呢？比如说上面gif图中的这些人物对象，有一些已被该用户添加为关心，那么当用户下一次进入该页面时，这些已经被添加关心的对象需要以“红心”状态显现出来。这个点的难度还不算大，只需要在每一次获取后端的内容后对标记对象进行状态更新即可。II.动态标记效果实现思路和步骤首先，整体的思路是利用动态类名对不同的元素进行选择。
  • 高性能javascript--算法和流程控制 海淀萌狗
    -for,while和do-while性能相当-避免使用for-in循环，==除非遍历一个属性量未知的对象==es5:for-in遍历的对象便不局限于数组，还可以遍历对象。原因：for-in每次迭代操作会同时搜索实例或者原型属性，for-in循环的每次迭代都会产生更多开销，因此要比其他循环类型慢，一般速度为其他类型循环的1/7。因此，除非明确需要迭代一个属性数量未知的对象，否则应避免使用for-i
  • 360前端星计划-动画可以这么玩 马小蜗
    动画的基本原理定时器改变对象的属性根据新的属性重新渲染动画functionupdate(context){//更新属性}constticker=newTicker();ticker.tick(update,context);动画的种类1、JavaScript动画操作DOMCanvas2、CSS动画transitionanimation3、SVG动画SMILJS动画的优缺点优点：灵活度、可控性、性能
  • Vue + Express实现一个表单提交 九旬大爷的梦
    最近在折腾一个cms系统，用的vue+express，但是就一个表单提交就弄了好久，记录一下。环境：Node10+前端：Vue服务端：Express依赖包：vueexpressaxiosexpress-formidableelement-ui（可选）前言：axiosget请求参数是：paramsaxiospost请求参数是：dataexpressget接受参数是req.queryexpresspo
  • JavaScript中秋快乐！ Q_w7742 javascript开发语言ecmascript
    我们来实现一个简单的祝福网页~主要的难度在于使用canvas绘图当点击canvas时候，跳出“中秋节快乐”字样，需要注册鼠标单击事件和计时器。首先定义主要函数：初始化当点击canvas之后转到onCanvasClick函数，绘图生成灯笼。functiononCanvasClick(){//事件处理函数context.clearRect(0,0,canvas1.width,canvas1.heigh
  • Nginx从入门到实践(三) 听你讲故事啊
    动静分离动静分离是将网站静态资源（JavaScript，CSS，img等文件）与后台应用分开部署，提高用户访问静态代码的速度，降低对后台应用访问。动静分离的一种做法是将静态资源部署在nginx上，后台项目部署到应用服务器上，根据一定规则静态资源的请求全部请求nginx服务器，达到动静分离的目标。rewrite规则Rewrite规则常见正则表达式Rewrite主要的功能就是实现URL的重写，Ngin
  • Nginx的使用场景：构建高效、可扩展的Web架构 张某布响丸辣 nginx前端架构
    Nginx，作为当今最流行的Web服务器和反向代理软件之一，凭借其高性能、稳定性和灵活性，在众多Web项目中扮演着核心角色。无论是个人博客、中小型网站，还是大型企业级应用，Nginx都能提供强大的支持。本文将探讨Nginx的几个主要使用场景，帮助读者理解如何在实际项目中充分利用Nginx的优势。1.静态文件服务对于包含大量静态文件（如HTML、CSS、JavaScript、图片等）的网站，Ngin
  • 前端知识点 ZhangTao_zata 前端javascriptcss
    下面是一个最基本的html代码body{font-family:Arial,sans-serif;margin:20px;}//JavaScriptfunctionthatdisplaysanalertwhencalledfunctionshowMessage(){alert("Hello!Youclickedthebutton.");}MyFirstHTMLPageWelcometoMyPage
  • 第三十一节:Vue路由:前端路由vs后端路由的了解 曹老师
    1.认识前端路由和后端路由前端路由相对于后端路由而言的,在理解前端路由之前先对于路由有一个基本的了解路由:简而言之,就是把信息从原地址传输到目的地的活动对于我们来说路由就是:根据不同的url地址展示不同的页面内容1.1后端路由以前咱们接触比较多的后端路由,当改变url地址时,浏览器会向服务器发送请求,服务器根据这个url,返回不同的资源内容后端路由的特点就是前端每次跳转到不同url地址,都会重新访
  • 华雁智科前端面试题 因为奋斗超太帅啦 前端笔试面试问题整理javascript开发语言ecmascript
    1.var变量的提升题目：vara=1functionfun(){console.log(b)varb=2}fun()console.log(a)正确输出结果：undefined、1答错了，给一个大嘴巴子，错误答案输出结果为：2,1此题主要考察var定义的变量，作用域提升的问题，相当于varaa=1functionfun(){varbconsole.log(b)b=2}fun()console.l
  • 如何建设数据中台（五）——数据汇集—打破企业数据孤岛 weixin_47088026 学习记录和总结中台数据中台程序人生经验分享
    数据汇集——打破企业数据孤岛要构建企业级数据中台，第一步就是将企业内部各个业务系统的数据实现互通互联，打破数据孤岛，主要通过数据汇聚和交换来实现。企业采集的数据可以是线上采集、线下数据采集、互联网数据采集、内部数据采集等。线上数据采集主要载体分为互联网和移动互联网两种，对应有系统平台、网页、H5、小程序、App等，可以采用前端或后端埋点方式采集数据。线下数据采集主要是通过硬件来采集，例如：WiFi
  • 分布式锁和spring事务管理 暴躁的鱼 锁及事务分布式springjava
    最近开发一个小程序遇到一个需求需要实现分布式事务管理业务需求用户在使用小程序的过程中可以查看景点，对景点地区或者城市标记是否想去，那么需要统计一个地点被标记的人数，以及记录某个用户对某个地点是否标记为想去，用两个表存储数据，一个地点表记录改地点被标记的次数，一个用户意向表记录某个用户对某个地点是否标记为想去。由于可能有多个用户同时标记一个地点，每个用户在前端点击想去按钮之后，后台接收到请求，从数据
  • 前端CSS面试常见题 剑亦未配妥 前端面试前端css面试
    边界塌陷盒模型有两种：W3C盒模型和IE盒模型，区别在于宽度是否包含边框定义：同时给兄弟/父子盒模型设置上下边距，理论上边距值是两者之和，实际上不是注意：浮动和定位不会产生边界塌陷；只有块级元素垂直方向才会产生margin合并margin计算方案margin同为正负：取绝对值大的值一正一负：求和父子元素边界塌陷解决父元素可以通过调整padding处理；设置overflowhidden，触发BFC子
  • 【JS】前端文件读取FileReader操作总结 程序员-张师傅 前端前端javascript开发语言
    前端文件读取FileReader操作总结FileReader是JavaScript中的一个WebAPI，它允许web应用程序异步读取用户计算机上的文件（或原始数据缓冲区）的内容，例如读取文件以获取其内容，并在不将文件发送到服务器的情况下在客户端使用它。这对于处理图片、文本文件等非常有用，尤其是当你想要在用户界面中即时显示文件内容或进行文件预览时。创建FileReader对象首先，你需要创建一个Fi
  • 算法 单链的创建与删除 换个号韩国红果果 c算法
    先创建结构体 struct student { int data; //int tag;//标记这是第几个 struct student *next; }; // addone 用于将一个数插入已从小到大排好序的链中 struct student *addone(struct student *h,int x){ if(h==NULL) //??????
  • 《大型网站系统与Java中间件实践》第2章读后感 白糖_ java中间件
           断断续续花了两天时间试读了《大型网站系统与Java中间件实践》的第2章，这章总述了从一个小型单机构建的网站发展到大型网站的演化过程---整个过程会遇到很多困难，但每一个屏障都会有解决方案，最终就是依靠这些个解决方案汇聚到一起组成了一个健壮稳定高效的大型系统。          看完整章内容，
  • zeus持久层spring事务单元测试 deng520159 javaDAOspringjdbc
    今天把zeus事务单元测试放出来,让大家指出他的毛病, 1.ZeusTransactionTest.java 单元测试   package com.dengliang.zeus.webdemo.test; import java.util.ArrayList; import java.util.List; import org.junit.Test; import
  • Rss 订阅 开发 周凡杨 htmlxml订阅rss规范
                    RSS是 Really Simple Syndication的缩写（对rss2.0而言，是这三个词的缩写，对rss1.0而言则是RDF Site Summary的缩写，1.0与2.0走的是两个体系）。   RSS
  • 分页查询实现 g21121 分页查询
    在查询列表时我们常常会用到分页，分页的好处就是减少数据交换，每次查询一定数量减少数据库压力等等。 按实现形式分前台分页和服务器分页： 前台分页就是一次查询出所有记录，在页面中用js进行虚拟分页，这种形式在数据量较小时优势比较明显，一次加载就不必再访问服务器了，但当数据量较大时会对页面造成压力，传输速度也会大幅下降。 服务器分页就是每次请求相同数量记录，按一定规则排序，每次取一定序号直接的数据
  • spring jms异步消息处理 510888780 jms
    spring JMS对于异步消息处理基本上只需配置下就能进行高效的处理。其核心就是消息侦听器容器，常用的类就是DefaultMessageListenerContainer。该容器可配置侦听器的并发数量，以及配合MessageListenerAdapter使用消息驱动POJO进行消息处理。且消息驱动POJO是放入TaskExecutor中进行处理，进一步提高性能，减少侦听器的阻塞。具体配置如下：
  • highCharts柱状图 布衣凌宇 hightCharts柱图
    第一步：导入 exporting.js,grid.js,highcharts.js;第二步：写controller   @Controller@RequestMapping(value="${adminPath}/statistick")public class StatistickController {  private UserServi
  • 我的spring学习笔记2-IoC（反向控制 依赖注入） aijuans springmvcSpring 教程spring3 教程Spring 入门
    IoC（反向控制 依赖注入）这是Spring提出来了，这也是Spring一大特色。这里我不用多说，我们看Spring教程就可以了解。当然我们不用Spring也可以用IoC，下面我将介绍不用Spring的IoC。 IoC不是框架，她是java的技术，如今大多数轻量级的容器都会用到IoC技术。这里我就用一个例子来说明： 如：程序中有 Mysql.calss 、Oracle.class 、SqlSe
  • TLS java简单实现 antlove javasslkeystoretlssecure
      1. SSLServer.java package ssl; import java.io.FileInputStream; import java.io.InputStream; import java.net.ServerSocket; import java.net.Socket; import java.security.KeyStore; import
  • Zip解压压缩文件 百合不是茶 Zip格式解压Zip流的使用文件解压
       ZIP文件的解压缩实质上就是从输入流中读取数据。Java.util.zip包提供了类ZipInputStream来读取ZIP文件,下面的代码段创建了一个输入流来读取ZIP格式的文件; ZipInputStream in = new ZipInputStream(new FileInputStream(zipFileName));     &n
  • underscore.js 学习（一） bijian1013 JavaScriptunderscore
            工作中需要用到underscore.js，发现这是一个包括了很多基本功能函数的js库，里面有很多实用的函数。而且它没有扩展 javascript的原生对象。主要涉及对Collection、Object、Array、Function的操作。       学
  • java jvm常用命令工具——jstatd命令(Java Statistics Monitoring Daemon) bijian1013 javajvmjstatd
    1.介绍         jstatd是一个基于RMI（Remove Method Invocation）的服务程序，它用于监控基于HotSpot的JVM中资源的创建及销毁，并且提供了一个远程接口允许远程的监控工具连接到本地的JVM执行命令。         jstatd是基于RMI的，所以在运行jstatd的服务
  • 【Spring框架三】Spring常用注解之Transactional bit1129 transactional
    Spring可以通过注解@Transactional来为业务逻辑层的方法(调用DAO完成持久化动作)添加事务能力，如下是@Transactional注解的定义：   /* * Copyright 2002-2010 the original author or authors. * * Licensed under the Apache License, Version
  • 我(程序员)的前进方向 bitray 程序员
    作为一个普通的程序员,我一直游走在java语言中,java也确实让我有了很多的体会.不过随着学习的深入,java语言的新技术产生的越来越多,从最初期的javase,我逐渐开始转变到ssh,ssi,这种主流的码农,.过了几天为了解决新问题,webservice的大旗也被我祭出来了,又过了些日子jms架构的activemq也开始必须学习了.再后来开始了一系列技术学习,osgi,restful.....
  • nginx lua开发经验总结 ronin47
    使用nginx lua已经两三个月了，项目接开发完毕了，这几天准备上线并且跟高德地图对接。回顾下来lua在项目中占得必中还是比较大的，跟PHP的占比差不多持平了，因此在开发中遇到一些问题备忘一下 1：content_by_lua中代码容量有限制，一般不要写太多代码，正常编写代码一般在100行左右（具体容量没有细心测哈哈，在4kb左右），如果超出了则重启nginx的时候会报 too long pa
  • java-66-用递归颠倒一个栈。例如输入栈{1,2,3,4,5}，1在栈顶。颠倒之后的栈为{5,4,3,2,1}，5处在栈顶 bylijinnan java
    import java.util.Stack; public class ReverseStackRecursive { /** * Q 66.颠倒栈。 * 题目：用递归颠倒一个栈。例如输入栈{1,2,3,4,5}，1在栈顶。 * 颠倒之后的栈为{5,4,3,2,1}，5处在栈顶。 *1. Pop the top element *2. Revers
  • 正确理解Linux内存占用过高的问题 cfyme linux
    Linux开机后，使用top命令查看，4G物理内存发现已使用的多大3.2G，占用率高达80%以上： Mem:   3889836k total,  3341868k used,   547968k free,   286044k buffers Swap:  6127608k total,&nb
  • [JWFD开源工作流]当前流程引擎设计的一个急需解决的问题 comsci 工作流
         当我们的流程引擎进入IRC阶段的时候，当循环反馈模型出现之后，每次循环都会导致一大堆节点内存数据残留在系统内存中，循环的次数越多，这些残留数据将导致系统内存溢出，并使得引擎崩溃。。。。。。       而解决办法就是利用汇编语言或者其它系统编程语言，在引擎运行时，把这些残留数据清除掉。
  • 自定义类的equals函数 dai_lm equals
    仅作笔记使用 public class VectorQueue { private final Vector<VectorItem> queue; private class VectorItem { private final Object item; private final int quantity; public VectorI
  • Linux下安装R语言 datageek R语言 linux
    命令如下：sudo gedit  /etc/apt/sources.list1、deb http://mirrors.ustc.edu.cn/CRAN/bin/linux/ubuntu/ precise/ 2、deb http://dk.archive.ubuntu.com/ubuntu hardy universesudo apt-key adv --keyserver ke
  • 如何修改mysql 并发数(连接数)最大值 dcj3sjt126com mysql
    MySQL的连接数最大值跟MySQL没关系，主要看系统和业务逻辑了   方法一：进入MYSQL安装目录 打开MYSQL配置文件 my.ini 或 my.cnf查找 max_connections=100 修改为 max_connections=1000 服务里重起MYSQL即可 　　方法二：MySQL的最大连接数默认是100客户端登录：mysql -uusername -ppass
  • 单一功能原则 dcj3sjt126com 面向对象的程序设计软件设计编程原则
    单一功能原则[ 编辑]     SOLID 原则 单一功能原则 开闭原则 Liskov代换原则 接口隔离原则 依赖反转原则 查   论   编 在面向对象编程领域中，单一功能原则（Single responsibility principle）规定每个类都应该有
  • POJO、VO和JavaBean区别和联系 fanmingxing VOPOJOjavabean
    POJO和JavaBean是我们常见的两个关键字，一般容易混淆，POJO全称是Plain Ordinary Java Object / Plain Old Java Object，中文可以翻译成：普通Java类，具有一部分getter/setter方法的那种类就可以称作POJO，但是JavaBean则比POJO复杂很多，JavaBean是一种组件技术，就好像你做了一个扳子，而这个扳子会在很多地方被
  • SpringSecurity3.X--LDAP：AD配置 hanqunfeng SpringSecurity
    前面介绍过基于本地数据库验证的方式，参考http://hanqunfeng.iteye.com/blog/1155226，这里说一下如何修改为使用AD进行身份验证【只对用户名和密码进行验证，权限依旧存储在本地数据库中】。   将配置文件中的如下部分删除： <!-- 认证管理器，使用自定义的UserDetailsService，并对密码采用md5加密-->
  • mac mysql 修改密码 IXHONG mysql
    $ sudo /usr/local/mysql/bin/mysqld_safe –user=root & //启动MySQL(也可以通过偏好设置面板来启动)$ sudo /usr/local/mysql/bin/mysqladmin -uroot password yourpassword //设置MySQL密码（注意，这是第一次MySQL密码为空的时候的设置命令，如果是修改密码，还需在-
  • 设计模式--抽象工厂模式 kerryg 设计模式
    抽象工厂模式：     工厂模式有一个问题就是，类的创建依赖于工厂类，也就是说，如果想要拓展程序，必须对工厂类进行修改，这违背了闭包原则。我们采用抽象工厂模式，创建多个工厂类，这样一旦需要增加新的功能，直接增加新的工厂类就可以了，不需要修改之前的代码。     总结：这个模式的好处就是，如果想增加一个功能，就需要做一个实现类，
  • 评"高中女生军训期跳楼” nannan408
       首先，先抛出我的观点，各位看官少点砖头。那就是，中国的差异化教育必须做起来。    孔圣人有云：有教无类。不同类型的人，都应该有对应的教育方法。目前中国的一体化教育，不知道已经扼杀了多少创造性人才。我们出不了爱迪生，出不了爱因斯坦，很大原因，是我们的培养思路错了，我们是第一要“顺从”。如果不顺从，我们的学校，就会用各种方法，罚站，罚写作业，各种罚。军
  • scala如何读取和写入文件内容？ qindongliang1922 javajvmscala
    直接看如下代码： package file import java.io.RandomAccessFile import java.nio.charset.Charset import scala.io.Source import scala.reflect.io.{File, Path} /** * Created by qindongliang on 2015/
  • C语言算法之百元买百鸡 qiufeihu c算法
    中国古代数学家张丘建在他的《算经》中提出了一个著名的“百钱买百鸡问题”，鸡翁一，值钱五，鸡母一，值钱三，鸡雏三，值钱一，百钱买百鸡，问翁，母，雏各几何？ 代码如下： #include <stdio.h> int main() { int cock,hen,chick; /*定义变量为基本整型*/ for(coc
  • Hadoop集群安全性：Hadoop中Namenode单点故障的解决方案及详细介绍AvatarNode wyz2009107220 NameNode
    正如大家所知，NameNode在Hadoop系统中存在单点故障问题，这个对于标榜高可用性的Hadoop来说一直是个软肋。本文讨论一下为了解决这个问题而存在的几个solution。 1. Secondary NameNode 原理：Secondary NN会定期的从NN中读取editlog，与自己存储的Image进行合并形成新的metadata image 优点：Hadoop较早的版本都自带，
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他