Hui-1018
Hui-1018

js原生实现年份轮播选择效果

文章目录

  • 前言
  • 一、思路是什么？
  • 二、全部代码
    • 1. html
    • 2.js
    • 2.css
  • 总结

前言

用js实现一个年份轮换选择效果。废话不多说，看图：

js原生实现年份轮播选择效果_第1张图片

一、思路是什么？

  • 布局： 左右箭头使用实体字符 < 和 > 年份5个span。使用用flex布局横向排列。
  • js逻辑：（注：年份数据为number数组）
    • a> . 默认展示年份数据前5个。
    • b>. firstIndex记录要显示的5个年份的起始索引。点击右侧箭头+1，直到firstIndex+5 刚好等于年份数组长度，不在递增。点击左侧箭头-1，直到firstIndex为0，不在递减。初始值为0。
    • c>.selectedIndex记录当前点击选中的年份索引。默认显示第一个即2021。初始值0。
    • d>.firstIndex值发生变化，获取firstIndex，firstIndex+1，firstIndex+2…firstIndex+4对应的年份，渲染到页面。并且这5个索引中某一个和selectedIndex相等，说明选中的年份，刚好在当前页面显示的年份当中。所以，与之相等的index对应的span添加选中样式，其他4个span移除选中样式。
  • css：左右箭头逻辑，默认全部添加可点击样式：firstIndex=0，移除左可点击样式，firstIndex+5=年份数组长度，移除右可点击样式。

二、全部代码

1. html

代码如下：


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <link rel="stylesheet" href="index.css" type="text/css"/>
    <script type="text/javascript" src="echarts.min.js">script>
    <script type="text/javascript" src="index.js">script>
head>
<body>
<div class="container">

    <div id="left" class="arrow_left" onclick="clickBefore()" style="cursor:default" unselectable="on" onselectstart="return false;">
        <span><span>
    div>
    <div id="wrap" class="wrap">
        <span onclick="selected(this)">1span>
        <span onclick="selected(this)">2span>
        <span onclick="selected(this)">3span>
        <span onclick="selected(this)">4span>
        <span onclick="selected(this)">5span>
    div>
    <div id="right" class="arrow_right arrow_active" onclick="clickNext()" style="cursor:default" unselectable="on" onselectstart="return false;">
        <span>>span>
    div>

div>

<div class="content" id="content">

div>
body>
html>

2.js

代码如下：

window.onload = function () {
     
    //首次渲染列表
    initList(firstIndex);
};

let yearArr = [2007, 2008, 2009, 2010, 2011, 2012, 2013, 2014, 2015, 2016, 2017, 2018, 2019, 2020, 2021];
yearArr.reverse();

//起始索引
let firstIndex = 0;
//选中索引,默认选中第一个
let selectedIndex = 0;


/**
 * 初始化列表
 */
function initList(firstIndex) {
     

    //渲染页面span列表
    let spanList = document.getElementById('wrap').getElementsByTagName('span');
    for (let i = 0; i < spanList.length; i++) {
     
        let index = firstIndex + i;
        let span = spanList[i];
        span.innerText = yearArr[index];

        //选中样式添加和移除
        if (index === selectedIndex) {
     
            span.classList.add('active');
        } else {
     
            span.classList.remove('active')
        }
    }
    //页面内容显示值
    document.getElementById('content').innerText = '当前选中年份：' + yearArr[selectedIndex];
}

/**
 * 下一页
 */
function clickNext(div) {
     
    if (firstIndex + 5 < yearArr.length) {
     
        firstIndex = firstIndex + 1;
        initList(firstIndex)
    }
    arrowActive();
}

/*
* 上一页
 */
function clickBefore(div) {
     
    if (firstIndex > 0) {
     
        firstIndex = firstIndex - 1;
        initList(firstIndex)
    }
    arrowActive();
}

/**
 * 选中
 */
function selected(span) {
     
    let value = span.innerText;
    let index = yearArr.findIndex((el) => {
     
        return el + "" === value;
    })
    selectedIndex = index !== -1 ? index : 0;
    initList(firstIndex);
}

/**
 * 左右箭头激活
 * firstIndex = 0: 右激活 左不
 * firstIndex = length-5：左激活 右不
 * 其他：全激活
 */
