河软小宝
河软小宝

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)

  • webpack5（Module Federation）+vue3.0实现微前端 weixin_42140041 前端奇淫技巧前端javascriptvue.js
    项目源码地址：https://github.com/wuxiaohuaer/webpack5-vue-admin一、什么是微前端微前端是一个比较宏观的概念，他的核心就是独立，开发独立、部署独立，比较适合大的团队来进行重量级项目开发。从MicroFrontends官网可以了解到，微前端概念是从微服务概念扩展而来的，摒弃大型单体方式，将前端整体分解为小而简单的块，这些块可以独立开发、测试和部署，同时仍
  • 物联网设备数据流转之搭建环境：开源高性能分布式支持SQL的时序数据库TDengine Heartsuit 时序数据库物联网分布式TDengine涛思数据
    背景我们的项目涉及物联网相关业务，由于一开始的年少无知，传感器数据采用了MySQL进行存储，经过近两年的数据累积，目前几个核心表，单表数据已过亿，虽然通过索引优化、SQL优化以及读写分离等措施，勉强满足基本的查询，能在秒级给出数据；但是一方面当前MySQL数据表索引的大小甚至超过了数据大小，这样下去肯定不行；另一方面来自于前端感知设备的数据量还在持续增加，当面对用户多维度的统计需求，在实现上、效率
  • JavaScript 表单 宇哥资料 JavaScriptjavascript开发语言ecmascript
    JavaScript表单验证HTML表单验证可以通过JavaScript来完成。以下实例代码用于判断表单字段(fname)值是否存在，如果不存在，就弹出信息，阻止表单提交：JavaScript实例functionvalidateForm(){varx=document.forms["myForm"]["fname"].value;if(x==null||x==""){alert("需要输入名字。"
  • 【前端拓展】Canvas性能革命！WebGPU + WebAssembly混合渲染方案深度解析 爱上大树的小猪 前端js
    为什么需要混合方案？真实场景痛点分析：传统WebGL在高频数据更新时存在CPU-GPU通信瓶颈JavaScript的垃圾回收机制导致渲染卡顿复杂物理模拟（如SPH流体）难以在单线程中实现技术选型对比：graphLRA[计算密集型任务]-->B[WebAssembly]C[图形渲染任务]-->D[WebGPU]B-->E[共享内存]D-->E️环境搭建全流程1.WebGPU环境配置#启用Chrome
  • Vue3项目白屏问题深度解析：从AI辅助诊断到性能优化实战 TE-茶叶蛋 前端项目性能优化vueelementui
    一、问题背景：令人困惑的白屏现象在开发一个基于Vue3+Vite+TypeScript的中后台管理系统时，我们遭遇了一个典型的性能问题：页面刷新后出现持续1-2秒的白屏，随后才正常渲染内容。尽管在index.html中加入了Loading动画，但动画结束后仍存在明显的空白间隙。关键现象特征：开发环境请求数达400+（Vite按需编译特性）生产环境构建后请求50+，资源总体积8.6MBDOMCont
  • 【商城实战(22)】商城性能优化秘籍：从前端到后端的实战攻略 奔跑吧邓邓子 商城实战性能优化商城实战uniappSpringBootElementplusRedis缓存
    【商城实战】专栏重磅来袭！这是一份专为开发者与电商从业者打造的超详细指南。从项目基础搭建，运用uniapp、ElementPlus、SpringBoot搭建商城框架，到用户、商品、订单等核心模块开发，再到性能优化、安全加固、多端适配，乃至运营推广策略，102章内容层层递进。无论是想深入钻研技术细节，还是探寻商城运营之道，本专栏都能提供从0到1的系统讲解，助力你打造独具竞争力的电商平台，开启电商实战
  • JavaScript性能优化指南：聚焦DOM操作优化 桃木山人 技术杂谈javascript性能优化开发语言
    引言：性能优化的关键路径在Web应用开发中，JavaScript性能直接影响用户体验。虽然存在多种优化手段，但DOM操作优化往往能带来最显著的性能提升。本文将以DOM操作为核心展开深入分析，并简要概述其他优化方向。核心优化：DOM操作性能提升1.问题根源分析浏览器渲染引擎与JavaScript引擎独立运作，频繁的DOM操作会导致：重排（Reflow）：计算元素几何属性重绘（Repaint）：更新元
  • FastAPI安全防护指南：构建坚不可摧的参数处理体系 qcidyu fastapi安全
    扫描二维码关注或者微信搜一搜：编程智域前端至全栈交流与成长探索数千个预构建的AI应用，开启你的下一个伟大创意第一章：输入验证体系1.1类型安全革命frompydanticimportBaseModel,PaymentCardNumberfrompydantic.typesimportSecretStrclassUserRequest(BaseModel):username:str=Field(mi
  • SvelteKit 最新中文文档教程（3）—— 数据加载
    前言Svelte，一个语法简洁、入门容易，面向未来的前端框架。从Svelte诞生之初，就备受开发者的喜爱，根据统计，从2019年到2024年，连续6年一直是开发者最感兴趣的前端框架No.1：Svelte以其独特的编译时优化机制著称，具有轻量级、高性能、易上手等特性，非常适合构建轻量级Web项目。为了帮助大家学习Svelte，我同时搭建了Svelte最新的中文文档站点。如果需要进阶学习，也可以入手我
  • 16、JavaEE核心技术-EL与 JSTL 跟着汪老师学编程 java-eejava
    EL与JSTL实践一.EL（ExpressionLanguage）EL（表达式语言）是JSP2.0中引入的一种简单的脚本语言，用于在JSP页面中简化数据的访问和显示。它通过一种类似于JavaScript的语法，允许开发者在JSP页面中直接访问JavaBean的属性、集合、甚至是Java类的静态字段和方法。1、EL的基本语法EL表达式的语法格式为${}，例如：${requestScope.userN
  • torch.logical_and()方法 CodeWang_NC pytorch深度学习python
    torch.logical_and()计算给定输入张量的元素逻辑AND。零被视为False，非零被视为True官方文档说明:https://pytorch.org/docs/stable/generated/torch.logical_and.html#torch.logical_andtorch.logical_and(input，other，*，out=None）→返回张量input（张量）–
  • springboot kafka spring boot搭建 单机 集群 集成入门 木秀林 环境配置kafkaspringbootdocker
    搭建kafka(单机版)使用虚拟机+docker参考https://blog.csdn.net/qq_35394891/article/details/84349955https://www.cnblogs.com/xiaohanlin/p/10078865.html拉取镜像(kafka依赖zookeeper,所有两个都要)dockerpullwurstmeister/zookeeperdocke
  • CSS中粘性定位 ~废弃回忆 �༄ HTMLcss前端htmlCSS中粘性定位
    1.如何设置为粘性定位?给元素设置posttion:sticky即可实现粘性定位.可以使用left,right,top,bottom四个属性调整位置,不过最常用的是top值.2.粘性定位的参考点在哪里?离他最近的一个拥有"滚动机制"的祖先元素,即便这个祖先不是最近的真实可滚动祖先.3.粘性定位元素的特点?不会脱离文档流,它是一种专门用于窗口滚动时的新的定位方式.最常用的值是top值;粘性定位和浮动
  • 【SpringMVC】常用注解：@RequestParam 字节源流 java开发语言
    1.作用如果控制器标注的方法的参数名称与前端传递过来的参数名称不一致，使得SpringMVC无法自动启动，那么我们可以使用该注解实现前后端参数的绑定。2.相关属性value/name：这两个属性都是一个作用，都是描述参数的名称，也就是前端传递过来的参数的名称。required：默认值为true.标识当前的参数是必须携带的，如果前端没有携带该参数，就会报404的异常。如果是false就是不必须的de
  • CSS:不设定高度的情况,如何让flex下的两个元素的高度一致 25号底片~ csscss前端
    方法1：使用align-items:stretch（默认行为）flex容器的默认行为是align-items:stretch，这意味着子元素的高度会自动拉伸到与容器高度一致。如果容器没有固定高度，子元素会以最高的子元素为准。css.container{display:flex;/*启用flex布局*/align-items:stretch;/*默认值，子元素高度会拉伸到一致*/}.item{/*不
  • html字段最大长度限制,html input 限制输入的长度并提示的方法 朱佳顺 html字段最大长度限制
    html中input标签的value值的长度理论上应该是2^32(数据来源于资料，没有测试过)，但为了防止一些input的输入数据过长来做一些限制，该如何实现呢？这篇文章就来介绍一下，如何限制input输入数据的长度并且输入的数据超过规定的长度该如何去提示？htmlinput限制输入字符串长度的方法input标签中的maxlength属性，可以用来规定输入字符串的最大长度。示例代码：htmlinp
  • 六十天前端强化训练之第十七天React Hooks 入门：useState 深度解析 编程星辰海 #前端前端react.jsjavascript
    =====欢迎来到编程星辰海的博客讲解======看完可以给一个免费的三连吗，谢谢大佬！目录一、知识讲解1.Hooks是什么？2.useState的作用3.基本语法解析4.工作原理5.参数详解a)初始值设置方式b)更新函数特性6.注意事项7.类组件对比8.常见问题解答二、核心代码示例三、实现效果四、学习要点总结五、扩展阅读推荐官方文档优质文章推荐学习路径进阶资源六、实践步骤一、表单输入控制二、动态
  • 深入解析React 18核心特性：构建未来级Web应用的全面指南 斯~内克 react知识点前端react.js前端框架
    一、React18的里程碑意义React18作为近年来最具革命性的版本更新，标志着前端开发正式进入并发渲染时代。这个版本不仅带来了底层架构的革新，更重新定义了现代Web应用的性能标准与开发范式。根据npm官方统计，React18发布首周下载量突破1800万次，GitHub星标数新增3.4万，充分展现了开发者社区对其技术价值的认可。二、架构革命：并发模式深度解析2.1并发渲染原理//传统同步渲染模式
  • 【51单片机】程序实验17.红外遥控 -一杯为品- 51单片机51单片机mongodb嵌入式硬件
    主要参考学习资料：B站【普中官方】51单片机手把手教学视频开发资料下载链接：http://www.prechin.cn/gongsixinwen/208.html单片机套装：普中STC51单片机开发板A4标准版套餐7目录红外遥控介绍红外线简介红外遥控原理红外发射装置红外接收装置硬件设计实验17红外遥控红外接收头驱动主函数红外遥控介绍红外线简介可见光按波长从长到短排列依次为红橙黄绿青蓝紫，其中红光波
  • 深入解析 React Diff 算法：原理、优化与实践 赵大仁 前端技术jsreact.js前端前端框架
    深入解析ReactDiff算法：原理、优化与实践1.引言React作为前端领域的标杆框架，采用虚拟DOM（VirtualDOM）来提升UI更新性能。React的Diff算法（Reconciliation）是虚拟DOM运行机制的核心，它决定了如何高效地对比新旧DOM并执行最少的操作来更新UI。本篇文章将深入探讨ReactDiff算法的原理、优化策略，并通过生动的示例解析其工作方式，让你能够更直观地理
  • 前端面试题---vue项目打包时, 内存不足了怎么办 为什么会出现这样的情况 *星之卡比* 前端vue.jsjavascript
    Vue项目打包时如果出现内存不足（OOM，OutofMemory）简称就是OOM，通常是因为项目代码量较大、依赖过多、打包时Webpack需要处理的文件过多，导致Node.js运行时超出了默认的内存限制。一、为什么会出现内存不足？项目过大：项目代码文件过多，Webpack需要处理的内容太多。第三方库过多：node_modules体积过大，依赖库多且未进行优化。SourceMap过大：默认produ
  • 深入解析 React 最新特性：革新、应用与最佳实践 赵大仁 前端ReactNativereact.js前端前端框架
    深入解析React最新特性：革新、应用与最佳实践1.引言React作为前端开发的核心技术之一，近年来不断推出新的API和优化机制，从ConcurrentRendering（并发模式）到ServerComponents（服务器组件），都在不断提升开发体验和应用性能。本文将深入解析React最新特性，包括React18并发模式、useTransition、useDeferredValue、ReactS
  • 【原创】Linux上普通用户安装、运行nmap功能扫描指定IP地址上的端口 赵庆明老师 Linuxlinuxtcp/ip运维
    由于是普通用户，因此权限受限，基本上不用考虑常规途径安装了。加上服务器操作系统可能比较老，如果使用源码编译的话，可能会有一大堆编译错误，且由于权限问题，无法解决。这里我要用到一个工具：nmap，扫描某主机。登录nmap官网https://nmap.org/点击下载https://nmap.org/download.html点击Linux版的nmap,下载rpm安装包下载完后，上载到服务器。使用以下
  • 从零基础开始实现一个Spring Boot + Vue 项目的详细步骤指南 软件职业规划 springspringbootvue.js后端
    一、准备工作1.开发环境搭建安装JDK（JavaDevelopmentKit）：前往Oracle官网（https://www.oracle.com/java/technologies/javase-jdk11-downloads.html，以JDK11为例）下载适合你操作系统的JDK安装包，按照安装向导完成安装。安装完成后，配置系统环境变量，确保在命令行中能通过java-version命令查看到正
  • 我与DeepSeek读《大型网站技术架构》- 大型网站架构技术一览与Web开发技术发展历程 诺亚凹凸曼 架构
    文章目录大型网站架构技术一览1.前端架构2.应用层架构3.服务层架构4.存储层架构5.后台架构6.数据采集与监控7.安全架构8.数据中心机房架构Web开发技术发展历程一、静态HTML阶段二、CGI脚本模式阶段三、服务器页面模式阶段大型网站架构技术一览1.前端架构浏览器访问优化：压缩静态资源、减少HTTP请求。CDN加速：将静态资源分发至边缘节点，降低网络延迟。反向代理：缓存热点内容，提供负载均衡与
  • 我与DeepSeek读《大型网站技术架构》（4） 诺亚凹凸曼 架构
    瞬时响应：网站的高性能架构章节要点本章聚焦于如何通过系统性优化实现网站快速响应，从多层级、多维度剖析了高性能架构的核心策略。1.高性能架构的优化层级(1)前端性能优化目标：减少用户端请求延迟，提升页面加载速度。核心策略：减少HTTP请求：合并CSS/JS文件、使用CSSSprites（雪碧图）。压缩资源：Gzip压缩文本文件（HTML/CSS/JS）、图片优化（WebP格式）。CDN加速：静态资源
  • 2024前端Webpack面试题 司宁 前端面试题前端webpack
    1、谈谈你对Webpack的理解Webpack是一个模块打包工具，可以使用它管理项目中的模块依赖，并编译输出模块所需的静态文件。它可以很好地管理、打包开发中所用到的HTML,CSS,JavaScript和静态文件（图片，字体）等，让开发更高效。对于不同类型的依赖，Webpack有对应的模块加载器，而且会分析模块间的依赖关系，最后合并生成优化的静态资源。2、Webpack的基本功能代码转换：Type
  • fetch java_拦截Java语言中的Fetch（）API响应和请求 就大概是这样 fetchjava
    我想拦截Javascript中的提取API请求和响应。例如：在发送请求之前，要拦截请求URL，一旦获得响应，就要拦截响应。以下代码用于拦截所有XMLHTTPRequest的响应。(function(open){XMLHttpRequest.prototype.open=function(XMLHttpRequest){varself=this;this.addEventListener("read
  • XMLHttpRequest、Fetch、Axios和AJAX的关系 冰镇屎壳郎 前端#JavaScriptajax前端javascript
    一、基于http协议用于前后端通信的工具1、XMLHttpRequest（原生JS对象）XMLHttpRequest（XHR）是原生JavaScript对象。通过XMLHttpRequest可以在不刷新页面的情况下请求特定URL，获取数据。特性：浏览器广泛支持功能丰富：可以跟踪请求的状态、支持进度事件、文件上传、同步请求等可同步可异步不支持PromiseAPI2、Fetch（浏览器原生API）（1
  • 通过覆盖原型属性拦截 XMLHttpRequest 响应 @大迁世界 服务器运维
    在JavaScript中有两种发起HTTP请求的API-现代的fetch()和传统的XMLHttpRequest。它们功能完全相同,只是语法不同。XMLHttpRequest使用回调处理响应,而fetch()返回更方便使用的Promise。XMLHttpRequest是发起HTTP请求的主流API。在新项目中使用传统的XMLHttpRequest是没有意义的。另一方面,将现有可运行的基于XMLHt
  • 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其他