河软小宝
河软小宝

html和 css 轮播图

今日任务

轮播图


<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>轮播图title>
    <style>
        .container {
      
            width: 1226px;
            height: 460px;
            position: relative;
            overflow: hidden;
            margin: 0 auto;
        }

        .img-list {
      
            width: 7356px;
            height: 460px;
            position: absolute;  /* 相对于父级元素移动 */
            left: 0px;
        }
        .img-list img {
      
            width: 1226px;
            height: 460px;
            display: block;
            float: left;
        }

        .img-controls {
      
            width: 100%;
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            overflow: hidden;
        }
        .img-controls #left,#right {
      
            width: 41px;
            height: 69px;
            display: block;
        }
        .img-controls #left {
      
            background-image: url("imgs/icon-slides.png");
            background-repeat: no-repeat;
            background-position: -84px 50%;
            float: left;
        }
        .img-controls #left:hover {
      
            background-image: url("imgs/1.jpg");
            background-repeat: no-repeat;
            background-position: 0px 50%;
        }
        .img-controls #right {
      
            background-image: url("imgs/1.jpg");
            background-repeat: no-repeat;
            background-position: -125px 50%;
            float: right;
        }
        .img-controls #right:hover {
      
            background-image: url("imgs/1.jpg");
            background-repeat: no-repeat;
            background-position: -42px 50%;
        }
        .img-direction {
      
            list-style: none;
            padding: 0;
            margin: 0;
            overflow: hidden;
            position: absolute;
            bottom: 20px;
            left: 20px;
            left: 50%;
            transform: translateX(-50%);
        }
        .img-direction li {
      
            width: 8px;
            height: 8px;
            background-color: rgba(0,0,0,04);
            border: 2px solid #fff;
            border-color: rgba(255, 255, 255, 0.3);
            border-radius: 6px;
            margin: 0 5px;
            float: left;
        }

        .img-direction li:hover {
      
            background-color: #f5f5f5;
            border-color: rgba(0,0,0,0.4);
            cursor: pointer;  /* 设置鼠标样式 */
        }
        .active {
      
            background-color: #f5f5f5 !important;
            border-color: rgba(0,0,0,0.4) !important;
        }
    style>
head>
<body>
    
    <div class="container">
        
        <div class="img-list">
            <img src="imgs/1.jpg">
            <img src="imgs/2.jpg">
            <img src="imgs/3.jpg">
            <img src="imgs/4.jpg">
            <img src="imgs/5.jpg">
        div>
        
        <div class="img-controls">
            <a id="left" href="#">a>
            <a id="right" href="#">a>
        div>
        
        <ul class="img-direction">
            <li class="active">li>
            <li>li>
            <li>li>
            <li>li>
            <li>li>
        ul>
    div>

    <script>
        // 完成轮播图的向右切换按钮的逻辑


        // 1.获取当前轮播图中的图片容器元素
        var imgList = document.getElementsByClassName('img-list')[0];
        // 2.获取图片容器元素当前的有效样式
        var imgListStyle = window.getComputedStyle(imgList);
        // 3.从当前的有效样式获取其left样式属性值
        var imgListLeft = parseInt(imgListStyle.left);
        // 4.根据图片容器元素获取其所有图片元素
        var imgs = imgList.getElementsByTagName('img');
        // 5.获取当前轮播图中所有图片的个数
        var len = imgs.length;
        // 6.获取单张图片的宽度
        var imgWidth = parseInt(window.getComputedStyle(imgs[0]).width);
        // 7.计数器 -> 图片在图片集合中的索引值
        var index = 0;
      

        // 8.获取向右切换的按钮元素
        var right = document.getElementById('right');

        /* 
            记录点击切换按钮的次数
            一共5张图片，点击4次切换按钮后就到最后一张图片了
        */ 

        // 9.为向右切换的按钮绑定click事件
        right.addEventListener('click',function(){
      
            
            // 判断时候切换到了图片集合中的最后一张
            if (index < len-1) {
      
                // 10.记录图片从第一张到第六张切换的索引值
                index++;
                // 11.将当前left样式属性的值减少一张图片的宽度
                imgListLeft -= imgWidth;
                
            } else if (index == len-1) {
      
                index = 0;
                imgListLeft = 0;
                // 点击向右的箭头，当点击到最后一张的时候，再点击向右的箭头，会回到第一张图片
                // imgList.style.left = imgListLeft + 'px';  
            }
            // 12.将计算之后的left样式属性值，重新设置给图片容器元素
            // 点击向右的箭头，当点击到最后一张的时候，再点击向右的箭头，会回到第一张图片
            imgList.style.left = imgListLeft + 'px'; 
            
        });

        var left = document.getElementById('left');
        left.addEventListener('click',function(){
      
            
            // 判断是否切换到了图片集合中的第一张
            if (index > 0){
      
                // 记录图片从第六张到第一张的索引值
                index--;
                // 11.将当前left样式属性的值减少一张图片的宽度
                imgListLeft += imgWidth;
                
            } else if (index == 0) {
      
                index = len - 1;
                imgListLeft = -(len - 1) * imgWidth;
            }
            // 12.将计算之后的left样式属性值，重新设置给图片容器元素
            // 点击向左的箭头，当点击到第一张的时候，再点击向左的箭头，会回到最后一张图片
            imgList.style.left = imgListLeft + 'px';
        });

        // 图片导航器
        var imgDirection = document.getElementsByClassName('img-direction')[0];
        // 根据图片导航器容器元素获取所有的导航器元素
        var dirs = imgDirection.getElementsByTagName('li');
        imgDirection.addEventListener('click',function(event){
      
            var target = event.target;
            if (target.nodeName === 'LI') {
      
                for (var i=0; i<dirs.length; i++) {
      
                    if (dirs[i] === target) {
      
                        index = i;
                    }
                    dirs[i].removeAttribute('class');
                }
                imgListLeft = -(index * imgWidth);
                imgList.style.left = imgListLeft + 'px';

                target.setAttribute('class','active');
            }
        });
    script>