function arrowActive() {
     
    let left = document.getElementById('left')
    let right = document.getElementById('right')
    left.classList.add('arrow_active');
    right.classList.add('arrow_active');
    if (firstIndex === 0) {
     
        left.classList.remove('arrow_active');
    } else if (firstIndex === yearArr.length - 5) {
     
        right.classList.remove('arrow_active');
    }
}

2.css

代码如下：


body{
     
    margin-top: 80px;
}
.container {
     

    display: flex;
    justify-content: center;
    align-items: center;
    margin: 10px;
}

.wrap {
     
    height: 40px;
    z-index: 1;
    color: black;
    display: flex;
    flex: 1;
    background: rgba(155,226,219,0.5);
    border-radius: 20px;
    margin-left: 20px;
    margin-right: 20px;
}

.wrap span {
     
    flex: 1;
    text-align: center;
    height: 40px;
    line-height: 40px;
    border-radius: 20px;

}

.active{
     
    background: #1abc9c;
    color:#fff;
}



.arrow_left {
     
    left: 10px;
    color: green;
    padding: 0px 14px;
    border-radius: 50%;
    font-size: 30px;
    z-index: 2;
}


.arrow_right {
     
    right: 10px;
    color: green;
    padding: 0px 14px;
    border-radius: 50%;
    font-size: 30px;
    z-index: 2;
}
.arrow_active{
     
    color: blue;
}

.content{
     
    margin-left: 30px;
}

总结

每天记录一点，从小小菜鸟变小菜鸟！！！

