Javascript图片无缝滚动

js无缝滚动效果几乎在任何网页上都能看到它的身影，有的可能是使用插件，其实使用原始的javascript比较简单。

主要的是使用js位置知识。详细

1.innerHTML:设置或获取元素的html标签

2.scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距

3.offsetWidth:设置或获取指定标签的宽度

4.setInterval():设置方法定时启动

5.clearInterval();清除定时器

效果图：

Javascript图片无缝滚动_第1张图片

先睹为快：demo

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>javascript scroll制作</title>
</head>
<body>
<style>
    /*conment*/
    *{
    margin: 0;
    padding: 0;
  }
  img{max-width: 100%;}
  .container{
    max-width: 620px;
    margin: 0 auto;
    padding-top: 50px;
  }
  .text-center{text-align: center;}
  .list-inline li{
    display: inline-block;
  }
  .hide{display: none;}
  hr{
    margin:20px 0; 
  }
  .tag{
    background-color: #ccc;
    padding: 5px 0;
  }
  .tag li{
    padding: 0 10px;
    border-left: 1px solid #fff;
    cursor:pointer;
  }
  .tag li:first-child{
    border-left: transparent;
  }
  .tag li.active{
    background-color: #ddd;
  }
  .scroll{
    position: relative;
    padding: 10px;
    margin-bottom: 20px;
    background-color: #ddd;
  }
  .wrap{
    overflow: hidden; 
  }
  .content{
    min-width: 3000px;
    height: 200px;
  }
  .content ul{
    float: left;
  }
  .content ul li{
    display: inline-block;
    max-width: 200px;
  }
  #prev,#next{
    width: 50px;
    height: 50px; 
    margin-top: -25px;  
    background-color: #ccc; 
    line-height: 50px; 
    text-align: center;
    cursor: pointer;  
  }
  #prev{
    position: absolute;
    left: 0;
    top:50%;
    border-radius: 0 25px 25px 0;
  }
  #next{
    position: absolute;
    right: 0;
    top:50%; 
    border-radius: 25px 0 0 25px;
  }
</style>
    <div class="container">
        <h1 class="text-center">图片滚动制作</h1>
        <hr>
    <div class="scroll">
      <div class="wrap" id="wrap">
        <div id="content" class="content" >
          <ul id="list1">
            <li> <img src="freelance.gif" alt=""> </li>
            <li> <img src="button.gif" alt=""></li>
            <li> <img src="load.gif" alt=""></li>
            <li> <img src="straw.gif" alt=""></li>      
          </ul>
          <ul id="list2">
          </ul>
        </div>
      </div>

      <div id="prev">
        prev
      </div> 
      <div id="next">
        next
      </div>     
    </div> 
    </div>
<script>
  var wrap=document.getElementById('wrap');
  var list1=document.getElementById('list1');
  var list2=document.getElementById('list2');
  var prev=document.getElementById('prev');
  var next=document.getElementById('next');
  //创建复制一份内容列表
  list2.innerHTML=list1.innerHTML;
  //向左循环滚动
  function scroll(){
    if(wrap.scrollLeft>=list2.offsetWidth){
      wrap.scrollLeft=0;
    }
    else{
      wrap.scrollLeft++;
    }
  }
    timer = setInterval(scroll,1);
  //鼠标停留使用clearInterval()
  wrap.onmouseover=function(){
    clearInterval(timer);
  }
  wrap.onmouseout=function(){
    timer = setInterval(scroll,1);
  }
  //向左加速
  function scroll_l(){
    if(wrap.scrollLeft>=list2.offsetWidth){
      wrap.scrollLeft=0;
    }
    else{
      wrap.scrollLeft++;
    }
  }
  //向右滚动
  function scroll_r(){
    if(wrap.scrollLeft<=0){
      wrap.scrollLeft+=list2.offsetWidth;
    }
    else{
      wrap.scrollLeft--;
    }
  }   
  prev.onclick=function(){
    clearInterval(timer);
    change(0)
  }
  next.onclick=function(){
    clearInterval(timer);
    change(1)
  }
  function change(r){
    if(r==0){
      timer = setInterval(scroll_l,60);
      wrap.onmouseout = function(){
        timer = setInterval(scroll_l,60);
      }
    }
    if(r==1){
      timer = setInterval(scroll_r,60);
      wrap.onmouseout = function(){
        timer = setInterval(scroll_r,60);
      }
    } 
  } 