body>
html>

今日金句

比别人多一点志气，你就会多一份出息；比别人多一点坚持；你就会夺取胜利；比不比别人多一份执着。你就会创造奇迹！

今日心情

最使人疲惫的往往不是道路的遥远，而是你心中的郁闷；最使人颓废的往往不是前途的坎坷，而是你自信的丧失；最使人痛苦的往往不是生活的不幸，而是你希望的破灭；最使人绝望的往往不是挫折的打击，而是你心灵的死亡；所以我们凡事要看淡些，心放开一点，一切都会慢慢变好的。

你可能感兴趣的:(前端,javascript,css,css3,html,html5)

  • 从感知到决策：虚拟仿真系统与视觉算法融合下的多路RTSP视频接入技术探究
    1️⃣背景概述随着国防信息化和智能化进程的不断加快，虚拟仿真系统与智能视觉算法平台正逐步成为现代化装备研发、测试验证与战术训练的重要技术支撑。相比传统的静态建模或离线推演，新一代作战仿真与智能系统更强调实时性、感知能力与动态交互，这对前端传感器接入、视频数据处理与系统集成提出了更高的要求。核心应用领域涵盖：装备级虚拟作战环境仿真构建高仿真的虚拟战场环境，接入真实或仿真的传感器数据，提升推演与训练的
  • 前端项目启动 npm 安装 之 常见错误 意外解决了 一直报 esbuild 的问题，使程序正常运行
    写在前面：本文作为本人学习总结之用，同时分享给大家~个人前端博客网站：zhangqiang.hk.cn欢迎加入博主的前端学习qq交流群：：706947563，专注前端开发，共同学习进步！通常要运行一个前端项目操作流程为：npminstall（用于安装库，可以理解为初试化用的）npmstart（启动项目）1、上面这两个为我们理想话的安装，实际上会遇到各种意想不到的bug，比如网络原因，这个时候我们要
  • 我们可能不再需要UI工程师了～ 强化学习曾小健 ui
    我们可能不再需要UI工程师了～原创深度抑郁患者GIS小丸子2025年06月30日08:01中国香港我写这篇文章的时间是6月29日23:51分，刚刚和技术团队结束了本周的例会，例会上研发向我们展示了本周他基于原型直接使用Cursor生成的前端大屏页面，这个过程完全没有前端以及UI工程师的参与，只有一个程序员参考产品原型完成。如下是这张大屏页面对应的Axure原型图，当然还有PC版，但是PC管理后台虽
  • Crash Course：10分钟心理学速成-【第23集】人格测量 ado_l
    链接：https://open.163.com/newview/movie/courseintro?newurl=%2Fspecial%2Fopencourse%2Fcrashcoursepsychology.html重点1、人格特质（Trait）理论根据稳定持久的行为模式和有意识的动机来定义不同类型的人格。奥尔波特：通过“基本特质”的概念来描述人格。特质就是特征行为和有意识的动机，但他并没有对人
  • HTML5+CSS3小实例：流星划过天际的动画效果 艾恩小灰灰
    实例：流星划过天际的动画效果技术栈：HTML+CSS效果：源码：【html】流星划过天际的动画效果【css】*{/*初始化*/margin:0;padding:0;}body{/*100%窗口高度*/height:100vh;/*溢出隐藏*/overflow:hidden;}.container{/*绝对定位*/position:absolute;top:0;left:0;width:100%;h
  • url scheme 实现跳转到小程序页面 stand_forever 小程序
    获取小程序scheme码，适用于短信、邮件、外部网页等拉起小程序的业务场景。通过该接口，可以选择生成到期失效和永久有效的小程序码参考文档:https://developers.weixin.qq.com/miniprogram/dev/api-backend/open-api/url-scheme/urlscheme.generate.html/***获取urlscheme接口*/publicfu
  • web前端进阶之Javascript设计模式面向对象篇 jia林
    前言：在此说明Javascript设计模式所讲内容和知识点来自双越老师（wangEditor富文本开源作者）的视频，内容通俗易懂，受益匪浅，结合自己的学习心得整理成笔记，与大家分享，愿在前端的道路上越走越远.....从“写好代码”到“设计代码”的过程，不仅是技术的提升，更是编程思维的提升，而这其中最关键的就是设计模式，是否理解并掌握设计模式，也是衡量程序员能力的标准之一。学习前提使用过jquery
  • DPDK Sample Applications User Guides(42)Eventdev管道示例应用程序 超帅浩浩 SampleApplicationsUserGuidesDPDKeventdevpipeline
    官方文档查看地址：http://doc.dpdk.org/guides/sample_app_ug/eventdev_pipeline.htmlPDF下载地址：https://www.intel.com/content/www/us/en/embedded/technology/packet-processing/dpdk/dpdk-sample-applications-user-guide.h
  • uni-app跨平台开发知识点总结
    uni-app简介uni-app概述：uni-app是一个使用Vue.js开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、Web（响应式）、以及各种小程序（微信/支付宝/百度/头条/飞书/QQ/快手/钉钉/淘宝）、快应用等多个平台。uni-app由来：是为了解决跨平台开发的问题。在移动应用开发中，不同平台（如iOS、Android）有不同的开发语言和技术栈，这导致开发者
  • ubuntu18.04安装geemap 阿西是有梦想的咸鱼 python编程之路遥感影像处理可视化可视化pythonubuntu
    文章目录安装测试GEE提供了JavaScript和PythonAPI，可以向EarthEngine服务器发出计算请求。与GEEJavaScriptAPI相比，PythonAPI缺乏易于理解的操作文档和交互式可视化结果的功能。由此，geemap诞生并填补了这一空白[1]。这里给大家介绍下我折腾了一晚上才搞定的geemap的安装及测试过程。这里是geemap的GitHub参考链接。安装如Github中
  • FMC 子卡：2 通道 16bit 12G DA 播放 F_white 视频与图像采集处理雷达系统半实物仿真数据中心
    FMC132是一款2通道12GSPS采样率16位DA播放FMC子卡模块，该板卡为FMC+标准，符合VITA57.4规范，可以作为一个理想的IO模块耦合至FPGA前端，8通道的JESD204B接口通FMC+连接器连接至FPGA的高速串行端口GTH。板卡支持板上可编程采样时钟和外部参考时钟，多片板卡还可以通过触发（输入/输出）信号进行输出同步，该板卡2路模拟信号输出通过50Ω特征阻抗的SSMC射频连接
  • java 结合 FreeMarker 和 Docx4j 来生成包含图片的 docx 文件 liangblog Java生产环境全栈开发Java进阶javapython开发语言
    使用FreeMarker生成HTML，然后通过Docx4j将HTML转换为.docx文件;步骤1.添加依赖确保你的项目中包含了FreeMarker和Docx4j的依赖。以下是Maven的pom.xml示例：
  • 前端实现多文件下载功能的思路与代码分享 好运仔dzl 技术开发java开发语言
    73万字的Java面试题库【全网最详细-找工作/实习必备神器】：https://mp.weixin.qq.com/mp/appmsgalbum?__biz=MzE5MTY1NzczOA==&action=getalbum&album_id=4057608455186808839Java面试题库ps：网上面试题多而杂，自己整理了一套面试题，我靠这套面试题2年经验拿15k~前端实现多文件下载功能的思路
  • 如何在 Stimulsoft JavaScript 报表组件中，设置设计器与查看器主题风格 CodeCraft Studio 控件报表图表开发javascript开发语言ecmascriptStimulsoftDashboardReport报表仪表盘工具
    在现代软件开发中，图形用户界面（GUI）不仅仅是功能的承载体，更是用户体验的关键组成部分。一个美观、统一且具备高度可定制性的界面，能够显著提升系统的专业感和使用效率。Stimulsoft作为功能强大的报表和仪表板解决方案提供商，其JavaScript版本（StimulsoftReports.JS与StimulsoftDashboards.JS）为开发者提供了丰富的内置主题支持，助力快速构建符合品牌
  • Blazor使用TXTextControl控件编辑报告 落叶飞花_ javascript开发语言
    文章目录1环境2课程链接3学习使用（加载TextControl控件）3.1DocumentEditor3.2DocumentViewer4javascriptApi列表5加载文档（TextControl加载文档，JS互操作）6开启修改跟踪（word中的修订）7文档修改保存8文档编辑，拖拽展示图片9文档编辑，使用ApplicationField10模板设计11插入图片11.1拖拽插入图片11.2Me
  • 基于selenium的pyse自动化测试框架 鱼鱼说测试 selenium测试工具
    Python接口自动化测试零基础入门到精通（2025最新版）介绍：pyse基于selenium（webdriver）进行了简单的二次封装，比selenium所提供的方法操作更简洁。特点：默认使用CSS定位，同时支持多种定位方法（id\name\class\link_text\xpath\css）。本框架只是对selenium（webdriver）原生方法进行了简单的封装，精简为大约30个方法，这些
  • 彻底拆解 Vue scoped 指令：从编译原理到工程实践的全链路解析 是罐装可乐 vue.js前端javascript
    引言我们在开发Vue项目时，经常会给标签加上scoped特性来实现组件的样式隔离。但它究竟是如何做到这一点的呢？作为开发者，我们不仅要会用这个特性，更要深入了解其底层原理。只有这样，在实际开发中才能避开各种潜在的陷阱，提升解决问题的效率。接下来，我们就来彻底剖析一下Vue的scoped指令，看看它到底是如何实现样式隔离的。css编译当标签带有scoped属性时，其CSS样式仅作用于当前组件内的元素
  • 重塑未来：AI如何重新定义全栈开发 熊猫钓鱼>_> 人工智能
    在传统认知中，全栈开发者被誉为技术界的“全能选手”。——他们需要精通前端界面构建（HTML/CSS/JavaScript）、后端业务逻辑实现（Python/Java/Node.js）、数据库设计优化（MySQL/MongoDB）以及服务器部署运维（Linux/Docker）。这种“一人包打天下”的能力模型长期被视为高效开发的黄金标准，尤其受到创业公司和小型团队的青睐，因为它能大幅减少沟通成本，加速
  • Javascript 严格模式use strict详解 滴水成川 JavaScript学习记录javascriptusestrict
    一、概述除了正常运行模式，ECMAscript5添加了第二种运行模式："严格模式"（strictmode）。顾名思义，这种模式使得Javascript在更严格的条件下运行。设立"严格模式"的目的，主要有以下几个：-消除Javascript语法的一些不合理、不严谨之处，减少一些怪异行为;-消除代码运行的一些不安全之处，保证代码运行的安全；-提高编译器效率，增加运行速度；-为未来新版本的Javascr
  • Vue3 业务落地全景：脚手架、权限、国际化、微前端、跨端与低代码 50 条实战心法 代码老y 前端低代码
    写给架构师、TL、全栈工程师的“踩坑地图”（零）阅读指南•不贴源码，用伪代码+流程图+决策树。•50条心法分6大篇章，可跳跃阅读。（一）脚手架与工程化8条心法1：用create-vue而不是vue-cli开启新项目，Vite冷启动300msvsWebpack30s。心法2：eslint-config-prettier+@vue/eslint-config-typescript一键集成，团队争议减少
  • os.path.join坑的记录 半步江南
    importrequestsimportosfromos.pathimportjointar=r"\219\1.html"root=os.getcwd()print(root)file_path=join(str(root),str(tar))print(file_path)输出为D:\workdir\py-dir\crapt_web_siteD:\219\1.html与需要的D:\workdir
  • WEB前端登陆页面（复习） En¥ 前端javascript开发语言
    1.登陆界面显示2.代码​登录界面/*重置所有元素的默认样式，让所有浏览器都从同一起点开始*/*{margin:0;padding:0;box-sizing:border-box;/*让元素的宽度和高度包含内边距和边框*/font-family:'SegoeUI',Tahoma,Geneva,Verdana,sans-serif;/*设置默认字体*/}body{/*使用flex布局让登录框在页面中
  • XSS Payload 学习浏览器解码 菜鸟一个昂 servlet
    目录问题一：问题二：问题三：问题四：问题五：问题六：问题七：问题八：问题九：问题十：问题十一：问题十二：问题十三：问题十四：问题十五：问题一：无法弹窗原因：urlcode无法识别协议（javascript:）html解码顺序：1、html实体编码2、urlcode编码3,unicode编码问题二：可以弹窗首先先HTML实体编码解码，得到href中为URL，URL模块可识别为javascript协议
  • 浏览器解码过程分析
    浏览器解码过程分析前言在学习xss漏洞的过程中我发现一个问题，当我想绕过过滤机制时，可以采用编码的方式进行绕过这种方法，但是并不是每一种编码格式都能绕过，需要不停的尝试才行，这样过于浪费时间。后来我发现浏览器与服务器数据传输过程中有好几种编码格式，不同的编码格式有着不同的解析引擎，作为一个浏览器，在解析一篇HTML文档时主要有三个处理过程：HTML解析，URL解析和JavaScript解析。每个解
  • php中的hmac,JavaScript通过CryptoJS等效实现php中hash_hmac函数加密raw_output配置 好想不取名 php中的hmac
    在一个项目中，客户需要从前端签名，加密插件使用的cryptoJS，使用与后端一样的签名流程(HmacSHA1后Base64.encode)发现并不能通过签名认证，签名校验方后端php代码中使用hash_hmac函数，先来看一下则会个函数的官网说明：说明hash_hmac(string$algo,string$data,string$key[,bool$raw_output=FALSE]):stri
  • 【Web APIs】JavaScript 节点操作 ③ ( 子节点操作 | firstChild 属性 | firstElementChild 属性 | children[0] 属性 ) 韩曙亮 JavaScript前端javascript开发语言WebAPIs节点操作子节点操作js
    文章目录一、JavaScript子节点操作1、获取子节点需求2、firstChild和lastChild属性(不推荐-基于所有类型节点)3、firstElementChild和lastElementChild属性(不推荐-兼容性问题)4、children[0]和children[element.children.length-1]属性(推荐-实际用法)5、完整代码示例在【WebAPIs】JavaS
  • Xss漏洞总结
    一、XSS漏洞简介XSS（Cross-SiteScripting，跨站脚本攻击）是一种常见的Web前端安全漏洞，其主要危害对象是网站的访问用户。攻击者通过在网页中注入恶意脚本代码（如JavaScript、Flash等），诱使用户访问后在其浏览器中执行这些代码，从而达到窃取数据、控制会话等攻击目的。二、XSS漏洞原理XSS的根本原因在于服务器未对用户提交的输入内容进行严格过滤和转义处理，导致用户提供
  • 从XSS Payload学习浏览器解码 caker丶 XSS-labsXSSxss学习javascript
    从XSSPayload学习浏览器解码HTML解析URL解析JavaScript解析案例解析总结作为一个浏览器在解析一篇HTML文档时主要有三个处理过程，每个解析器负责解码和解析HTML文档中它所对应的部分，下面我将按照解码顺序依次讲解。HTMl解析URL解析JavaScript解析HTML解析一个HTML解析器作为一个状态机，它从输入流中获取字符并按照转换规则转换到另一种状态。在解析过程中，任何时
  • 原型链污染 江湖没什么好的 xss
    原型链污染（PrototypePollution）是一种针对JavaScript应用的安全漏洞，攻击者通过操纵对象的原型链，向基础对象（如Object.prototype）注入恶意属性，从而影响整个应用程序的行为。以下是详细解析：核心原理JavaScript原型链机制：每个对象都有隐式原型__proto__（或通过Object.getPrototypeOf()访问），指向其构造函数的原型对象。访问
  • @DateTimeFormat、@JsonFormat、@JSONField区别及用法 开往1982 java前端时间datetime
    推荐写法：@JSONField(format="yyyy-MM-ddHH:mm:ss")@JsonFormat(timezone="GMT+8",pattern="yyyy-MM-ddHH:mm:ss")@DateTimeFormat(pattern="yyyy-MM-ddHH:mm:ss")privateLocalDatebirthday;前端读取数据库日期字段时使用@JsonFormat和@J
  • SQL的各种连接查询 xieke90 UNION ALLUNION外连接内连接JOIN
    一、内连接   概念：内连接就是使用比较运算符根据每个表共有的列的值匹配两个表中的行。                 内连接（join 或者inner join ）       SQL语法：       select * fron
  • java编程思想--复用类 百合不是茶 java继承代理组合final类
          复用类看着标题都不知道是什么,再加上java编程思想翻译的比价难懂,所以知道现在才看这本软件界的奇书   一:组合语法:就是将对象的引用放到新类中即可     代码:     package com.wj.reuse; /** * * @author Administrator 组
  • [开源与生态系统]国产CPU的生态系统 comsci cpu
          计算机要从娃娃抓起...而孩子最喜欢玩游戏....       要让国产CPU在国内市场形成自己的生态系统和产业链,国家和企业就不能够忘记游戏这个非常关键的环节....       投入一些资金和资源,人力和政策,让游
  • JVM内存区域划分Eden Space、Survivor Space、Tenured Gen，Perm Gen解释 商人shang jvm内存
    jvm区域总体分两类，heap区和非heap区。heap区又分：Eden Space（伊甸园）、Survivor Space(幸存者区)、Tenured Gen（老年代-养老区）。 非heap区又分：Code Cache(代码缓存区)、Perm Gen（永久代）、Jvm Stack(java虚拟机栈)、Local Method Statck(本地方法栈)。 HotSpot虚拟机GC算法采用分代收
  • 页面上调用 QQ oloz qq
    <A href="tencent://message/?uin=707321921&amp;Site=有事Q我&amp;Menu=yes">   <img style="border:0px;" src=http://wpa.qq.com/pa?p=1:707321921:1></a>
  • 一些问题 文强chu 问题
    1.eclipse 导出 doc  出现“The Javadoc command does not exist.” javadoc command 选择 jdk/bin/javadoc.exe 2.tomcate 配置 web 项目 ..... SQL:3.mysql  * 必须得放前面 否则  select&nbs
  • 生活没有安全感 小桔子 生活孤独安全感
           圈子好小，身边朋友没几个，交心的更是少之又少。在深圳，除了男朋友，没几个亲密的人。不知不觉男朋友成了唯一的依靠，毫不夸张的说，业余生活的全部。现在感情好，也很幸福的。但是说不准难免人心会变嘛，不发生什么大家都乐融融，发生什么很难处理。我想说如果不幸被分手(无论原因如何)，生活难免变化很大，在深圳，我没交心的朋友。明
  • php 基础语法 aichenglong php 基本语法
    1 .1 php变量必须以$开头 <?php $a=” b”; echo ?> 1 .2 php基本数据库类型 Integer  float/double Boolean string 1 .3 复合数据类型 数组array和对象 object 1 .4 特殊数据类型  null 资源类型(resource)    $co
  • mybatis tools 配置详解 AILIKES mybatis
    MyBatis Generator中文文档 MyBatis Generator中文文档地址： http://generator.sturgeon.mopaas.com/ 该中文文档由于尽可能和原文内容一致，所以有些地方如果不熟悉，看中文版的文档的也会有一定的障碍，所以本章根据该中文文档以及实际应用，使用通俗的语言来讲解详细的配置。 本文使用Markdown进行编辑，但是博客显示效
  • 继承与多态的探讨 百合不是茶 JAVA面向对象 继承 对象
    继承 extends   多态 继承是面向对象最经常使用的特征之一：继承语法是通过继承发、基类的域和方法 //继承就是从现有的类中生成一个新的类，这个新类拥有现有类的所有extends是使用继承的关键字：     在A类中定义属性和方法； class A{ //定义属性 int age； //定义方法 public void go
  • JS的undefined与null的实例 bijian1013 JavaScriptJavaScript
    <form name="theform" id="theform"> </form> <script language="javascript"> var a alert(typeof(b)); //这里提示undefined if(theform.datas
  • TDD实践（一） bijian1013 java敏捷TDD
    一.TDD概述         TDD：测试驱动开发，它的基本思想就是在开发功能代码之前，先编写测试代码。也就是说在明确要开发某个功能后，首先思考如何对这个功能进行测试，并完成测试代码的编写，然后编写相关的代码满足这些测试用例。然后循环进行添加其他功能，直到完全部功能的开发。     
  • [Maven学习笔记十]Maven Profile与资源文件过滤器 bit1129 maven
    什么是Maven Profile Maven Profile的含义是针对编译打包环境和编译打包目的配置定制，可以在不同的环境上选择相应的配置，例如DB信息，可以根据是为开发环境编译打包，还是为生产环境编译打包，动态的选择正确的DB配置信息   Profile的激活机制 1.Profile可以手工激活，比如在Intellij Idea的Maven Project视图中可以选择一个P
  • 【Hive八】Hive用户自定义生成表函数(UDTF) bit1129 hive
    1. 什么是UDTF   UDTF，是User Defined Table-Generating Functions，一眼看上去，貌似是用户自定义生成表函数，这个生成表不应该理解为生成了一个HQL Table， 貌似更应该理解为生成了类似关系表的二维行数据集   2. 如何实现UDTF 继承org.apache.hadoop.hive.ql.udf.generic
  • tfs restful api 加auth 2.0认计 ronin47
    　　目前思考如何给tfs的ngx-tfs api增加安全性。有如下两点： 　　一是基于客户端的ip设置。这个比较容易实现。 　　二是基于OAuth2.0认证，这个需要lua，实现起来相对于一来说，有些难度。 　　现在重点介绍第二种方法实现思路。 　　 前言：我们使用Nginx的Lua中间件建立了OAuth2认证和授权层。如果你也有此打算，阅读下面的文档，实现自动化并获得收益。SeatGe
  • jdk环境变量配置 byalias javajdk
    进行java开发，首先要安装jdk，安装了jdk后还要进行环境变量配置： 1、下载jdk（http://java.sun.com/javase/downloads/index.jsp），我下载的版本是：jdk-7u79-windows-x64.exe 2、安装jdk-7u79-windows-x64.exe 3、配置环境变量：右击"计算机"-->&quo
  • 《代码大全》表驱动法-Table Driven Approach-2 bylijinnan java
    package com.ljn.base; import java.io.BufferedReader; import java.io.FileInputStream; import java.io.InputStreamReader; import java.util.ArrayList; import java.util.Collections; import java.uti
  • SQL 数值四舍五入 小数点后保留2位 chicony 四舍五入
    1.round() 函数是四舍五入用，第一个参数是我们要被操作的数据，第二个参数是设置我们四舍五入之后小数点后显示几位。 2.numeric 函数的2个参数，第一个表示数据长度，第二个参数表示小数点后位数。 例如： 　　select   cast(round(12.5,2)   as   numeric(5,2))  
  • c++运算符重载 CrazyMizzz C++
    一、加+，减-，乘*，除/ 的运算符重载 Rational operator*(const Rational &x) const{ return Rational(x.a * this->a); } 在这里只写乘法的，加减除的写法类似 二、<<输出,>>输入的运算符重载      &nb
  • hive DDL语法汇总 daizj hive修改列DDL修改表
    hive DDL语法汇总 １、对表重命名 hive> ALTER TABLE table_name RENAME TO new_table_name;   2、修改表备注 hive> ALTER TABLE table_name SET TBLPROPERTIES ('comment' = new_comm
  • jbox使用说明 dcj3sjt126com Web
    参考网址：http://www.kudystudio.com/jbox/jbox-demo.html jBox v2.3 beta [ 点击下载]  技术交流QQGroup：172543951 100521167 [2011-11-11] jBox v2.3 正式版 - [调整&修复] IE6下有iframe或页面有active、applet控件
  • UISegmentedControl 开发笔记 dcj3sjt126com
      //    typedef NS_ENUM(NSInteger, UISegmentedControlStyle) {     //        UISegmentedControlStylePlain,     // large plain   &
  • Slick生成表映射文件 ekian scala
    Scala添加SLICK进行数据库操作，需在sbt文件上添加slick-codegen包 "com.typesafe.slick" %% "slick-codegen" % slickVersion 因为我是连接SQL Server数据库，还需添加slick-extensions，jtds包 "com.typesa
  • ES-TEST gengzg test
    package com.MarkNum; import java.io.IOException; import java.util.Date; import java.util.HashMap; import java.util.Map; import javax.servlet.ServletException; import javax.servlet.annotation
  • 为何外键不再推荐使用 hugh.wang mysqlDB
    表的关联，是一种逻辑关系，并不需要进行物理上的“硬关联”，而且你所期望的关联，其实只是其数据上存在一定的联系而已，而这种联系实际上是在设计之初就定义好的固有逻辑。 在业务代码中实现的时候，只要按照设计之初的这种固有关联逻辑来处理数据即可，并不需要在数据库层面进行“硬关联”，因为在数据库层面通过使用外键的方式进行“硬关联”，会带来很多额外的资源消耗来进行一致性和完整性校验，即使很多时候我们并不
  • 领域驱动设计 julyflame VODAO设计模式DTOpo
    概念： VO（View Object）：视图对象，用于展示层，它的作用是把某个指定页面（或组件）的所有数据封装起来。 DTO（Data Transfer Object）：数据传输对象，这个概念来源于J2EE的设计模式，原来的目的是为了EJB的分布式应用提供粗粒度的数据实体，以减少分布式调用的次数，从而提高分布式调用的性能和降低网络负载，但在这里，我泛指用于展示层与服务层之间的数据传输对
  • 单例设计模式 hm4123660 javaSingleton单例设计模式懒汉式饿汉式
           单例模式是一种常用的软件设计模式。在它的核心结构中只包含一个被称为单例类的特殊类。通过单例模式可以保证系统中一个类只有一个实例而且该实例易于外界访问，从而方便对实例个数的控制并节约系统源。如果希望在系统中某个类的对象只能存在一个，单例模式是最好的解决方案。      &nb
  • logback zhb8015 loglogback
    一、logback的介绍      Logback是由log4j创始人设计的又一个开源日志组件。logback当前分成三个模块：logback-core,logback- classic和logback-access。logback-core是其它两个模块的基础模块。logback-classic是log4j的一个 改良版本。此外logback-class
  • 整合Kafka到Spark Streaming——代码示例和挑战 Stark_Summer sparkstormzookeeperPARALLELISMprocessing
    作者Michael G. Noll是瑞士的一位工程师和研究员，效力于Verisign，是Verisign实验室的大规模数据分析基础设施（基础Hadoop）的技术主管。本文，Michael详细的演示了如何将Kafka整合到Spark Streaming中。 期间， Michael还提到了将Kafka整合到 Spark Streaming中的一些现状，非常值得阅读，虽然有一些信息在Spark 1.2版
  • spring-master-slave-commondao 王新春 DAOspringdataSourceslavemaster
    互联网的web项目，都有个特点：请求的并发量高，其中请求最耗时的db操作，又是系统优化的重中之重。 为此，往往搭建 db的 一主多从库的 数据库架构。作为web的DAO层，要保证针对主库进行写操作，对多个从库进行读操作。当然在一些请求中，为了避免主从复制的延迟导致的数据不一致性，部分的读操作也要到主库上。（这种需求一般通过业务垂直分开，比如下单业务的代码所部署的机器，读去应该也要从主库读取数
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他