weixin_34378969
weixin_34378969

使用原生JS且稳定无bug的轮播图

20190313，花了整个白天跟着慕课网的教程做了这个轮播图，受益颇多。老师讲的切图过程中不响应点击事件那里有点bug，已经修正。

5张图片放在img文件夹中，分别取名timg1.jpg, timg2.jpg……timg5.jpg。图片分辨率均为600*400

  1 DOCTYPE html>
  2 <html lang="en">
  3 <head>
  4     <meta charset="UTF-8">
  5     <title>Slidertitle>
  6     <style>
  7         * {
  8             padding: 0;
  9             margin: 0;
 10             -webkit-box-sizing: border-box;
 11       　　　 -moz-box-sizing: border-box;
 12             box-sizing: border-box;
 13         }
 14         #container {
 15             position: relative;
 16             height: 400px;
 17             width: 600px;
 18             margin: 100px auto;
 19             overflow: hidden;
 20         }
 21         /* 怎么让7张图片排成一排呢？将7张图片的父容器宽度设为600*7，img再float */
 22         /* 值得注意的一点是，这个图片框必须position为absolute，这样才能让JS通过修改该元素的left值来定位 */
 23         #pics {
 24             position: absolute;
 25             width: 4200px;
 26             height: 100%;
 27             z-index: 1;
 28         }
 29         /* 为什么img不float时，就排不下？img之间的间距是哪来的呢？不是reset了吗？ */
 30         #pics>img {
 31             float: left;
 32         }
 33         #dots {
 34             position: absolute;
 35             height: 10px;
 36             width: 300px;
 37             left: 150px;
 38             bottom: 10px;
 39             z-index: 2;
 40         }
 41         /* 这里比较陌生，需要注意 */
 42         #dots>span {
 43             cursor: pointer;
 44             float: left;
 45             height: 6px;
 46             width: 50px;
 47             margin: 2px 5px;
 48             background: rgb(253, 253, 253);
 49             border-radius: 2px;
 50             box-shadow: 0px 1px 2px rgb(223, 223, 223);
 51         }
 52         #dots .on {
 53             background: orange;
 54         }
 55         /* 这里将a标签当块级元素处理 */
 56         .arrow {
 57             position: absolute;
 58             cursor: pointer;
 59             text-decoration: none; 
 60             display: none;
 61             height: 40px;
 62             width: 30px;
 63             line-height: 40px;
 64             font-size: 20px;
 65             font-weight: 500;
 66             color: rgb(235, 235, 235);
 67             /* text-align: center; */
 68             background: rgba(90, 90, 90, 0.4);
 69             z-index: 2;
 70         }
 71         #prev {
 72             left: 0;
 73             top: 165px;            
 74             padding-left: 5px;
 75             border-top-right-radius: 20px;
 76             border-bottom-right-radius: 20px;
 77         }
 78         #next {
 79             right: 0;
 80             top: 165px;    
 81             padding-left: 10px;
 82             border-top-left-radius: 20px;
 83             border-bottom-left-radius: 20px;
 84         }
 85         #container:hover .arrow{display: block;}
 86         .arrow:hover {background: rgba(82, 82, 82, 0.5)}
 87     style>
 88 
 89 head>
 90 <body>    
 91     <div id="container">
 92         
 93         <div id="pics" style="left: -600px;">
 94             <img src="img/timg5.jpg" alt="1">
 95             <img src="img/timg1.jpg" alt="1">
 96             <img src="img/timg2.jpg" alt="2">
 97             <img src="img/timg3.jpg" alt="3">
 98             <img src="img/timg4.jpg" alt="4">
 99             <img src="img/timg5.jpg" alt="5">