</script>  
</body>
</html>

效果演示：demo

原文链接：http://liteng.org/node/29

你可能感兴趣的:(JavaScript)

  • C# Blazor Full-Stack架构前后端开发详解 老胖闲聊 C#c#架构开发语言
    Blazor是微软推出的一个基于C#和.NET的前端框架，允许开发者使用C#代替JavaScript来构建交互式Web应用。BlazorFull-Stack是指将Blazor前端与ASP.NETCore后端结合，形成一个完整的全栈开发解决方案。以下是对BlazorFull-Stack的发展历史、应用领域、开发工具和工作原理的详细讲解。一、发展历史1.1Blazor的起源2018年：Blazor首次
  • AI对前端开发的冲击更直接？后端开发的AI替代阻力更大？后端开发因技术门槛更高，岗位稳定性略优于前端。 南北极之间 人工智能前端
    基于参考资料和行业现状，前端开发在短期内比后端开发更容易受到AI冲击，但两者均不会被完全取代。以下是具体分析（附参考资料引用）：一、AI对前端开发的冲击更直接自动化程度高：低代码工具（如FigmaAI、Webflow）可通过拖拽生成页面，替代基础布局和组件开发。代码生成工具（如GitHubCopilot、通义灵码）能根据自然语言描述生成HTML/CSS/JavaScript代码，替代30%-50%
  • Canvas 示例：4种超炫的网站动画背景效果 「已注销」 前端css3html5canvas
    今天，我们想分享一些动画背景的灵感。全屏背景图片的网站头部是最新的网页设计趋势，已经持续了一段时间。最近人们一直在转向动画添加更多的视觉兴趣到他们的网站中，在这里我们想向您分享几个使用JavaScript和Canvas创建不同页眉的动画示例。在线演示立即下载您可能感兴趣的相关文章网站开发中很有用的jQuery效果【附源码】分享35个让人惊讶的CSS3动画效果演示十分惊艳的8个HTML5&JavaS
  • Canvas渲染管线解析：从API调用到像素落地的全过程 沐土Arvin 信息可视化前端javascripthtmlcss
    1.Canvas基本定义★了解Canvas是HTML5提供的一个通过JavaScript来绘制图形的元素。它提供了一个空白的绘图区域，开发者可以使用JavaScript脚本在其中绘制各种图形、动画、游戏画面等。2.Canvas使用场景★了解数据可视化：绘制图表、图形等游戏开发：HTML5游戏图像处理：滤镜、像素操作动画效果：创建动态视觉效果交互式图形：绘图应用、设计工具教育演示：数学函数可视化等3
  • 使用 HTML、CSS 和 JavaScript 的简单模拟时钟 海拥✘ 100个前端优质项目javascriptcsshtml
    个人网站:【海拥】【小霸王游戏机】风趣幽默的前端学习课程：28个案例趣学前端想寻找共同学习交流的小伙伴，请点击【全栈技术交流群】免费且实用的计算机相关知识题库：进来逛逛给大家安利一个免费且实用的前端刷题（面经大全）网站，
  • Vue3 + GSAP：打造炫酷动效的终极指南 来自星星的坤 vue.js前端动画
    前言在现代前端开发中，动画已经成为提升用户体验的重要方式。Vue3作为一个强大的前端框架，与GSAP（GreenSockAnimationPlatform）结合，能让你的页面动效更加流畅且易于控制。本文将详细讲解如何在Vue3中集成GSAP，并带你实战几个常见的动画案例。1.什么是GSAP？GSAP是一个功能强大的JavaScript动画库，支持DOM、SVG、Canvas以及WebGL动画，具有
  • 透析Vue的nextTick原理 Sean2077 Vuevue.js
    nextTick是Vue.js中的一个核心机制，用于在下一次DOM更新周期后执行回调函数。它的核心原理是利用JavaScript的事件循环机制（EventLoop），结合微任务（Microtask）或宏任务（Macrotask）的调度策略，确保回调在DOM更新完成后执行。核心原理分析1.DOM更新的异步性Vue的数据驱动视图更新是异步批量执行的。当数据变化时，Vue不会立即更新DOM，而是开启一个
  • OpenAI SDK 前端入门探索 liumenging 前端AIai人工智能前端node.js
    本文介绍了如何使用OpenAISDK在TypeScript或JavaScript中访问OpenAIRESTAPI。GitHub仓库：openai-node1.安装首先，你需要安装OpenAISDK。可以通过以下命令进行安装：npminstallopenai2.使用说明本库的完整API文档可以在api.md文件中找到，并且还提供了许多代码示例。以下代码演示了如何使用聊天完成API。示例代码新建一个i
  • 红宝书第十九讲：详解JavaScript的Fetch API与Ajax请求 前端javascript
    红宝书第十九讲：详解JavaScript的FetchAPI与Ajax请求资料取自《JavaScript高级程序设计（第5版）》。查看总目录：红宝书学习大纲一、基本概念：为什么需要Fetch？FetchAPI是浏览器提供的现代网络请求工具，替代传统的Ajax（XMLHttpRequest）。核心特点：基于Promise→代码更简洁（告别回调函数嵌套）12支持流式处理→大文件分块传输时不卡死页面3灵活
  • mysql json类型查询效率高吗 zhihu-sys mysqljson数据库
    MySQLJSON类型查询效率解析作为一名经验丰富的开发者，我很高兴能帮助你了解MySQL中JSON类型的查询效率。JSON（JavaScriptObjectNotation）是一种轻量级的数据交换格式，广泛用于Web应用中。MySQL5.7版本开始支持JSON数据类型，这为存储和查询JSON数据提供了便利。1.准备工作在开始之前，我们需要确保你的MySQL版本至少是5.7。可以通过以下命令查看你
  • JavaScript、CSS像素动画特效代码
    我将从专业角度解析这个像素动画特效的实现原理，并提供优化方案。以下是详细的技术分解：一、核心实现原理graphTDA[HTML结构]-->B[容器定位]B-->C[CSS动画驱动]C-->D[JS动态生成]D-->E[粒子生命周期管理]二、代码优化建议内存优化方案：//修改后的JS代码（增加粒子回收机制）constMAX_PARTICLES=100;//最大粒子数functioncreatePix
  • 使用Selenium爬取动态表格中的多语言和编码格式 程序员笑笑 软件测试selenium测试工具功能测试软件测试自动化测试程序人生职场和发展
    正文Selenium是一个用于自动化Web浏览器的工具，它可以模拟用户的操作，如点击、输入、滚动等。Selenium也可以用于爬取网页中的数据，特别是对于那些动态生成的内容，如表格、图表、下拉菜单等。本文将介绍如何使用SeleniumPython爬取一个动态表格中的多语言和编码格式的数据，并将其保存为CSV文件。特点·Selenium可以处理JavaScript渲染的网页，而不需要额外的库或工具。
  • JavaScript的DOM节点操作 DTcode7 #前端基础入门三大核心之JSHTML核心知识点web知识点网页开发
    JavaScript的DOM节点操作基本概念和作用说明什么是DOM节点？DOM节点操作的意义示例一：创建新节点代码解析示例二：删除已有节点代码解析示例三：修改现有节点代码解析示例四：替换节点代码解析示例五：克隆节点代码解析实际开发中的技巧与经验分享在Web前端开发中，JavaScript与DOM（DocumentObjectModel）的结合是实现动态网页交互的核心技术之一。本文将深入探讨如何通过
  • 前端基础入门三大核心之JS篇：DOM事件传播与监听的艺术——addEventListener()的深度解析【含代码示例】 DTcode7 HTML网站开发#前端基础入门三大核心之JS前端javascript开发语言
    前端基础入门三大核心之JS篇：DOM事件传播与监听DOM事件传播：一场层次间的旅行基本概念案例一：直观感受传播使用思路`addEventListener()`：监听的艺术基本概念案例二：灵活监听技巧用与优化实战技巧案例三：性能优化安全性考量与漏洞防范案例四：XSS注入防范排查错思路与解决问题案例五：事件未触发结语与引思在JavaScript的王国里，DOM（DocumentObjectModel）
  • JavaScript DOM操作实战指南：从元素获取到事件处理全解析 Ch1oy javascript开发语言ecmascript前端html5
    一、DOM操作基础认知1.1什么是DOM？文档对象模型（DocumentObjectModel）是浏览器将HTML文档转换为树形结构的编程接口。每个HTML标签对应一个节点对象，开发者可以通过JavaScript操作这些节点实现页面动态更新。DOM操作包含三个核心方向：元素获取、内容修改和事件交互。1.2元素的获取①ID精准定位：通过元素的id属性进行唯一性查找使用方法：document.getE
  • 【JavaWeb】JavaScript 快速入门教程 2302_80979832 javascript开发语言ecmascript前端
    一、概述1.概念JavaScript,简称JS，是一门脚本语言，用来控制网页行为，实现页面交互效果2.组成JavaScript大体由三部分组成：ECMAScript，BOM，DOMECMAScript：规定JS的基础语法核心BOM：浏览器对象模型，用来操作浏览器本身，如：页面弹窗、地址拦截等等；DOM：文档对象模型，用于操作HTML文档，如：改变标签内容、改变标签内字体样式等等。二、核心语法（一）
  • 爬虫：Requests-HTML的详细使用 数据知道 2025年爬虫和逆向教程爬虫html前端python数据采集
    更多内容请见：爬虫和逆向教程-专栏介绍和目录文章目录1.Requests-HTML概述1.1为何选择Requests-HTML？1.2什么是Requests-HTML？1.3主要特性1.4安装`requests-html`2.基本用法2.1发送HTTP请求2.2解析HTML2.2.1使用CSS选择器2.2.2使用XPath2.2.3使用`search`方法2.3处理JavaScript渲染的页面3
  • 精选前端面试题（持续更新中ing） 一个W牛 前端经验分享面试
    1、js中set和map的作用和区别?在JavaScript中，Set和Map是两种非常重要的集合类型1、Set是一种集合数据结构，用于存储唯一值。它类似于数组，但成员的值都是唯一的，没有重复的值。Set中的值只能是唯一的，任何重复的值都会被自动忽略。Set中的值可以是任何数据类型（原始值或对象引用）。Set提供了操作集合的方法，比如添加、删除、检查成员等。add(value):添加一个值到Set
  • JavaScript模板字符串: 柒七爱吃麻辣烫 javascript开发语言ecmascriptjava前端
    1.示例代码（包含注释）:JS-数据类型//利用``包裹起来的字符串被称为模板字符串//在``中引入变量可以采用${}里面写变量的名字引入letname='张三';letage=19;console.log(`我叫${name},我今年已经${age}岁了`);2.运行效果:
  • 前端代码中请求参数应该如何封装？ json
    在前端开发中，正确封装请求参数是避免414Request-URITooLarge错误的关键步骤之一。当请求参数过多或过长时，应该将它们封装在请求体中，而不是附加在URL中。以下是一些常见的前端框架和库中如何封装请求参数的方法。一、使用POST请求封装参数（一）原生JavaScript在原生JavaScript中，可以使用XMLHttpRequest或fetchAPI来发送POST请求，并将参数封装
  • Python + Chrome 爬虫：如何抓取 AJAX 动态加载数据？ 小白学大数据 pythonpythonchrome爬虫开发语言
    在现代Web开发中，AJAX（AsynchronousJavaScriptandXML）技术被广泛应用于动态加载数据，使得网页能够在不刷新的情况下更新内容。然而，这也给传统爬虫带来了挑战——使用requests+BeautifulSoup只能获取初始HTML，而无法捕获AJAX返回的动态数据。解决方案：Selenium+ChromeDriver：模拟浏览器行为，等待AJAX数据加载完成后再抓取。直
  • jQuery Autocomplete 揭秘：从原理到实践 lsx202406 开发语言
    jQueryAutocomplete揭秘：从原理到实践引言随着互联网的快速发展，用户对于网页交互体验的要求越来越高。为了提高用户体验，许多网页都采用了自动补全（Autocomplete）功能。jQueryAutocomplete是一款流行的JavaScript库，它可以帮助开发者轻松实现自动补全功能。本文将深入探讨jQueryAutocomplete的原理、使用方法以及在实际项目中的应用。jQue
  • 前端工程化--gulp的使用 前端_学习之路 前端工程化gulprustnode.js
    gulp介绍gulp是一个基于Nodejs的自动化构建工具，中文主页能自动化地完成javascript/coffee/sass/less/html/image/css等文件的合并、压缩、检查、监听文件变化、浏览器自动刷新、测试等任务使用步骤：安装nodejs全局安装gulpnpminstallgulp-g局部安装gulpnpminstallgulp--save-dev创建一个简单的应用，文件结构如
  • 前端常见的数据加密 阿超学编程 前端
    提示：记录工作中遇到的需求及解决办法文章目录前言什么是前端数据加密？一、前端数据加密的基本原理二、前端数据加密的应用场景为什么需要前端数据加密？一、前端数据面临的安全威胁二、前端数据加密的重要性前端数据加密的常见方法和技术一、使用JavaScript库进行加密二、使用WebCryptoAPI进行加密三、使用HTTPS协议传输加密数据四、优缺点总结CryptoJS使用示例一、安装CryptoJS:二
  • 赛博朋克风格的数字孪生应用于前端开发 IOWEL 前端
    在前端开发中，数字孪生是一种模拟现实世界实体的虚拟实体，它可以通过使用传感器数据和实时监测来与实际对象进行交互。本文将介绍如何使用赛博朋克风格的语言和设计元素来诠释数字孪生的概念，并实现一个基于前端技术的案例。首先，我们需要创建一个基本的前端应用程序框架。我们将使用HTML、CSS和JavaScript来构建我们的应用。以下是一个简单的HTML结构，用于容纳我们的数字孪生应用：
  • javascript 力扣leetcode hot100题解 大踩踩 javascriptleetcode开发语言
    1、两数之和点评：最初的梦想vartwoSum=function(nums,target){letmap=newMap();letresult=[];for(leti=0;ia-b);letlen=1;letmax=1;letdp=nums[0];for(leti=1;ia-b);letresult=[];for(leti=0;iheight[st[st.length-1]]){//注意这里是wh
  • leetcode刷题（javaScript）——数组相关场景题总结 三月的一天 Leetcode刷题技巧总结算法
    数组只是一种数据结构，通常结合其他算法场景出现。这里总结几类在LeetCode刷题时，针对数组相关的场景题，可以使用以下技巧和方法：双指针法：快慢指针用于解决数组中的有序问题，如移除重复项、找出唯一元素等。左右指针用于解决数组中的对撞问题，如两数之和、接雨水等。排序：对数组进行排序可以简化很多问题，如对数组进行排序后，可以更容易地解决部分排序问题。哈希表：使用对象字面量或Map结构存储键值对，可以
  • pythonjson数据_一文看懂Python类型数据JSON序列化 weixin_39582569 pythonjson数据
    现代网络应用WebAPP或大型网站的后台一般只有一个，然后客户端却是各种各样的(iOS,android,浏览器),而且客户端的开发语言很可能与后台的开发语言不一样。这时我们需要后台能够提供可以跨平台跨语言的一种标准的数据交换格式供前后端沟通(这就是WebAPI的作用)。如今大家最常用的跨平台跨语言数据交换格式就是JSON（JavaScriptObjectNotation）了。JSON是一种文本序列
  • 27、web前端开发之CSS3（四） 跟着汪老师学编程 前端css3css
    8.动画（Animations）CSS3引入了强大的动画（Animations）功能，使得网页开发者可以通过纯CSS实现复杂的动画效果，而无需依赖JavaScript。通过@keyframes规则，开发者可以定义多个关键帧点，从而创建平滑且灵活的动画序列。本节将详细讲解CSS3动画的基本使用、动画属性、实际应用场景及最佳实践。8.1.动画的基本概念CSS3动画允许开发者通过定义多个关键帧点（Key
  • Python||JSON文件 VS. json模块一文读懂异与同 the_time_runner #小白学Pythonjson模块JSON编码格式json.loads()json.dumps()
    JSON(JavaScriptObjectNotation)是一种文件编码格式。python中json是一个模块(官方文档菜鸟教程),用于解析或编码JSON文件。importjson#将python格式编码成JSON数据格式json.dumps([1,2,3,{'4':5,'6':7}],separators=(',',':'))#'[1,2,3,{"4":5,"6":7}]'>>>将JSON数据
  • JAVA中的Enum 周凡杨 javaenum枚举
    Enum是计算机编程语言中的一种数据类型---枚举类型。 在实际问题中，有些变量的取值被限定在一个有限的范围内。     例如，一个星期内只有七天 我们通常这样实现上面的定义： public String monday; public String tuesday; public String wensday; public String thursday
  • 赶集网mysql开发36条军规 Bill_chen mysql业务架构设计mysql调优mysql性能优化
    (一)核心军规 (1)不在数据库做运算    cpu计算务必移至业务层； (2)控制单表数据量    int型不超过1000w，含char则不超过500w；    合理分表；    限制单库表数量在300以内； (3)控制列数量    字段少而精，字段数建议在20以内
  • Shell test命令 daizj shell字符串test数字文件比较
    Shell test命令 Shell中的 test 命令用于检查某个条件是否成立，它可以进行数值、字符和文件三个方面的测试。 数值测试 参数 说明 -eq 等于则为真 -ne 不等于则为真 -gt 大于则为真 -ge 大于等于则为真 -lt 小于则为真 -le 小于等于则为真 实例演示： num1=100 num2=100if test $[num1]
  • XFire框架实现WebService(二) 周凡杨 javawebservice
       有了XFire框架实现WebService(一)，就可以继续开发WebService的简单应用。 Webservice的服务端(WEB工程)： 两个java bean类： Course.java    package cn.com.bean; public class Course {     private
  • 重绘之画图板 朱辉辉33 画图板
           上次博客讲的五子棋重绘比较简单，因为只要在重写系统重绘方法paint（）时加入棋盘和棋子的绘制。这次我想说说画图板的重绘。        画图板重绘难在需要重绘的类型很多，比如说里面有矩形，园，直线之类的，所以我们要想办法将里面的图形加入一个队列中，这样在重绘时就
  • Java的IO流 西蜀石兰 java
    刚学Java的IO流时，被各种inputStream流弄的很迷糊，看老罗视频时说想象成插在文件上的一根管道，当初听时觉得自己很明白，可到自己用时，有不知道怎么代码了。。。 每当遇到这种问题时，我习惯性的从头开始理逻辑，会问自己一些很简单的问题，把这些简单的问题想明白了，再看代码时才不会迷糊。 IO流作用是什么？ 答：实现对文件的读写，这里的文件是广义的； Java如何实现程序到文件
  • No matching PlatformTransactionManager bean found for qualifier 'add' - neither 林鹤霄
    java.lang.IllegalStateException: No matching PlatformTransactionManager bean found for qualifier 'add' - neither qualifier match nor bean name match!   网上找了好多的资料没能解决，后来发现：项目中使用的是xml配置的方式配置事务，但是
  • Row size too large (> 8126). Changing some columns to TEXT or BLOB aigo column
    原文：http://stackoverflow.com/questions/15585602/change-limit-for-mysql-row-size-too-large   异常信息： Row size too large (> 8126). Changing some columns to TEXT or BLOB or using ROW_FORMAT=DYNAM
  • JS 格式化时间 alxw4616 JavaScript
    /** * 格式化时间 2013/6/13 by 半仙 alxw4616@msn.com * 需要 pad 函数 * 接收可用的时间值. * 返回替换时间占位符后的字符串 * * 时间占位符:年 Y 月 M 日 D 小时 h 分 m 秒 s 重复次数表示占位数 * 如 YYYY 4占4位 YY 占2位<p></p> * MM DD hh mm
  • 队列中数据的移除问题 百合不是茶 队列移除
         队列的移除一般都是使用的remov();都可以移除的,但是在昨天做线程移除的时候出现了点问题,没有将遍历出来的全部移除,  代码如下;      // package com.Thread0715.com; import java.util.ArrayList; public class Threa
  • Runnable接口使用实例 bijian1013 javathreadRunnablejava多线程
    Runnable接口 a.       该接口只有一个方法：public void run(); b.       实现该接口的类必须覆盖该run方法 c.       实现了Runnable接口的类并不具有任何天
  • oracle里的extend详解 bijian1013 oracle数据库extend
    扩展已知的数组空间，例： DECLARE TYPE CourseList IS TABLE OF VARCHAR2(10); courses CourseList; BEGIN -- 初始化数组元素，大小为3 courses := CourseList('Biol 4412 ', 'Psyc 3112 ', 'Anth 3001 '); --
  • 【httpclient】httpclient发送表单POST请求 bit1129 httpclient
    浏览器Form Post请求 浏览器可以通过提交表单的方式向服务器发起POST请求，这种形式的POST请求不同于一般的POST请求 1. 一般的POST请求，将请求数据放置于请求体中，服务器端以二进制流的方式读取数据，HttpServletRequest.getInputStream()。这种方式的请求可以处理任意数据形式的POST请求，比如请求数据是字符串或者是二进制数据 2. Form
  • 【Hive十三】Hive读写Avro格式的数据 bit1129 hive
     1. 原始数据 hive> select * from word; OK 1 MSN 10 QQ 100 Gtalk 1000 Skype      2. 创建avro格式的数据表   hive> CREATE TABLE avro_table(age INT, name STRING)STORE
  • nginx+lua+redis自动识别封解禁频繁访问IP ronin47
    在站点遇到攻击且无明显攻击特征，造成站点访问慢，nginx不断返回502等错误时，可利用nginx+lua+redis实现在指定的时间段 内，若单IP的请求量达到指定的数量后对该IP进行封禁，nginx返回403禁止访问。利用redis的expire命令设置封禁IP的过期时间达到在 指定的封禁时间后实行自动解封的目的。 一、安装环境： CentOS x64 release 6.4(Fin
  • java-二叉树的遍历-先序、中序、后序（递归和非递归）、层次遍历 bylijinnan java
    import java.util.LinkedList; import java.util.List; import java.util.Stack; public class BinTreeTraverse { //private int[] array={ 1, 2, 3, 4, 5, 6, 7, 8, 9 }; private int[] array={ 10,6,
  • Spring源码学习-XML 配置方式的IoC容器启动过程分析 bylijinnan javaspringIOC
    以FileSystemXmlApplicationContext为例，把Spring IoC容器的初始化流程走一遍： ApplicationContext context = new FileSystemXmlApplicationContext ("C:/Users/ZARA/workspace/HelloSpring/src/Beans.xml&q
  • [科研与项目]民营企业请慎重参与军事科技工程 comsci 企业
         军事科研工程和项目 并非要用最先进，最时髦的技术，而是要做到“万无一失”    而民营科技企业在搞科技创新工程的时候，往往考虑的是技术的先进性，而对先进技术带来的风险考虑得不够，在今天提倡军民融合发展的大环境下，这种“万无一失”和“时髦性”的矛盾会日益凸显。。。。。。所以请大家在参与任何重大的军事和政府项目之前，对
  • spring 定时器-两种方式 cuityang springquartz定时器
    方式一： 间隔一定时间 运行 <bean id="updateSessionIdTask" class="com.yang.iprms.common.UpdateSessionTask" autowire="byName" /> <bean id="updateSessionIdSchedule
  • 简述一下关于BroadView站点的相关设计 damoqiongqiu view
    终于弄上线了，累趴，戳这里http://www.broadview.com.cn   简述一下相关的技术点   前端：jQuery+BootStrap3.2+HandleBars，全站Ajax（貌似对SEO的影响很大啊！怎么破？），用Grunt对全部JS做了压缩处理，对部分JS和CSS做了合并（模块间存在很多依赖，全部合并比较繁琐，待完善）。   后端：U
  • 运维 PHP问题汇总 dcj3sjt126com windows2003
    1、Dede(织梦)发表文章时,内容自动添加关键字显示空白页 解决方法： 后台>系统>系统基本参数>核心设置>关键字替换（是/否），这里选择“是”。 后台>系统>系统基本参数>其他选项>自动提取关键字，这里选择“是”。   2、解决PHP168超级管理员上传图片提示你的空间不足 网站是用PHP168做的，反映使用管理员在后台无法
  • mac 下 安装php扩展 - mcrypt dcj3sjt126com PHP
    MCrypt是一个功能强大的加密算法扩展库，它包括有22种算法，phpMyAdmin依赖这个PHP扩展，具体如下： 下载并解压libmcrypt-2.5.8.tar.gz。 在终端执行如下命令： tar zxvf libmcrypt-2.5.8.tar.gz cd libmcrypt-2.5.8/ ./configure --disable-posix-threads --
  • MongoDB更新文档 [四] eksliang mongodbMongodb更新文档
    MongoDB更新文档 转载请出自出处：http://eksliang.iteye.com/blog/2174104 MongoDB对文档的CURD，前面的博客简单介绍了，但是对文档更新篇幅比较大，所以这里单独拿出来。 语法结构如下： db.collection.update( criteria, objNew, upsert, multi) 参数含义 参数   
  • Linux下的解压，移除，复制，查看tomcat命令 y806839048 tomcat
    重复myeclipse生成webservice有问题删除以前的，干净 1、先切换到：cd usr/local/tomcat5/logs 2、tail -f catalina.out 3、这样运行时就可以实时查看运行日志了 Ctrl+c 是退出tail命令。 有问题不明的先注掉   cp /opt/tomcat-6.0.44/webapps/g
  • Spring之使用事务缘由(3-XML实现) ihuning spring
      用事务通知声明式地管理事务   事务管理是一种横切关注点。为了在 Spring 2.x 中启用声明式事务管理，可以通过 tx Schema 中定义的 <tx:advice> 元素声明事务通知，为此必须事先将这个 Schema 定义添加到 <beans> 根元素中去。声明了事务通知后，就需要将它与切入点关联起来。由于事务通知是在 <aop:
  • GCD使用经验与技巧浅谈 啸笑天 GC
    前言 GCD(Grand Central Dispatch)可以说是Mac、iOS开发中的一大“利器”，本文就总结一些有关使用GCD的经验与技巧。 dispatch_once_t必须是全局或static变量 这一条算是“老生常谈”了，但我认为还是有必要强调一次，毕竟非全局或非static的dispatch_once_t变量在使用时会导致非常不好排查的bug，正确的如下： 1
  • linux（Ubuntu）下常用命令备忘录1 macroli linux工作ubuntu
    在使用下面的命令是可以通过--help来获取更多的信息1,查询当前目录文件列表：ls ls命令默认状态下将按首字母升序列出你当前文件夹下面的所有内容，但这样直接运行所得到的信息也是比较少的，通常它可以结合以下这些参数运行以查询更多的信息：  ls / 显示/.下的所有文件和目录  ls -l 给出文件或者文件夹的详细信息 ls -a 显示所有文件，包括隐藏文
  • nodejs同步操作mysql qiaolevip 学习永无止境每天进步一点点mysqlnodejs
    // db-util.js var mysql = require('mysql'); var pool = mysql.createPool({ connectionLimit : 10, host: 'localhost', user: 'root', password: '', database: 'test', port: 3306 });
  • 一起学Hive系列文章 superlxw1234 hiveHive入门
      [一起学Hive]系列文章 目录贴，入门Hive，持续更新中。   [一起学Hive]之一—Hive概述，Hive是什么 [一起学Hive]之二—Hive函数大全-完整版 [一起学Hive]之三—Hive中的数据库(Database)和表(Table) [一起学Hive]之四-Hive的安装配置 [一起学Hive]之五-Hive的视图和分区 [一起学Hive
  • Spring开发利器：Spring Tool Suite 3.7.0 发布 wiselyman spring
    Spring Tool Suite(简称STS)是基于Eclipse，专门针对Spring开发者提供大量的便捷功能的优秀开发工具。   在3.7.0版本主要做了如下的更新：   将eclipse版本更新至Eclipse Mars 4.5 GA Spring Boot(JavaEE开发的颠覆者集大成者，推荐大家学习)的配置语言YAML编辑器的支持(包含自动提示，
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他