你可能感兴趣的:(javascript,css,html)

  • 前端-webpack一些常用配置的作用 大嘴史努比 前端webpacknode.js
    1.LoaderLoader用于对模块的源代码进行转换。它可以将非JavaScript文件（如CSS、图片、字体等）转换为webpack能够处理的模块。常用Loader及其作用Loader作用babel-loader将ES6+代码转换为ES5，兼容旧版浏览器。css-loader解析CSS文件，处理@import和url()等语法。style-loader将CSS插入到DOM中，通过标签生效。sa
  • 教你如何免费获取股票数据用python、JavaScript (Node.js)、JAVA等多种语言的实例代码演示（实时数据、历史数据、CDMA、KDJ等指标数据）配有股票数据API接口说明文档说明 蝶澈乐乐 pythonjavascriptnode.js数据仓库金融
    近一两年来，股票量化分析逐渐受到广泛关注。而作为这一领域的初学者，首先需要面对的挑战就是如何获取全面且准确的股票数据。因为无论是实时交易数据、历史交易记录、财务数据还是基本面信息，这些数据都是我们进行量化分析时不可或缺的宝贵资源。我们的核心任务是从这些数据中挖掘出有价值的信息，为我们的投资策略提供有力的支持。在寻找数据的过程中，我尝试了多种途径，包括自编网易股票页面爬虫、申万行业数据爬虫，以及同花
  • javascript Day_1 Mswanga javascript前端javajavascript
    script的书写位置1，写在标签的正上方constnewItem=12，写在外部，然后引入到HTML文件输入输出1.输入：prompt('请输入一段文字')结果：会显示一个对话框，包含一个文字信息，用来提示用户输入。2.输出：//普通输出document.write('要输出的内容')//内容可以包含标签//弹出警告框输出alert('要输出的内容')//控制台打印输出，程序员可见console
  • JavaScript_Day2 Mswanga javascript前端开发语言
    对象的声明let对象名={属性值，方法}letsir={name:"wang",address:"Henan",age:18}//修改属性sir.name="li";//增加属性sir.sex="man";//删除属性deletesir.age;console.log(sir);查找的两种方法1.对象名.属性名2.对象名["属性名"]，如sir['name']如何写方法例如song方法song:f
  • ctf-web:php反序列化逃逸 -- GHCTF Escape！ A5rZ php网络安全
    step1寻找利用点随便注册一个进去,能写入文件isadmin){$tmp=file_get_contents("tmp/admin.html");echo$tmp;if($_POST['txt']){$content='';$content.=$_POST['txt'];file_put_contents($_POST['filename'],$content);}}else{$tmp=file
  • vue-route shadouqi vue2vue.js前端javascript
    官方文档声明式导航比起写死的会好一些，理由如下：无论是HTML5history模式还是hash模式，它的表现行为一致，所以，当你要切换路由模式，或者在IE9降级使用hash模式，无须作任何变动。在HTML5history模式下，router-link会守卫点击事件，让浏览器不再重新加载页面。当你在HTML5history模式下使用base选项之后，所有的to属性都不需要写(基路径)了。编程式导航r
  • Angular 指令 ruky36 angular.jsjavascript前端
    Angular指令是Angular框架中的一项核心功能，它允许开发人员扩展HTML的功能，并创建可复用的组件和行为。以下是一些常见的Angular指令：1.组件指令(ComponentDirectives)组件指令是最常用的一种指令，用于创建可复用的UI组件。每个组件指令都关联一个模板，用于定义组件的视图。示例：typescriptimport{Component}from'@angular/co
  • Vue.Js 是一个渐进式的 JavaScript 框架，专为构建用户界面而生，尤其擅长打造单页应用（SPA）。其核心设计理念在于组件化，即将用户界面拆解为独立且可复用的组件单元。以下是 Vue.Js 一一代码 pythonvue.js
    1.创建Vue.Js组件在Vue.js中，组件是一个Vue实例，可以包含模板、数据、方法、生命周期钩子等。1.1全局组件全局组件可以在任何Vue实例中使用。```javascript//定义一个全局组件Vue.component('my-component',{template:'这是一个全局组件'});//创建Vue实例newVue({el:'#app'});```在HTML中使用：```htm
  • Selenium工具使用Python语言实现下拉框定位操作 测试1998 职场和发展python软件测试自动化测试selenium测试用例测试工具
    点击文末小卡片，免费获取软件测试全套资料，资料在手，涨薪更快我们通常遇到的下拉框有显性的下拉框和隐性的下拉框；有的下拉框还可以进行单选或多选操作，在selenium中如何实现下拉框的定位通常使用select标签进行定位。对于一些页面中隐性的下拉框，则需要CSS/JS动态加载，非标准的HTMLSELECT元素，通过Python语言如何实现定位，让我们一起来研究一下吧.select的方法列表如下：显性
  • HTTP的两种常用请求方式GET和POST fzshuai25 JavaWebhttppostjavawebget
    HTTP的两种常用请求方式GET和POSTHTTP：HTTP协议（HyperTextTransfer），用于从万维网（WWWW:WorldWideWeb）服务器传输超文本到本地浏览器的传输协议。HTTP是一个基于TCP/IP通信协议来传递数据（HTML文件，图片文件，查询结果等）。一、GET方法使用GET方法时，查询字符串（名称或键值对）是在GET请求的URL中发送的：/test/demo_for
  • Vue输入框获取焦点 冰淇淋@ vuevue.jsjavascript前端
    1.元素未渲染完成如果你在组件挂载或数据更新后立即调用focus()，可能元素还未渲染到DOM中，导致focus()失效。解决方法：确保在元素渲染完成后再调用focus()。可以使用nextTick确保DOM更新完成。2.ref未正确绑定确保ref正确绑定到目标元素上。3.元素不可聚焦不是所有HTML元素都支持focus()方法。确保目标元素是input、textarea、button等可聚焦元素
  • JS事件冒泡和事件捕获 一朵好运莲 javascript前端开发语言
    在JavaScript中，事件冒泡（EventBubbling）和事件捕获（EventCapturing）是两种不同的事件传播机制。当你在DOM元素上注册事件时，事件的触发并不会立即发生，而是会按照一定的顺序进行传播。事件的传播机制决定了事件如何从目标元素传递到DOM树中的其他元素。目录事件捕获和事件冒泡的提出为什么整合了捕获和冒泡机制？事件传播的顺序具体例子实现事件捕获和事件冒泡的提出事件冒泡最
  • 深入解析CSS动画：从基础到实战的完整指南 斯~内克 csscss前端
    一、CSS动画的现代意义与核心优势在Web开发领域，CSS动画已成为构建现代交互体验的核心技术。相比传统的JavaScript动画实现方式，CSS动画具有以下显著优势：硬件加速优化：浏览器可自动使用GPU加速，实现更流畅的动画效果声明式语法：通过简洁的代码描述复杂动画序列性能优势：浏览器原生支持，无需额外脚本解析维护便捷：动画逻辑与业务代码分离，易于修改和扩展响应式支持：可结合媒体查询实现多设备适
  • HTML基础大揭秘：从标记语言到网页结构，必知必会的核心知识！ 分歧Sec html前端
    HTML基础目录HTML基础知识解析1.HTML是什么（标记语言）HTML的特点：2.HTML基本结构有哪些（head,body）2.1``部分2.2``部分3.什么是文档类型声明3.1DOCTYPE的作用3.2常见的DOCTYPE声明4.什么是HTML根元素（开始和结束标签是怎样的）4.1``标签的作用4.2``标签的语法5.如何进一步解释``头部部分5.1``元素示例代码：5.2``元素常用`
  • vue项目全局引入scss文件 马康鑫 vue.jsscss前端
    在Vue项目中，可以通过以下步骤全局引用SCSS文件：1、首先，确保你的Vue项目已经安装了SCSS的相关依赖，可以使用npm或者yarn进行安装。例如，使用npm安装依赖的命令如下：npminstallnode-sasssass-loader--save-dev2、在Vue项目的根目录下，创建一个名为vue.config.js的文件（如果已经存在则跳过此步骤）。3、在vue.config.js文
  • Effeckt.css项目：CSS交互动画应用集锦 weixin_33982670 javascriptViewUI
    目前，网上有大量基于CSS转换的实验和示例，但它们都过于分散，而Effeckt.css的目标就是把所有基于CSS/jQuery动画的应用集中起来，例如：弹窗、按钮、导航、列表、页面切换等等。Effeckt.css是一个集合了众多新鲜而又实用的CSS/jQuery动画效果应用，既适用于网站也适用于手机Web开发，例如：弹窗、按钮、导航、列表、页面切换等等，这些特效动画都能给你的网站提升一定用户体验，
  • scss声明全局变量 semicolon_helloword scss前端css
    在SCSS中声明全局变量是为了让它们可以在项目中的任何地方被访问和使用。通常的做法是在单独的文件中定义这些全局变量，然后通过@import规则将其导入到需要使用这些变量的地方。以下是一个简单的步骤：1.创建一个全局变量文件：例如，创建一个名为_variables.scss的文件，并在这个文件中定义你的全局变量。//_variables.scss$primary-color:#1a1b20;$sec
  • 187.上下文转场特效 @大迁世界 CSS创意特效(第三季)
    效果(源码网盘地址在最后)源码index.html上下文转场特效
  • 全局引用scss文件定义的变量 魏时烟 vue3+ts+scssscss前端css
    在vite.config.ts文件中写如下代码css:{preprocessorOptions:{scss:{additionalData:`@use"@/assets/styles/index.scss";`,//这一句javascriptEnabled:true}}}在scss文件中定义变量$color:#000;在其他文件引用变量.text{color:index.$color;}
  • JavaScript基础-顺序流程控制 難釋懷 javascript开发语言
    在学习任何编程语言时，理解如何控制程序的执行流程是至关重要的。JavaScript中的顺序流程控制指的是按照代码书写的顺序依次执行语句的过程。虽然它看起来非常直接和简单，但正是这种基本的控制流构成了所有复杂逻辑的基础。本文将详细介绍JavaScript中的顺序流程控制，并通过示例展示其应用。一、什么是顺序流程控制？顺序流程控制是最简单的程序控制形式，指的是代码从上到下、从左到右逐行执行。除非受到特
  • 前端 - uniapp - - 滚动容器scroll-view实现横向滚动 cv高级工程师YKY uniapp前端uni-app
    微信开放平台scrol-view的官方文档说明https://developers.weixin.qq.com/miniprogram/dev/component/scroll-view.htmlscrollview相当于给div加上了overflow-x:auto;属性想要实现横线滚动官方文档有说明需要配置scroll-x和enable-flex为true并其需要给高度和flex-directi
  • React Native与Vue的H5交互 丁国栋- reactnativejavascriptvue交互
    一、ReactNative简介：1、ReactNative采用JavaScript框架，将React基础抽象组件渲染为原生平台UI组件，像View,Text以及Image等，可直接映射渲染为对应平台的原生UI组件2、通过React的声明式组件机制和JavaScript代码，现有的原生代码和api可以完美地封装嵌合到React组件中3.、ReactNative创建的原生应用，经常采用混合开发方式嵌入
  • Vue响应式数组方法深度解析 北辰alk 前端vuevue.jsjavascriptecmascript
    文章目录一、Vue数组响应式核心机制1.原生JavaScript数组的局限性2.Vue的解决方案二、Vue封装的七大数组方法1.方法列表与功能说明2.方法拦截器实现原理三、视图更新触发全流程1.依赖收集流程2.更新触发流程四、源码级实现分析1.原型链覆盖实现2.新增元素响应式处理五、特殊场景处理方案1.索引直接修改问题2.长度修改处理3.过滤数组处理六、Vue3的响应式数组优化1.Proxy实现机
  • Claude 3.7 全解析：AI 代码助手的巅峰之作？
    ReactHook深入浅出CSS技巧与案例详解vue2与vue3技巧合集VueUse源码解读最近AI领域的新模型层出不穷，Claude3.7的发布无疑是最受瞩目的事件之一。从Claude3.5的成功，到如今对抗OpenAIO3Mini和DeepSeekR1的挑战，这款新一代AI是否真的能超越前辈，成为最强的AI代码助手？在深入研究和亲身体验后，这篇文章将完整解析Claude3.7的新特性、性能表现
  • JavaScript泄露浏览器插件信息引发的安全漏洞及防护措施 w2361734601 网络web安全安全
    本文所述技术原理、漏洞案例及防御方案仅用于安全研究交流，旨在提升网络安全防护意识。任何试图利用文中提及的技术手段进行非法攻击的行为，均与作者/发布方无关。目录引言：被忽视的信息泄露风险一、插件信息泄露的三大途径1.Navigator.plugins对象检测2.MIME类型检测3.特性嗅探技术二、漏洞利用的典型案例1.已知漏洞直接利用2.精准社会工程攻击3.零日漏洞预埋攻击三、四层防御体系构建1.客
  • chrome内核大版本升级涉及核心事项 ปรัชญา แค้วคำมูล chromec++性能优化
    Chrome内核（Chromium）大版本升级涉及多个核心事项，需要从技术、兼容性、安全、性能等多维度进行系统规划。以下是关键核心事项及应对策略：1.技术架构调整V8引擎升级：JavaScript引擎优化可能引入新语法支持（如ES新特性）、性能改进或GC机制调整，需验证业务代码兼容性。渲染引擎变更：Blink引擎的渲染逻辑调整可能导致页面布局差异（如CSSFlexbox/Grid实现变化），需全面
  • 【脑洞小剧场】零帧起手创业小公司之 UI设计稿初稿 Foyo Designer 技术职场小剧产品经理改行学it经验分享程序人生前端ui
    点击此处查看脑洞小剧场合集https://blog.csdn.net/foyodesigner/category_12896948.html阳光透过办公室的窗户，洒在吴艾（UI工程师）的桌上，映照出他那张略显疲惫但又充满期待的脸。今天，他终于完成了那份被无数次催促、无数次修改的UI设计稿初稿。他深吸一口气，像是要把这份成果深深烙印在心里，然后满怀信心地点开了与产品经理程立新和前端程序员段码的群聊窗
  • 【脑洞小剧场】零帧起手创业小公司之 第一次项目团建 Foyo Designer 技术职场小剧职场和发展程序人生创业创新远程工作跳槽改行学it
    点击查看小剧场合集https://blog.csdn.net/foyodesigner/category_12896948.html阳光明媚的周末，本应是睡懒觉、打游戏或者追剧的好时光，但对于这家小公司的员工们来说，却迎来了他们成立以来的第一次团建活动。全栈工程师全搞一脸无奈地站在公司门口，看着手里的团建通知，心里嘀咕着：“团建？不会是又要加班吧？还说是去爬山，这是要累死我们吗？”场景一：全栈工程
  • 《HTML + CSS + JS 打造炫酷轮播图详解》 ningmengjing_ 前端htmlcssjavascript
    《HTML+CSS+JS打造炫酷轮播图详解》一、项目概述本次项目旨在使用HTML、CSS和JavaScript实现一个具有基本功能的轮播图，包括图片自动轮播、上一张/下一张按钮切换、小圆点指示与切换等功能，以提升网页的交互性和视觉吸引力。二、实现步骤（一）图片拼接做出架构1、HTML结构搭建在HTML文件中，首先创建一个div容器，设置id为banner，作为轮播图的整体框架。在banner内部，
  • ES5 vs ES6：JavaScript 演进之路 Slow菜鸟 JavaScriptjavascriptes6前端
    ES5vsES6：JavaScript演进之路JavaScript版本演进ES5(ECMAScript5)ES6(ECMAScript2015)版本演进时间线为什么ES6如此重要？ES5vsES61.变量声明对比2.函数特性对比3.类和对象4.模块化5.解构和展开6.字符串和模板字面量7.数组和对象新方法8.Promise和异步编程9.其他新特性总结JavaScript版本演进ECMAScript
  • Java 并发包之线程池和原子计数 lijingyao8206 Java计数ThreadPool并发包java线程池
    对于大数据量关联的业务处理逻辑，比较直接的想法就是用JDK提供的并发包去解决多线程情况下的业务数据处理。线程池可以提供很好的管理线程的方式，并且可以提高线程利用率，并发包中的原子计数在多线程的情况下可以让我们避免去写一些同步代码。     这里就先把jdk并发包中的线程池处理器ThreadPoolExecutor 以原子计数类AomicInteger 和倒数计时锁C
  • java编程思想 抽象类和接口 百合不是茶 java抽象类接口
    接口c++对接口和内部类只有简介的支持,但在java中有队这些类的直接支持   1 ,抽象类 :  如果一个类包含一个或多个抽象方法,该类必须限定为抽象类(否者编译器报错)   抽象方法 : 在方法中仅有声明而没有方法体    package com.wj.Interface;
  • [房地产与大数据]房地产数据挖掘系统 comsci 数据挖掘
           随着一个关键核心技术的突破,我们已经是独立自主的开发某些先进模块,但是要完全实现,还需要一定的时间...        所以,除了代码工作以外,我们还需要关心一下非技术领域的事件..比如说房地产     &nb
  • 数组队列总结 沐刃青蛟 数组队列
          数组队列是一种大小可以改变，类型没有定死的类似数组的工具。不过与数组相比，它更具有灵活性。因为它不但不用担心越界问题，而且因为泛型（类似c++中模板的东西）的存在而支持各种类型。      以下是数组队列的功能实现代码：   import List.Student; public class
  • Oracle存储过程无法编译的解决方法 IT独行者 oracle存储过程　
    今天同事修改Oracle存储过程又导致2个过程无法被编译，流程规范上的东西，Dave 这里不多说，看看怎么解决问题。   1.     查看无效对象 XEZF@xezf(qs-xezf-db1)> select object_name,object_type,status from all_objects where status='IN
  • 重装系统之后oracle恢复 文强chu oracle
    前几天正在使用电脑，没有暂停oracle的各种服务。 突然win8.1系统奔溃，无法修复，开机时系统 提示正在搜集错误信息，然后再开机，再提示的无限循环中。 无耐我拿出系统u盘 准备重装系统，没想到竟然无法从u盘引导成功。 晚上到外面早了一家修电脑店，让人家给装了个系统，并且那哥们在我没反应过来的时候， 直接把我的c盘给格式化了 并且清理了注册表，再装系统。 然后的结果就是我的oracl
  • python学习二（ 一些基础语法） 小桔子 pthon基础语法
    紧接着把！昨天没看继续看django 官方教程，学了下python的基本语法 与c类语言还是有些小差别： 1.ptyhon的源文件以UTF-8编码格式 2. /   除 结果浮点型 //  除 结果整形 %   除 取余数 *   乘 **  乘方 eg 5**2 结果是5的2次方25 _&
  • svn 常用命令 aichenglong SVN版本回退
    1 svn回退版本   1)在window中选择log,根据想要回退的内容,选择revert this version或revert chanages from this version 两者的区别:   revert this version:表示回退到当前版本(该版本后的版本全部作废)   revert chanages from this versio
  • 某小公司面试归来 alafqq 面试
    先填单子，还要写笔试题，我以时间为急，拒绝了它。。时间宝贵。 老拿这些对付毕业生的东东来吓唬我。。 面试官很刁难，问了几个问题，记录下； 1，包的范围。。。public,private,protect. --悲剧了 2，hashcode方法和equals方法的区别。谁覆盖谁.结果，他说我说反了。 3，最恶心的一道题，抽象类继承抽象类吗？（察，一般它都是被继承的啊） 4，stru
  • 动态数组的存储速度比较 集合框架 百合不是茶 集合框架
    集合框架： 自定义数据结构(增删改查等) package 数组; /** * 创建动态数组 * @author 百合 * */ public class ArrayDemo{ //定义一个数组来存放数据 String[] src = new String[0]; /** * 增加元素加入容器 * @param s要加入容器
  • 用JS实现一个JS对象，对象里有两个属性一个方法 bijian1013 js对象
    <html> <head> </head> <body> 用js代码实现一个js对象，对象里有两个属性，一个方法 </body> <script> var obj={a:'1234567',b:'bbbbbbbbbb',c:function(x){
  • 探索JUnit4扩展：使用Rule bijian1013 java单元测试JUnitRule
            在上一篇文章中，讨论了使用Runner扩展JUnit4的方式，即直接修改Test Runner的实现(BlockJUnit4ClassRunner)。但这种方法显然不便于灵活地添加或删除扩展功能。下面将使用JUnit4.7才开始引入的扩展方式——Rule来实现相同的扩展功能。 1. Rule       &n
  • [Gson一]非泛型POJO对象的反序列化 bit1129 POJO
    当要将JSON数据串反序列化自身为非泛型的POJO时，使用Gson.fromJson(String, Class)方法。自身为非泛型的POJO的包括两种： 1. POJO对象不包含任何泛型的字段 2. POJO对象包含泛型字段，例如泛型集合或者泛型类 Data类 a.不是泛型类， b.Data中的集合List和Map都是泛型的 c.Data中不包含其它的POJO    
  • 【Kakfa五】Kafka Producer和Consumer基本使用 bit1129 kafka
    0.Kafka服务器的配置 一个Broker， 一个Topic Topic中只有一个Partition（）   1. Producer： package kafka.examples.producers; import kafka.producer.KeyedMessage; import kafka.javaapi.producer.Producer; impor
  • lsyncd实时同步搭建指南——取代rsync+inotify ronin47
    1. 几大实时同步工具比较 1.1 inotify + rsync 最近一直在寻求生产服务服务器上的同步替代方案，原先使用的是 inotify + rsync，但随着文件数量的增大到100W+，目录下的文件列表就达20M，在网络状况不佳或者限速的情况下，变更的文件可能10来个才几M，却因此要发送的文件列表就达20M，严重减低的带宽的使用效率以及同步效率；更为要紧的是，加入inotify
  • java-9. 判断整数序列是不是二元查找树的后序遍历结果 bylijinnan java
    public class IsBinTreePostTraverse{ static boolean isBSTPostOrder(int[] a){ if(a==null){ return false; } /*1.只有一个结点时，肯定是查找树 *2.只有两个结点时，肯定是查找树。例如{5,6}对应的BST是 6 {6,5}对应的BST是
  • MySQL的sum函数返回的类型 bylijinnan javaspringsqlmysqljdbc
    今天项目切换数据库时，出错 访问数据库的代码大概是这样： String sql = "select sum(number) as sumNumberOfOneDay from tableName"; List<Map> rows = getJdbcTemplate().queryForList(sql); for (Map row : rows
  • java设计模式之单例模式 chicony java设计模式
    在阎宏博士的《JAVA与模式》一书中开头是这样描述单例模式的： 　　作为对象的创建模式，单例模式确保某一个类只有一个实例，而且自行实例化并向整个系统提供这个实例。这个类称为单例类。 单例模式的结构 　　单例模式的特点： 单例类只能有一个实例。 单例类必须自己创建自己的唯一实例。 单例类必须给所有其他对象提供这一实例。 　　饿汉式单例类   publ
  • javascript取当月最后一天 ctrain JavaScript
    <!--javascript取当月最后一天--> <script language=javascript> var current = new Date(); var year = current.getYear(); var month = current.getMonth(); showMonthLastDay(year, mont
  • linux tune2fs命令详解 daizj linuxtune2fs查看系统文件块信息
    一.简介： tune2fs是调整和查看ext2/ext3文件系统的文件系统参数，Windows下面如果出现意外断电死机情况，下次开机一般都会出现系统自检。Linux系统下面也有文件系统自检，而且是可以通过tune2fs命令，自行定义自检周期及方式。 二.用法： Usage: tune2fs [-c max_mounts_count] [-e errors_behavior] [-g grou
  • 做有中国特色的程序员 dcj3sjt126com 程序员
      从出版业说起 网络作品排到靠前的，都不会太难看，一般人不爱看某部作品也是因为不喜欢这个类型，而此人也不会全不喜欢这些网络作品。究其原因，是因为网络作品都是让人先白看的，看的好了才出了头。而纸质作品就不一定了，排行榜靠前的，有好作品，也有垃圾。 许多大牛都是写了博客，后来出了书。这些书也都不次，可能有人让为不好，是因为技术书不像小说，小说在读故事，技术书是在学知识或温习知识，有
  • Android：TextView属性大全 dcj3sjt126com textview
    android:autoLink    设置是否当文本为URL链接/email/电话号码/map时，文本显示为可点击的链接。可选值(none/web/email/phone/map/all)  android:autoText    如果设置，将自动执行输入值的拼写纠正。此处无效果，在显示输入法并输
  • tomcat虚拟目录安装及其配置 eksliang tomcat配置说明tomca部署web应用tomcat虚拟目录安装
    转载请出自出处：http://eksliang.iteye.com/blog/2097184 1.-------------------------------------------tomcat  目录结构 config：存放tomcat的配置文件 temp  ：存放tomcat跑起来后存放临时文件用的 work   ： 当第一次访问应用中的jsp
  • 浅谈：APP有哪些常被黑客利用的安全漏洞 gg163 APP
    首先，说到APP的安全漏洞，身为程序猿的大家应该不陌生；如果抛开安卓自身开源的问题的话，其主要产生的原因就是开发过程中疏忽或者代码不严谨引起的。但这些责任也不能怪在程序猿头上，有时会因为BOSS时间催得紧等很多可观原因。由国内移动应用安全检测团队爱内测（ineice.com）的CTO给我们浅谈关于Android 系统的开源设计以及生态环境。 1. 应用反编译漏洞：APK 包非常容易被反编译成可读
  • C#根据网址生成静态页面 hvt Web.netC#asp.nethovertree
    HoverTree开源项目中HoverTreeWeb.HVTPanel的Index.aspx文件是后台管理的首页。包含生成留言板首页，以及显示用户名，退出等功能。根据网址生成页面的方法：   bool CreateHtmlFile(string url, string path) { //http://keleyi.com/a/bjae/3d10wfax.htm stri
  • SVG 教程 （一） 天梯梦 svg
    SVG 简介 SVG 是使用 XML 来描述二维图形和绘图程序的语言。 学习之前应具备的基础知识： 继续学习之前，你应该对以下内容有基本的了解： HTML XML 基础 如果希望首先学习这些内容，请在本站的首页选择相应的教程。 什么是SVG？ SVG 指可伸缩矢量图形 (Scalable Vector Graphics) SVG 用来定义用于网络的基于矢量
  • 一个简单的java栈 luyulong java数据结构栈
    public class MyStack { private long[] arr; private int top; public MyStack() { arr = new long[10]; top = -1; } public MyStack(int maxsize) { arr = new long[maxsize]; top
  • 基础数据结构和算法八：Binary search sunwinner AlgorithmBinary search
    Binary search needs an ordered array so that it can use array indexing to dramatically reduce the number of compares required for each search, using the classic and venerable binary search algori
  • 12个C语言面试题，涉及指针、进程、运算、结构体、函数、内存，看看你能做出几个！ 刘星宇 c面试
    12个C语言面试题，涉及指针、进程、运算、结构体、函数、内存，看看你能做出几个！ 1.gets()函数 问：请找出下面代码里的问题： #include<stdio.h> int main(void) {     char buff[10];     memset(buff,0,sizeof(buff));
  • ITeye 7月技术图书有奖试读获奖名单公布 ITeye管理员 活动ITeye试读
    ITeye携手人民邮电出版社图灵教育共同举办的7月技术图书有奖试读活动已圆满结束，非常感谢广大用户对本次活动的关注与参与。 7月试读活动回顾： http://webmaster.iteye.com/blog/2092746 本次技术图书试读活动的优秀奖获奖名单及相应作品如下（优秀文章有很多，但名额有限，没获奖并不代表不优秀）： 《Java性能优化权威指南》
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他