100             <img src="img/timg1.jpg" alt="5">
101         div>
102 
103         <div id="dots">
104             
105             <span index="1" class="on">span>
106             <span index="2">span>
107             <span index="3">span>
108             <span index="4">span>
109             <span index="5">span>
110         div>
111 
112         <a href="javascript:;" id="prev" class="arrow"><a>
113         <a href="javascript:;" id="next" class="arrow">>a>
114     div>
115 
116     <script>
117         window.onload = function() {
118             var container = document.getElementById('container');
119             var pics = document.getElementById('pics');
120             var buttons = document.getElementById('dots').getElementsByTagName('span');
121             var prev = document.getElementById('prev');
122             var next = document.getElementById('next');
123             var index = 1; //这个全局变量index表示当前亮起的那个指示条的下标+1
124             var isMoving = false;//是否在切换运动中
125             var timer; //最后实现自动播放时用的
126 
127             //获取完元素就开始基础的事件绑定，先实现点击左右箭头切换
128             //最开始分别写左右按钮
129             //值得注意的是onclick和addEventListener的用法，比如xx.οnclick=animate(-/+600)是无效的！必须套在匿名函数中。但是若animate函数不用传参，则可以不套。
130             //下面五个条的亮暗和左右点击操作有关，于是showButton函数要在左右按钮的onclick事件里面执行
131             prev.onclick = function() {
132                 if(!isMoving){
133                     if(index == 1) {
134                         index = 5;
135                     } else {
136                         index--;
137                     }                
138                 showButton();                                
139                 animate(600);
140                 }                        
141             }
142             next.onclick = function() {
143                 if(!isMoving) {
144                     if(index == 5) {
145                         index = 1;
146                     } else {
147                         index++;
148                     }                    
149                         
150                     showButton();                    
151                     animate(-600);    
152                 }    
153             }
154 
155             function animate(offset) {
156                 // var isMoving = true; 这样写就没用啦！因为这样没改变外面的isMoving值，那些click事件一直获取到外部的isMoving==false，所以运动时还是会响应
157                 isMoving = true;
158                 var newLeft = parseInt(pics.style.left) + offset;
159                 //下面三个变量的定义和go函数的if语句是来实现平移动画的。
160                 var time = 300; //位移总的时间
161                 var interval = 10; //位移间隔时间
162                 var speed = offset/(time/interval); //每次的位移量
163 
164                //当快速地点击切换图片时，会进行大量的计算，还在运动过程中就又要响应，这是既不合理又折磨浏览器的。
　　　　　　　　　　　//所以应该设定运动过程中不响应切换图片的操作。设一个参数表示是否在运动的状态，参数放在哪呢？当然不是放在这里啦。
　　　　　　　　　　　//运动状态是一个宏观的大家都能得到的，并且那些外部的点击事件也要参考这个状态来决定是否执行。这里是用来“制造运动”的。
　　　　　　　　　　　//所以一执行这个animate函数 就开始运动了，执行到else里面就运动结束。 接下来就是通过这个isMoving状态来控制那些点击事件了。
165 
166                 //记住左移时 offset为正，speed为正。越左边pics.style.left越大。
167                 function go() {
168                     if ( (speed < 0 && parseInt(pics.style.left) > newLeft) || (speed > 0 && parseInt(pics.style.left) < newLeft) ) {
169                         pics.style.left = parseInt(pics.style.left) + speed + 'px';
170                         setTimeout(go, interval);//递归
171                     } 
172                     else {
173                         isMoving = false;        
174                         //下面这些是第一步骤。
175                         pics.style.left = newLeft + 'px';
176                         //到这里要实现无限滚动，发现需要多次用到pics.style.left值，便存到newLeft
177                         if(newLeft > -600) {
178                             pics.style.left = -3000 + 'px';
179                         }
180                         if(newLeft < -3000) {
181                             pics.style.left = -600 + 'px';
182                         }  
183                     }
184                 }
185                 go();    //不调用就不会执行哦                    
186             }
187 
188             //注意亮起对应的小长条之前要把那个亮着的长条给灭掉
189             //还有很重要的一点，如果点右箭头使得index到5了，而buttons[5]不存在，控制台报错，左箭头使index减到-1也是如此。
　　　　　　　　　//因此要在左右箭头的点击函数里改进。为什么到那里而不在showbutton函数里呢？因为showButton并没有控制index的加减。
190             function showButton() {
191                 for(var i = 0; i < buttons.length; i++) {
192                     if(buttons[i].className == 'on') {
193                         buttons[i].className = '';
194                         break;
195                     }
196                 }
197                 buttons[index-1].className = 'on';
198             }
199 
200             //接下来实现点击下面5个长条(button)来跳转到对应的图片,像左右箭头一样调用animate函数，不同的是左右箭头知道offset为±600，
　　　　　　　　　//这里则要算出跳了多少个点再乘-600px。这里很巧妙，利用span里面自定义的属性index和现在程序里表示当前哪个class为on的button的index值来做比较。
　　　　　　　　　//前者是目标元素，后者是亮的元素。
201             for(var i = 0; i < buttons.length; i++) {
202                 buttons[i].onclick = function() {
203                     //下面这一句是用来判断当前的button是不是已经亮了，如果是的话就什么都不干，没必要进行接下去的那些计算。这是一个小优化点。
204                     if(!isMoving) {
205                         if(this.className == 'on') { return; }
206                         var myIndex = parseInt(this.getAttribute('index'));
207                         var offset = -600 * (myIndex - index);    
208                                         
209                         animate(offset);
210                                     
211                         //注意下面别忘了
212                         index = myIndex;
213                         showButton();    
214                     }
215                             
216                 }
217             }
218 
219             //接下来就是加上切换时的移动动画。在哪加呢？在掌控left值的animate函数里面。
220 
221             //最后是自动轮播的功能
222             function play() {
223                 timer = setInterval(function() {
224                     next.onclick();
225                 }, 2000);
226             }
227 
228             function stop() {
229                 clearInterval(timer);
230             }
231 
232             container.onmouseover = stop;
233             container.onmouseout = play;
234 
235             play();
236         }
237     script>
238 body>
239 html>

 

转载于:https://www.cnblogs.com/garmin6/p/10525537.html

你可能感兴趣的:(使用原生JS且稳定无bug的轮播图)

  • 未登录词 Out-of-Vocabulary, OOV risc123456 nlp
    未登录词oov未登录词（Out-of-Vocabulary,OOV）是指在训练数据中没有出现过的词汇，但在测试数据或实际应用中却出现了。未登录词是自然语言处理（NLP）任务中常见的挑战之一，因为它们可能导致模型无法正确处理或理解这些词汇，从而影响模型的性能。以下是一些关于未登录词的详细解释和处理方法：###未登录词的来源1.**罕见词**：在训练数据中出现次数非常少的词，可能在训练过程中被忽略或未
  • 探索ChatLiteLLM与Langchain的集成应用 safHTEAHE langchainpython
    在现代AI应用开发中，简化调用多种语言模型的过程显得尤为重要。ChatLiteLLM库应运而生，它为开发者提供了调用如Anthropic、Azure、Huggingface、Replicate等模型的简便方法。这篇文章将带你深入了解如何使用Langchain与LiteLLMI/O库协同工作，实现高效的语言模型交互。1.技术背景介绍随着人工智能技术的飞速发展，多种语言模型应用于不同场景。集成这些模型
  • 高效使用Alibaba Cloud PAI EAS进行AI模型推理 sagvWSRJHMNEB 人工智能深度学习神经网络python
    技术背景介绍在当今的AI模型开发中，高效的推理服务是将训练好的模型投入实际应用的关键环节。AlibabaCloudPAI平台专为企业级AI开发提供了一整套服务，其中的PAI-EAS（ElasticAlgorithmService）是用于模型推理和部署的高性能服务。它支持多种硬件资源，能够在高吞吐量和低延迟环境下运行复杂模型，并提供灵活的弹性扩展和全面的运维监控系统。核心原理解析PAI-EAS通过结
  • MongoDB权限讲解 只想按时下班 mongodbmongodb数据库
    文章目录MongoDB权限说明普通用户管理用户授权用户超级管理员创建管理用户mongdb库创建读写用户一个用户多个权限MongoDB权限说明权限误区：并不是说下面的排序就证明权限越来越大除了readWrite权限用户外(root权限用户也包括)，其它用户都不具备对数据库的写入权限，除read权限外，其它用户都不具备对数据库中的读权限，每个权限的功能各不一样(除root外)普通用户普通用户只是拥有下
  • tomcat配置存放静态资源，实现网页访问并下载 qq_40711092 tomcatjava
    配置server.xml在server.xml文件中的Host标签下嵌入一个Context标签，path是映射的web路径，doBase是本地磁盘的物理路径。-->-->设置tomcat允许访问静态文件夹，修改web.xml文件中如下图位置将false修改为truedefaultorg.apache.catalina.servlets.DefaultServletdebug0listingstru
  • 缓存为什么比主存快？ Wx深入理解嵌入式 缓存缓存为什么比主存快？SRAM的原理DRAM的原理
    缓存之所以比主存快，这是一个被广泛认知但未必深入理解的现象。让我们揭开这层神秘的面纱，探索缓存与主存速度差异的根本原因。目录1、多因素协同作用2、存储技术的较量SRAM的优势：DRAM的挑战：3、技术细节的深入5、总结1、多因素协同作用缓存与主存的速度差异，是由一系列相互交织的因素所决定的。这些因素包括存储器与处理器核心的距离、总线宽度、数据传输协议的复杂性，以及每种存储器的内在技术。2、存储技术
  • Oracle（2）Oracle数据库的主要组件有哪些？ 辞暮尔尔-烟火年年 Oracleoracle数据库
    Oracle数据库的主要组件包括以下几个部分，每个组件在数据库管理和操作中都起着至关重要的作用。以下是对这些组件的详细介绍，并结合一些代码示例来说明其功能。1.实例（Instance）Oracle实例是Oracle数据库的运行环境，由内存结构和后台进程组成。一个实例控制一个数据库的操作。内存结构系统全局区（SGA）：共享内存区，用于存储数据库缓存和共享信息。程序全局区（PGA）：为每个服务器进程分
  • (已解决)Failed to execute goal on project ...: Could not resolve dependencies for projec qq_40711092 问题记录java
    这样的错误，最后发现原来是自己没有首先对父项目也就是interface-test项目进行clean和install.https://blog.csdn.net/qq_43493747/article/details/120866443
  • mongoDB操作数据库常见指令 我只会ctrl cv mongodb指令mongodb
    mongoDB操作数据库常见指令查询库showdbs创建库/切换库use`tableName`查看当前use的标下有哪些表showcollections//和db.getCollectionNames()类似给指定的tableName添加数据db.tableName.insert({"name":"jsonData"})//可以使用for循环创建数据for(vari=0;i=23并且age<=26
  • Perl 语言入门学习 喵丶派对 适用的技巧perl
    Perl是一种自由和通用的脚本语言，特别适用于文本处理。它的设计者是LarryWall，最初是为了简化Unix系统管理任务而开发的。Perl具有丰富的正则表达式功能、内置的数据结构、强大的文件处理能力以及灵活的语法，使得它成为了许多系统管理员和网络管理员的首选工具。Perl的特点：简洁的语法：Perl的语法非常简单，易于学习和阅读。它的代码通常很紧凑，易于编写和维护。跨平台：Perl可以在几乎所有
  • Linux下内存泄漏排查 极地星光 Linux运维linux
    在Linux系统下，针对C++项目的内存泄漏排查，可以采用多种方法和工具。以下是对这些方法和工具的总结：一、基础工具和命令top和htop：top命令可以实时监控系统资源使用情况，包括内存使用情况。通过运行top命令并按下M键，可以按照内存使用量排序，查看占用内存较多的进程。htop是top的增强版，提供了更友好的界面和更多功能。free命令：显示系统的内存使用情况，包括物理内存、交换空间等。ps
  • MongoDB的聚合&MongoDB的索引 小强同志 MongoDbmongodbnosql数据库
    一、mongoDB的聚合操作知识点：pipeline聚合mapRedurce聚合pipeline与mapRedurce比较pipeline速度快，但只能运行在单机上，适合数据量小的实时聚合操作。mapRedurce可以运行在分布式节点，适适大数量并且复杂的聚合分析操作pipeline聚合pipeline聚合其特性是运行速度快，只能运行在单机上，并且对资源的使用有一定限制如下：单个的聚合操作耗费的内
  • golang 编程规范 - Effective Go 中文 苹果醋3 面试题汇总与解析nginx运维javaspringbootmysql
    原文：https://makeoptim.com/golang/effective-go介绍示例格式化（Formatting）缩进行的长度括号注释（Commentary）命名（Names）包名获取器接口命名驼峰命名分号（Semicolons）流程控制（Controlstructures）If声明和分配ForSwitch类型选择函数（Functions）多返回值命名结果参数Defer数据（Data）
  • docker起的geoserver怎么访问docker启动的postgis数据库 niuge No.1 docker数据库eureka
    背景：本地docker启动geoserver、pg数据库，pg数据库安装postgis拓展。第一步：查询docker启动的容器dockerps-a第二步：查询应用的ip如我的docker容器名称是第一步查询的postgres，那么查询的命令是：dockerinspect-f"{{range.NetworkSettings.Networks}}{{.IPAddress}}{{end}}"postgr
  • arcgis js 怎么加载geoserver发布的wms服务 niuge No.1 1024程序员节
    arcgisjsapi加载wms服务，官方的参考样例：WMSLayer|SampleCode|ArcGISMapsSDKforJavaScript4.30|EsriDeveloper按照官方样例加载比较奇怪，我们平常习惯用url或者json的方式加载，稍微改一下就行，如下：constlayer=newWMSLayer({url:"http://127.0.0.1:8080/geoserver/ne
  • [读书日志]8051软核处理器设计实战（基于FPGA）第六篇：8051软核处理器指令支持添加（verilog） JoneMaster JM读书日志系列fpga开发
    5.4为主体程序添加指令接下来我们来为主体程序添加指令。在开始之前，我们有必要先把目前的代码展示出来：//`defineTYPE8052moduler8051(inputwireclk,inputwirerst,inputwirecpu_en,inputwirecpu_restart,outputregrom_en,outputreg[15:0]rom_addr,inputwire[7:0]rom
  • Spring 3自定义注解与格式化器的深度实践 t0_54manong springpython数据库个人开发
    在Spring框架中，格式化器（Formatter）和注解（Annotation）是处理数据格式化和验证的强大工具。通过将注解与格式化器绑定，我们可以在字段级别灵活地定义数据的格式化规则。本文将通过一个完整的示例，展示如何创建自定义注解、格式化器，并将它们绑定到Spring的AnnotationFormatterFactory中，实现字段级别的数据格式化。一、背景与需求在开发Web应用时，我们经常
  • [读书日志]从零开始学习Chisel 第一篇：书籍介绍，Scala与Chisel概述，Scala安装运行（敏捷硬件开发语言Chisel与数字系统设计） JoneMaster 从零开始学ChiselJM读书日志系列开发语言scala后端fpga开发架构嵌入式硬件
    简介：从20世纪90年代开始，利用硬件描述语言和综合技术设计实现复杂数字系统的方法已经在集成电路设计领域得到普及。随着集成电路集成度的不断提高，传统硬件描述语言和设计方法的开发效率低下的问题越来越明显。近年来逐渐崭露头角的敏捷化设计方法将把集成电路设计带入一个新的阶段。与此同时，集成电路设计也需要一种适应敏捷化设计方法的新型硬件开发语言。本书从实用性和先进性出发，较全面地介绍新型硬件开发语言Chi
  • MongoDB 索引 聚合 许墨の小蝴蝶 mongodb数据库nosql
    createIndex()方法MongoDB使用createIndex()方法来创建索引。>db.collection.createIndex(keys,options)>db.col.createIndex({"title":1})语法中Key值为你要创建的索引字段，1为指定按升序创建索引，如果你想按降序来创建索引指定为-1即可。createIndex()方法中你也可以设置使用多个字段创建索引（
  • Python爬虫项目合集：200个Python爬虫项目带你从入门到精通 人工智能_SYBH 爬虫试读2025年爬虫百篇实战宝典:从入门到精通python爬虫数据分析信息可视化爬虫项目大全Python爬虫项目合集爬虫从入门到精通项目
    适合人群无论你是刚接触编程的初学者，还是已经掌握一定Python基础并希望深入了解网络数据采集的开发者，这个专栏都将为你提供系统化的学习路径。通过循序渐进的理论讲解、代码实例和实践项目，你将获得扎实的爬虫开发技能，适应不同场景下的数据采集需求。专栏特色从基础到高级，内容体系全面专栏内容从爬虫的基础知识与工作原理开始讲解，逐渐覆盖静态网页、动态网页、API数据爬取等实用技术。后续还将深入解析反爬机制
  • Trae：新一代 AI 智能 IDE，颠覆你的开发体验 that's boy 人工智能idechatgptopenaiAI编程AI写作Claude
    想体验各种AI模型的强大功能吗？chatTools平台汇集了o1、GPT4o、Claude和Gemini等多种AI选择，无论您有何种AI需求，都能在这里找到合适的解决方案。现在就来chatTools，开启您的AI之旅吧！作为一名开发者，你是否厌倦了繁琐的重复劳动？是否渴望一个能够真正理解你意图的编程助手？如果你的答案是肯定的，那么你一定要了解一下Trae——一款带有AI功能的智能IDE，它将彻底改
  • MongoDB详细讲解 + springboot集成 you0719 简单学点java数据库java
    MongoDB以JSON为数据模型的文档非关系型数据库垂直扩展在一个机器上进行性能扩展水平扩展多个机器的扩展定位特点定位为应用数据库,存储数据特点:量大/非敏感/一定的查询性能MongoDB的语法是JavaScript语法添加db.集合名.insert(js对象)编辑db.集合名.updateMany({key:value}{$set:{key:value}})删除db.集合名.deleteMan
  • 每个程序员都该学习的5种开发语言 阿玥的小东东 学习开发语言
    我曾在某处读到过（可能在《代码大全》，但我不敢确定），程序员应该每年学习一门新的编程语言。但如果做不到，我建议，你至少学习以下5种开发语言，以便你在职业生涯有很好的表现。每个公司都喜爱精通多种编程语言并且多才多艺的程序员。一个既能很麻利地写脚本，也能编写复杂的Java程序的程序员，确实相当有价值。所以实际上，对于高级开发者来说，学习不止一种编程语言，几乎就是必然的要求。目前而言，面试官越来越看重那
  • face-kkk 山山而川_R face深度学习
    目录一、配置环境1、新建虚拟环境2、配置环境安装包3、下载安装使用环境二、注册新人1、采集照片2、注册新人3、测试视频或摄像头三、配置文件config1、项目配置文件configs/configs.py，用于设置人脸检测模型，特征提取模型二、下面是自己测试用（个人的一个记录，不具备参考意义）MTCNN人脸检测参考项目：GitHub-Sierkinhane/mtcnn-pytorch:Afacede
  • 安装线程自由（无GIL锁）Python及Pytorch方法 为什么每天的风都这么大 pythonpytorch开发语言
    参考资料：https://py-free-threading.github.io/installing_cpython/https://github.com/pytorch/pytorch/issues/130249https://download.pytorch.org/whl/torch/截至当前（2025.1.22），最新的线程自由Python版本为13.1，因此下面的方法适用于该版本安装P
  • uniapp APP端页面触发调用uniapp开发的webview里的方法 printf_824 uniapp分享uni-app
    原理：使用getCurrentInstance()获取当前组件的Vue实例，通过instance.proxy.$scope.$getAppWebview()获取Uniapp的原生WebView对象。使用WebView提供的evalJS方法，执行嵌入H5页面内的JavaScript代码functiongetData(){url.value="http://192.168.0.22:5174/#/pa
  • 如何使用python技术爬取下载百度文库文档？ 大懒猫软件 python百度开发语言
    使用Python爬取百度文库文档需要通过分析网页结构和接口请求来实现。以下是一个基于搜索结果的实现方法，适用于爬取百度文库中的文档内容：第一部分：获取百度文库文档实现步骤获取文档ID和基本信息通过文档的URL获取文档ID，并解析页面内容以获取文档的类型、标题等信息。请求文档信息接口使用getdocinfo接口获取文档的页数、MD5校验码等参数。请求文档正文内容根据文档类型（如txt、doc等），请
  • 如何写出优秀的提示词？ChatGPT官方的六种方法 大懒猫软件 chatgpt命令模式promptai
    使用ChatGPT时，提示词（Prompt）的质量直接影响到生成结果的好坏。ChatGPT官方文档中提供了六种优化提示词的方法，这些方法能够帮助用户更好地利用ChatGPT，提升其生成内容的准确性和实用性。本文将结合中文习惯和新的示例，对这些方法进行详细解读。第一章：指令要清晰清晰的指令是高效使用ChatGPT的基础。明确表达需求，避免让模型猜测，是获得精准回答的关键。1.1问题里包含更多细节在提
  • 使用Google Vertex AI Search进行企业级高级搜索 hgSdaegva 人工智能python
    技术背景介绍GoogleVertexAISearch（前称为EnterpriseSearchonGenerativeAIAppBuilder）是GoogleCloud提供的VertexAI机器学习平台的一部分。VertexAISearch允许组织快速建立由生成式AI驱动的搜索引擎，为客户和员工提供服务。它基于各种GoogleSearch技术，包括语义搜索，通过使用自然语言处理和机器学习技术来推断内
  • 计算机组成原理(计算机系统3)--实验八：处理器结构拓展实验 起床悠悠 计算机系统java数据库前端嵌入式硬件
    一、实验目标：了解MIPS的五级流水线，和在运行过程中的所产生的各种不同的流水线冒险；通过指令顺序调整，或旁路与预测技术来提高流水线效率；更加了解流水线细节和其指令的改善方法；更加深入了解动态分支预测和BTB更加熟悉MIPS指令的使用。二、实验内容处理器结构实验一的扩展：用perf记录x86中的数据相关于指令序列调整前后的事件统计（stall、CPUcycles等）处理器结构实验二的扩展：在x86
  • 遍历dom 并且存储（将每一层的DOM元素存在数组中） 换个号韩国红果果 JavaScripthtml
    数组从0开始！！ var a=[],i=0; for(var j=0;j<30;j++){ a[j]=[];//数组里套数组，且第i层存储在第a[i]中 } function walkDOM(n){ do{ if(n.nodeType!==3)//筛选去除#text类型 a[i].push(n); //con
  • Android+Jquery Mobile学习系列(9)-总结和代码分享 白糖_ JQuery Mobile
    目录导航   经过一个多月的边学习边练手，学会了Android基于Web开发的毛皮，其实开发过程中用Android原生API不是很多，更多的是HTML/Javascript/Css。   个人觉得基于WebView的Jquery Mobile开发有以下优点： 1、对于刚从Java Web转型过来的同学非常适合，只要懂得HTML开发就可以上手做事。 2、jquerym
  • impala参考资料 dayutianfei impala
    记录一些有用的Impala资料   1. 入门资料 >>官网翻译：     http://my.oschina.net/weiqingbin/blog?catalog=423691   2. 实用进阶 >>代码&架构分析：     Impala/Hive现状分析与前景展望：http
  • JAVA 静态变量与非静态变量初始化顺序之新解 周凡杨 java静态非静态顺序
    今天和同事争论一问题，关于静态变量与非静态变量的初始化顺序，谁先谁后，最终想整理出来！测试代码： import java.util.Map; public class T { public static T t = new T(); private Map map = new HashMap(); public T(){ System.out.println(&quo
  • 跳出iframe返回外层页面 g21121 iframe
    在web开发过程中难免要用到iframe，但当连接超时或跳转到公共页面时就会出现超时页面显示在iframe中，这时我们就需要跳出这个iframe到达一个公共页面去。 首先跳转到一个中间页，这个页面用于判断是否在iframe中，在页面加载的过程中调用如下代码： <script type="text/javascript"> //<!-- function
  • JAVA多线程监听JMS、MQ队列 510888780 java多线程
    背景：消息队列中有非常多的消息需要处理，并且监听器onMessage（）方法中的业务逻辑也相对比较复杂，为了加快队列消息的读取、处理速度。可以通过加快读取速度和加快处理速度来考虑。因此从这两个方面都使用多线程来处理。对于消息处理的业务处理逻辑用线程池来做。对于加快消息监听读取速度可以使用1.使用多个监听器监听一个队列；2.使用一个监听器开启多线程监听。 对于上面提到的方法2使用一个监听器开启多线
  • 第一个SpringMvc例子 布衣凌宇 spring mvc
    第一步：导入需要的包； 第二步：配置web.xml文件 <?xml version="1.0" encoding="UTF-8"?> <web-app version="2.5" xmlns="http://java.sun.com/xml/ns/javaee" xmlns:xsi=
  • 我的spring学习笔记15-容器扩展点之PropertyOverrideConfigurer aijuans Spring3
    PropertyOverrideConfigurer类似于PropertyPlaceholderConfigurer，但是与后者相比，前者对于bean属性可以有缺省值或者根本没有值。也就是说如果properties文件中没有某个bean属性的内容，那么将使用上下文（配置的xml文件）中相应定义的值。如果properties文件中有bean属性的内容，那么就用properties文件中的值来代替上下
  • 通过XSD验证XML antlove xmlschemaxsdvalidationSchemaFactory
    1. XmlValidation.java package xml.validation; import java.io.InputStream; import javax.xml.XMLConstants; import javax.xml.transform.stream.StreamSource; import javax.xml.validation.Schem
  • 文本流与字符集 百合不是茶 PrintWrite()的使用字符集名字 别名获取
    文本数据的输入输出;           输入;数据流,缓冲流         输出;介绍向文本打印格式化的输出PrintWrite();   package 文本流; import java.io.FileNotFound
  • ibatis模糊查询sqlmap-mapping-**.xml配置 bijian1013 ibatis
            正常我们写ibatis的sqlmap-mapping-*.xml文件时，传入的参数都用##标识，如下所示： <resultMap id="personInfo" class="com.bijian.study.dto.PersonDTO"> <res
  • java jvm常用命令工具——jdb命令(The Java Debugger) bijian1013 javajvmjdb
            用来对core文件和正在运行的Java进程进行实时地调试，里面包含了丰富的命令帮助您进行调试，它的功能和Sun studio里面所带的dbx非常相似，但 jdb是专门用来针对Java应用程序的。         现在应该说日常的开发中很少用到JDB了，因为现在的IDE已经帮我们封装好了，如使用ECLI
  • 【Spring框架二】Spring常用注解之Component、Repository、Service和Controller注解 bit1129 controller
    在Spring常用注解第一步部分【Spring框架一】Spring常用注解之Autowired和Resource注解（http://bit1129.iteye.com/blog/2114084）中介绍了Autowired和Resource两个注解的功能，它们用于将依赖根据名称或者类型进行自动的注入，这简化了在XML中，依赖注入部分的XML的编写，但是UserDao和UserService两个bea
  • cxf wsdl2java生成代码super出错,构造函数不匹配 bitray super
        由于过去对于soap协议的cxf接触的不是很多,所以遇到了也是迷糊了一会.后来经过查找资料才得以解决. 初始原因一般是由于jaxws2.2规范和jdk6及以上不兼容导致的.所以要强制降为jaxws2.1进行编译生成.我们需要少量的修改: 我们原来的代码 wsdl2java com.test.xxx -client http://..... 修改后的代
  • 动态页面正文部分中文乱码排障一例 ronin47
    公司网站一部分动态页面，早先使用apache+resin的架构运行，考虑到高并发访问下的响应性能问题，在前不久逐步开始用nginx替换掉了apache。 不过随后发现了一个问题，随意进入某一有分页的网页，第一页是正常的（因为静态化过了）；点“下一页”，出来的页面两边正常，中间部分的标题、关键字等也正常，唯独每个标题下的正文无法正常显示。 因为有做过系统调整，所以第一反应就是新上
  • java-54- 调整数组顺序使奇数位于偶数前面 bylijinnan java
    import java.util.Arrays; import java.util.Random; import ljn.help.Helper; public class OddBeforeEven { /** * Q 54 调整数组顺序使奇数位于偶数前面 * 输入一个整数数组，调整数组中数字的顺序，使得所有奇数位于数组的前半部分，所有偶数位于数组的后半
  • 从100PV到1亿级PV网站架构演变 cfyme 网站架构
    一个网站就像一个人，存在一个从小到大的过程。养一个网站和养一个人一样，不同时期需要不同的方法，不同的方法下有共同的原则。本文结合我自已14年网站人的经历记录一些架构演变中的体会。 1：积累是必不可少的 架构师不是一天练成的。 1999年，我作了一个个人主页，在学校内的虚拟空间，参加了一次主页大赛，几个DREAMWEAVER的页面，几个TABLE作布局，一个DB连接，几行PHP的代码嵌入在HTM
  • [宇宙时代]宇宙时代的GIS是什么？ comsci Gis
           我们都知道一个事实，在行星内部的时候，因为地理信息的坐标都是相对固定的，所以我们获取一组GIS数据之后，就可以存储到硬盘中，长久使用。。。但是，请注意，这种经验在宇宙时代是不能够被继续使用的          宇宙是一个高维时空
  • 详解create database命令 czmmiao database
    完整命令 CREATE DATABASE mynewdb   USER SYS IDENTIFIED BY sys_password   USER SYSTEM IDENTIFIED BY system_password   LOGFILE GROUP 1 ('/u01/logs/my/redo01a.log','/u02/logs/m
  • 几句不中听却不得不认可的话 datageek
    1、人丑就该多读书。 2、你不快乐是因为：你可以像猪一样懒，却无法像只猪一样懒得心安理得。 3、如果你太在意别人的看法，那么你的生活将变成一件裤衩，别人放什么屁，你都得接着。 4、你的问题主要在于：读书不多而买书太多，读书太少又特爱思考，还他妈话痨。 5、与禽兽搏斗的三种结局：(1)、赢了，比禽兽还禽兽。(2)、输了，禽兽不如。(3)、平了，跟禽兽没两样。结论：选择正确的对手很重要。 6
  • 1 14:00 PHP中的“syntax error, unexpected T_PAAMAYIM_NEKUDOTAYIM”错误 dcj3sjt126com PHP
    原文地址：http://www.kafka0102.com/2010/08/281.html   因为需要，今天晚些在本机使用PHP做些测试，PHP脚本依赖了一堆我也不清楚做什么用的库。结果一跑起来，就报出类似下面的错误：“Parse error: syntax error, unexpected T_PAAMAYIM_NEKUDOTAYIM in /home/kafka/test/
  • xcode6 Auto layout and size classes dcj3sjt126com ios
    官方GUI   https://developer.apple.com/library/ios/documentation/UserExperience/Conceptual/AutolayoutPG/Introduction/Introduction.html   iOS中使用自动布局（一）   http://www.cocoachina.com/ind
  • 通过PreparedStatement批量执行sql语句【sql语句相同，值不同】 梦见x光 sql事务批量执行
    比如说：我有一个List需要添加到数据库中，那么我该如何通过PreparedStatement来操作呢？ public void addCustomerByCommit(Connection conn , List<Customer> customerList) {    String sql = "inseret into customer(id
  • 程序员必知必会----linux常用命令之十【系统相关】 hanqunfeng Linux常用命令
    一.linux快捷键 Ctrl+C : 终止当前命令 Ctrl+S : 暂停屏幕输出 Ctrl+Q : 恢复屏幕输出 Ctrl+U : 删除当前行光标前的所有字符 Ctrl+Z : 挂起当前正在执行的进程 Ctrl+L : 清除终端屏幕，相当于clear   二.终端命令 clear : 清除终端屏幕 reset : 重置视窗，当屏幕编码混乱时使用 time com
  • NGINX IXHONG nginx
    pcre 编译安装 nginx conf/vhost/test.conf   upstream admin { server 127.0.0.1:8080; }   server {                 listen       80; &
  • 设计模式--工厂模式 kerryg 设计模式
    工厂方式模式分为三种：   1、普通工厂模式：建立一个工厂类，对实现了同一个接口的一些类进行实例的创建。   2、多个工厂方法的模式：就是对普通工厂方法模式的改进，在普通工厂方法模式中，如果传递的字符串出错，则不能正确创建对象，而多个工厂方法模式就是提供多个工厂方法，分别创建对象。   3、静态工厂方法模式：就是将上面的多个工厂方法模式里的方法置为静态，
  • Spring InitializingBean/init-method和DisposableBean/destroy-method mx_xiehd javaspringbeanxml
    1.initializingBean/init-method 实现org.springframework.beans.factory.InitializingBean接口允许一个bean在它的所有必须属性被BeanFactory设置后，来执行初始化的工作，InitialzingBean仅仅指定了一个方法。 通常InitializingBean接口的使用是能够被避免的，（不鼓励使用，因为没有必要
  • 解决Centos下vim粘贴内容格式混乱问题 qindongliang1922 centosvim
    有时候，我们在向vim打开的一个xml，或者任意文件中，拷贝粘贴的代码时，格式莫名其毛的就混乱了，然后自己一个个再重新，把格式排列好，非常耗时，而且很不爽，那么有没有办法避免呢？ 答案是肯定的，设置下缩进格式就可以了，非常简单： 在用户的根目录下 直接vi  ~/.vimrc文件 然后将set pastetoggle=<F9> 写入这个文件中，保存退出，重新登录，
  • netty大并发请求问题 tianzhihehe netty
    多线程并发使用同一个channel java.nio.BufferOverflowException: null at java.nio.HeapByteBuffer.put(HeapByteBuffer.java:183) ~[na:1.7.0_60-ea] at java.nio.ByteBuffer.put(ByteBuffer.java:832) ~[na:1.7.0_60-ea]
  • Hadoop NameNode单点问题解决方案之一 AvatarNode wyz2009107220 NameNode
    我们遇到的情况 Hadoop NameNode存在单点问题。这个问题会影响分布式平台24*7运行。先说说我们的情况吧。 我们的团队负责管理一个1200节点的集群(总大小12PB)，目前是运行版本为Hadoop 0.20，transaction logs写入一个共享的NFS filer(注：NetApp NFS Filer)。 经常遇到需要中断服务的问题是给hadoop打补丁。 DataNod
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他