zyynb
zyynb

Vue入门 实现简单的轮播图效果

Vue入门 实现简单的轮播图效果

首先创建一个vue实例，准备图片素材数组，通过v-for循环绑定图片，轮播图的切换通过 v-show 判断下标的改变实现显示或隐藏。
代码如下：

 <style>
        ul li {
            list-style: none;
        }
       
        .main {
            width: 500px;
            height: 300px;
            position: relative;
            display: flex;
            justify-content: center;
        }

        .main img {
            height: 300px;
            width: 500px;
        }
    </style>
  <div id="app">
      <img :src="item" v-for="(item, i) in list" v-show="i===activeIndex">
   </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        let zyy = new Vue({
            el: "#app",
            data() {
                return {
                     list: [
                        "https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1035415831,1465727770&fm=26&gp=0.jpg",
                        "https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=2242212773,2792770847&fm=26&gp=0.jpg",
                        "http://img0.imgtn.bdimg.com/it/u=3973422992,68543740&fm=26&gp=0.jpg"
                    ],
                    activeIndex: 0,
                }
            },
            methods: {
            },
        })
    </script>

让轮播图切换方法，通过在methods中设置定时器让图片数组下标每秒加1实现。同时当图片走到最后一张时，让下标回到0实现轮回切换。

 methods: {
	 run() {
	        this.timer = setInterval(() => { //设置一个定时器
            this.activeIndex++  //让下标每秒加一实现切换效果
      //如果走到最后一张，让下标回到0
       if (this.activeIndex === this.list.length) this.activeIndex = 0
         }, 1000);
     }，
  mounted() {
       this.run()
	}

轮播图下的点切换效果。
1.根据图片数组list循环，有多少图片就有多少个点。
2.通过下标控制当前点背景样式变化:class="{active:i===activeIndex}"实现随轮播图切换。
3.为点添加mouseenter事件，当每次鼠标放在点上时先移除计时器让点停止切换，然后让当前鼠标所在的点激活active样式，随后再恢复计时器，让切换继续。
最终代码如下：

<style>
        ul li {
            list-style: none;
        }


        .dian {
            display: flex;
            position: absolute;
            bottom: 10px;
        }

        .dian li {
            width: 20px;
            height: 20px;
            background: #fff;
            margin: 0 10px;
            border-radius: 50%;
        }

        .dian li.active {
            background: blue;
        }

        .main {
            width: 500px;
            height: 300px;
            position: relative;
            display: flex;
            justify-content: center;
        }

        .main img {
            height: 300px;
            width: 500px;
        }
    </style>
</head>

<body>
    <div id="app">
        <div class="main">
            <img :src="item" v-for="(item, i) in list" v-show="i===activeIndex">
            <ul class="dian">
                <li @mouseenter="hover(i)" :class="{active:i===activeIndex}" v-for="(item, i) in list"></li>
            </ul>
        </div>

    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        let zyy = new Vue({
            el: "#app",
            data() {
                return {
                    activeIndex: 0,
                    timer: null,
                    list: [
                        "https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1035415831,1465727770&fm=26&gp=0.jpg",
                        "https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=2242212773,2792770847&fm=26&gp=0.jpg",
                        "http://img0.imgtn.bdimg.com/it/u=3973422992,68543740&fm=26&gp=0.jpg"
                    ],
                }
            },
            mounted() {
                this.run()
            },
            methods: {
                run() {
                    this.timer = setInterval(() => { //设置一个定时器
                        this.activeIndex++  //让下标每秒加一实现切换效果
                        //如果走到最后一张，让下标回到0
                        if (this.activeIndex === this.list.length) this.activeIndex = 0
                    }, 1000);
                },
                hover(i) { 
                    clearInterval(this.timer)//鼠标放上去时先移除定时器
                    this.activeIndex = i //让当前的标签active激活
                    this.run()  //随后再走定时器
                }
            },
        })
    </script>
</body>

你可能感兴趣的:(vue,js)

  • 芯片制造、汽车制造行业网站，如何用插件增强富文本编辑器的WORD粘贴功能？ 全武凌(荆门泽优) 金融编辑器wordumeditor粘贴wordueditor粘贴wordueditor复制wordueditor上传word图片
    要求：开源，免费，技术支持编辑器：百度ueditor前端：vue2,vue3,vue-cli,react,html5用户体验：Ctrl+V快捷键操作功能：导入Word,导入Excel,导入PPT(PowerPoint),导入PDF,复制粘贴word,导入微信公众号内容,web截屏平台：Windows,macOS,Linux,RedHat,CentOS,Ubuntu,中标麒麟,银河麒麟,统信UOS,
  • 金融行业网页编辑器对WORD图文混排有哪些特殊需求？ 全武凌(荆门泽优) 金融编辑器wordumeditor粘贴wordueditor粘贴wordueditor复制wordueditor上传word图片
    要求：开源，免费，技术支持编辑器：百度ueditor前端：vue2,vue3,vue-cli,react,html5用户体验：Ctrl+V快捷键操作功能：导入Word,导入Excel,导入PPT(PowerPoint),导入PDF,复制粘贴word,导入微信公众号内容,web截屏平台：Windows,macOS,Linux,RedHat,CentOS,Ubuntu,中标麒麟,银河麒麟,统信UOS,
  • HTML编辑器CKEDITOR支持哪些格式的WORD内容导入？ 2501_90699640 html编辑器wordckeditor粘贴wordckeditor导入wordckeditor导入pdfckeditor导入ppt
    要求：开源，免费，技术支持编辑器：ckeditor前端：vue2,vue3.vue-cli后端：asp,java,jsp,springboot,php,asp.net,.netcore功能：导入Word,导入Excel,导入PPT(PowerPoint),导入PDF,复制粘贴word,导入微信公众号内容,web截屏平台：Windows,macOS,Linux,RedHat,Ubuntu,CentO
  • 金融行业Vue应用如何利用wangEditor实现WORD文档高效上传？ 2501_90699640 金融vue.jswordumeditor粘贴wordueditor粘贴wordueditor复制wordueditor上传word图片
    要求：开源，免费，技术支持编辑器：百度ueditor前端：vue2,vue3,vue-cli,react,html5用户体验：Ctrl+V快捷键操作功能：导入Word,导入Excel,导入PPT(PowerPoint),导入PDF,复制粘贴word,导入微信公众号内容,web截屏平台：Windows,macOS,Linux,RedHat,CentOS,Ubuntu,中标麒麟,银河麒麟,统信UOS,
  • MongoDB下载安装 数据潜水员 mongodb
    ###MongoDB1.MongoDB是一种基于文档的非关系型（NoSQL）数据库，数据存储在灵活的JSON文档中，便于快速查询和索引。####二、MongoDB下载1.**官网下载**：-官网地址：(https://www.mongodb.com/)-下载页面：(https://www.mongodb.com/try/download)-**注意**：需要登录账号（可免费注册）后才能下载。2.*
  • vue3修改el-tree样式 不想上班只想要钱 前端vuevue.jsjavascriptelementui
    vue3修改el-tree样式:deep(.el-tree){width:100%;.el-tree-node{.el-tree-node__content{height:32px;.hightlight{color:#189cf1;}.el-tree-node__expand-icon{//transform:rotate(0);transform-origin:center;backgroun
  • Cool Admin5(Go版)后台管理系统开发框架搭建使用记录 后青春期的诗go 经验分享golang开发语言后端go
    一、环境说明nodejs建议版本：18二、安装安装框架github下载最新的zip压缩包，然后解压。#进入解压缩后的目录cdcool-admin5#直接修改go.mod里面的模块名（或删除原go.mod文件，重新初始化：Gomodinitcool-admin5）#根据需要调整man.go文件里的导入路径#安装依赖gomodtidy#运行后端项目Gorun.#进入前端目录Cdfrontend#安装依
  • npm version 命令完全指南 程序员
    npmversion命令完全指南什么是npmversion?npmversion是npm提供的一个非常实用的版本管理命令，它可以帮助我们方便地更新package.json中的版本号，同时创建一个版本提交和标签。版本号格式说明在介绍命令之前，我们先了解一下npm使用的版本号格式：主版本号.次版本号.修订号（例如：1.2.3）主版本号(major)：做了不兼容的API修改次版本号(minor)：做了向
  • Node.js和webpack入门-个人学习笔记 ksmswq node.jswebpack学习
    Node.js-入门Node.js基础概念Node.js是一个跨平台JavaScript运行环境，是开发者可以搭建服务器端的JavaStript应用程序。作用1.编写服务端程序2.编写数据接口，提供网页浏览资源等等3.实现“前端工程化”，为Vue和React等框架做铺垫前端工程化-概念开发项目直到上线，过程中集成的所有工具和技术。（Node.js是前端工程化的基础（因为Node.js可以主动读取前
  • Node.js入门(学习笔记) 唐小艾 学习笔记node.js
    文章目录简介NodeJS下载安装下载安装NodeJS与WebStorm整合JS文件运行CommonJS规范模块模块化定义模块引用模块标识node中的对象globalexports和module.exports属性方法引用包packageNPM(NodePackageManager)NPM命令NPM包引用NPM注意下载速度慢Nodejs核心模块Buffer模块buffer类方法buffer实例的属性
  • 基于python+django+vue.js开发的社区养老管理系统源码+运行步骤 冷琴1996 Python系统设计pythondjangovue.js
    业余时间开发的社区养老系统，基于python/vue技术开发。学习过程问题可以留言。功能介绍平台采用B/S结构，后端采用主流的Python语言进行开发，前端采用主流的Vue.js进行开发。功能包括：老人管理、护工管理、亲属管理、病史管理、房间管理、活动管理、用户管理、日志管理、系统信息模块。源码地址https://github.com/geeeeeeeek/python_yanglao演示地址ht
  • 基于 Vue 和 Element Plus 的时间范围控制与数据展示 奶糖 肥晨 vuevue.jselementui前端
    文章目录1.核心功能2.实现效果3.代码实现️3.1HTML部分3.2JavaScript部分3.3CSS部分本文将重点讲解如何在Vue项目中使用ElementPlus的el-date-picker组件实现时间范围选择，并结合“日”、“月”、“年”按钮动态控制时间范围。！1.核心功能时间范围选择：使用el-date-picker实现日期范围选择。快速切换：通过“日”、“月”、“年”按钮快速设置时间
  • 【Vue.js 2.x源码解析】第18章 从Vue源码分析计算属性与侦听属性的本质差别 代码简单说 教你读懂Vue2.x源码vue.js前端javascript
    想深入了解Vue2.x源码底层原理实现，从编译系统、渲染系统到响应式系统vue-router和vuex等实现方式可以关注『Vue.js2.x源码精讲』专栏或查看专栏目录了解详情从Vue源码分析计算属性与侦听属性的本质差别计算属性（Computed）——了解它，你就能高效利用它`defineComputed`和`createComputedGetter`侦听属性（Watch）——灵活监听变化`wat
  • Vue.js 事件处理与修饰符详解 vvilkim vuevue.js前端javascript
    Vue.js是一个流行的前端框架，它提供了强大的事件处理机制，使得开发者可以轻松地处理用户交互。Vue的事件处理通过v-on指令实现，同时还提供了丰富的事件修饰符和按键修饰符，帮助我们更高效地处理事件。本文将详细介绍Vue的事件处理机制、修饰符的使用方法，并结合示例代码展示如何在实际开发中应用这些功能。1.v-on指令与事件处理在Vue中，v-on指令用于监听DOM事件，并在事件触发时执行Java
  • 深入理解Vue 3：计算属性与侦听器的艺术 qcidyu 实战案例性能优化模板路由侦听器计算属性Vue3
    title:深入理解Vue3：计算属性与侦听器的艺术date:2024/5/30下午3:53:47updated:2024/5/30下午3:53:47categories:前端开发tags:Vue3计算属性侦听器路由模板性能优化实战案例前言Vue3的新特性简介Vue.js作为当今流行的前端框架之一，以其响应式数据绑定和组件化架构著称。随着技术的不断演进，Vue3带来了许多令人期待的新特性，这些特性
  • Cursor中搭建vue 阿什么名字不会重复呢 vue.js前端javascript
    首先检查你电脑上是否安装了node和npm下面是具体的代码node-vnpm-v如果安装好了则会显示node和npm的版本。如果没有安装则可以去官网安装这个是node.js网址下面一步是全局安装VueCLI命令是npminstall-g@vue/cli但是直接安装的话，速度会非常的慢，我们可以选择国内淘宝的镜像，切换npm源到淘宝镜像：npmconfigsetregistryhttps://reg
  • 前端（vue)学习笔记（CLASS 4）：组件组成部分与通信 肥肠可耐的西西公主 vue.js前端学习
    1、组件的三大组成部分（结构/样式/逻辑）注意点：1、结构只能有一个根元素2、全局样式（默认），影响所有组件；局部样式，scoped下样式，只作用于当前组件3、el根实例独有，data是一个函数，其他配置项一致样式注意点：默认情况下，写在组件中的样式会全局生效，因此很容易造成多个组件之间的样式冲突问题1、全局样式：默认组件中的样式会作用到全局2、局部样式：可以给组件加上scoped属性，可以让样式
  • 【k8s004】 Docker 打包 K8s镜像 姚毛毛-aione1.com kubernetesdocker容器
    文章目录一.准备工作1.安装Docker:[官方安装文档](https://docs.docker.com/get-docker/)2.准备应用代码（示例使用Node.js应用）二.创建Dockerfile3、构建镜像（注意最后的点号）4、测试运行5、推送镜像到仓库6、Kubernetes部署文件示例7、部署到Kubernetes三、注意事项8、常用调试命令四、注意事项9、最佳实践一.准备工作1.
  • Tauri+Dotnet+Vue3+Vite桌面应用程序创建 是楊不是杨 前后端vue.netcorerust前端框架
    环境需求Node.js(已安装)Rust(安装Rust，必要).NETCoreSDK(用于后端)TauriCLI(通过Rust安装)1.创建Vue3+Vite前端项目初始化项目：bash复制代码npmcreatevite@latesttauri-vue3-dotnet--templatevuecdtauri-vue3-dotnet安装必要依赖：bash复制代码npminstall启动开发服务器，确
  • 创建 Tauri + Vue + Typescript + Vite + Less 应用 niuiic rustvuevuetypescriptlessrust
    更多分享内容可访问我的个人博客https://www.niuiic.top/更新：本文内容已不适用于最新版本，若遇到相同问题可以继续参考。要创建项目首先按https://tauri.studio/docs/getting-started/prerequisites/配置环境，然后参考https://github.com/niuiic/develop-tools中关于tauri的内容。项目创建流程直
  • 【spring-boot-starter-data-neo4j】创建结点和查找结点操作 阿梦Anmory neo4jneo4j
    配置连接neo4j#application.propertiesspring.neo4j.uri=bolt://localhost:7687spring.neo4j.authentication.username=neo4jspring.neo4j.authentication.password=你的密码定义实体类packagecom.anmory.platform.GraphService.Da
  • DeepSeek 助力 Vue3 开发：打造丝滑的表格（Table）之添加列宽调整功能,示例Table14_14树形数据的固定表头表格 宝码香车 javascript前端vue.jsecmascript开发语言DeepSeek
    前言：哈喽，大家好，今天给大家分享一篇文章！并提供具体代码帮助大家深入理解，彻底掌握！创作不易，如果能帮助到大家或者给大家一些灵感和启发，欢迎收藏+关注哦目录DeepSeek助力Vue3开发：打造丝滑的表格（Table）之添加列宽调整功能,示例Table14_14树形数据的固定表头表格页面效果组件代码代码测试测试代码正常跑通，附其他基本代码编写路由src\router\index.js编写展示入口
  • DeepSeek 助力 Vue3 开发：打造丝滑的表格（Table）之添加列宽调整功能,示例Table14_12自定义表头的固定表头表格 宝码香车 #DeepSeekjavascript前端开发语言vue.jsecmascriptDeepSeek
    前言：哈喽，大家好，今天给大家分享一篇文章！并提供具体代码帮助大家深入理解，彻底掌握！创作不易，如果能帮助到大家或者给大家一些灵感和启发，欢迎收藏+关注哦目录DeepSeek助力Vue3开发：打造丝滑的表格（Table）之添加列宽调整功能,示例Table14_12自定义表头的固定表头表格页面效果组件代码代码测试测试代码正常跑通，附其他基本代码编写路由src\router\index.js编写展示入
  • Yarn 迁移到 pnpm：依赖管理的最佳实践 程序员
    我解释一下yarn和pnpm的主要区别，以及转换时需要注意的事项：依赖安装机制的区别：Yarn/npm的方式（扁平化）：node_modules├──A├──B├──C(B的依赖)└──D(C的依赖)所有依赖都被提升到顶层，这意味着你的项目可能会访问到未在package.json中声明的依赖（幽灵依赖）。pnpm的方式（严格）：node_modules├──.pnpm│├──[email protected]│├──
  • uniapp-x 子组件样式覆盖 陆康永 uniapp-xuni-app前端
    不支持scoped默认不支持scoped，所以写也没用那如果我想修改子孙节点的样式是不是很方便，不需要v-deep了？的确如此自带页面样式隔离在uni-appx中，不支持cssscoped，样式的作用范围遵循以下规则：App.uvue中的样式作用于全局。页面的样式作用于当前页面及其子组件。组件的样式仅作用于当前组件。(作者补充：以及其子组件)对于uniapp自带ui库的样式拓展例如input在we
  • jolt transform (json to json) 嵌套数组进行json格式转换 安静的数据流 jolt
    输入的json格式：[{"status":"success","result":[{"cashierUid":1111,"items":[{"name":"name1"}]},{"cashierUid":2222,"items":[{"name":"name2"},{"name":"name22"}]}],"pageSize":2},{"status":"success","result":[{"
  • jolt json to json mapping第一篇 chizawu5345 jsonjava
    demo解读本文的主要目的是整理梳理对于joltjson的使用，主要使用场景就是jsonmapping模式的含义shift清空后输出default直接输出，类似于增量*匹配所有&取key值出现在value里例子：&=&0当前层级&1向上1级value里没有能力获取key值但是可以通过*，$配合使用$取key值出现在key里同上@取value值出现在key里例子：@(3,clientId)@取val
  • ⚡️Jolt -- 通过JSON配置来处理复杂数据转换的工具 程序员小软 工具javajson数据处理
    简介：一个能够通过JSON配置（特定的语法）来处理复杂数据转换的工具。比如将API响应转换为内部系统所需的格式，或者处理来自不同来源的数据结构差异。例如，将嵌套的JSON结构扁平化，或者重命名字段，合并多个字段等。名称含义：JSON+Bolt：JSON是工具处理的数据格式。Bolt（闪电）象征快速和高效，暗示Jolt能够像闪电一样快速完成JSON数据的转换。Bolt的logo就是一个闪电⚡️标志在
  • uniapp移动端图片比较器组件，仿英伟达官网rtx光追图片比较器功能 独断万古的伊莉雅 uni-appjavascript前端组件
    组件下载地址：https://ext.dcloud.net.cn/plugin?id=22609已测试h5和微信小程序，理论支持全平台亮点：简单易用使用js计算而不是resize属性，定制化程度更高组件挂在后可播放指示线动画，提示用户可以拖拽比较图片左右下角可配置文字，且指引线距离文字过近时文字会变透明使用示例RTXOFF效果示例：
  • 答题卡图像识别 需求分析、市场分析和技术实现 weixin_34037977 人工智能开发工具json
    答题卡图像识别需求分析、市场分析和技术实现一、需求分析一、以接口的方式开发此需求：1：接收图片以上传的方式把图片发送到接口。2：识别图片接口接收到图片后，进行图像识别。3：返回数据返回识别后的JSON格式数据。二、答题卡图片识别的具体要求：图片是通过手机、相机、扫描仪等设备拍照而来，其中手机、相机拍出的照片会出现像素低、图像不正、聚焦不清楚等问题；1：图片只要是人眼能看清楚的即可完成识别；2：80
  • 多线程编程之存钱与取钱 周凡杨 javathread多线程存钱取钱
      生活费问题是这样的：学生每月都需要生活费，家长一次预存一段时间的生活费，家长和学生使用统一的一个帐号，在学生每次取帐号中一部分钱，直到帐号中没钱时 通知家长存钱，而家长看到帐户还有钱则不存钱，直到帐户没钱时才存钱。   问题分析：首先问题中有三个实体，学生、家长、银行账户，所以设计程序时就要设计三个类。其中银行账户只有一个，学生和家长操作的是同一个银行账户，学生的行为是
  • java中数组与List相互转换的方法 征客丶 JavaScriptjavajsonp
    1.List转换成为数组。（这里的List是实体是ArrayList) 　　调用ArrayList的toArray方法。 　　toArray 　　public T[] toArray(T[] a)返回一个按照正确的顺序包含此列表中所有元素的数组；返回数组的运行时类型就是指定数组的运行时类型。如果列表能放入指定的数组，则返回放入此列表元素的数组。否则，将根据指定数组的运行时类型和此列表的大小分
  • Shell 流程控制 daizj 流程控制if elsewhilecaseshell
    Shell 流程控制 和Java、PHP等语言不一样，sh的流程控制不可为空，如(以下为PHP流程控制写法)： <?php if(isset($_GET["q"])){ search(q);}else{// 不做任何事情} 在sh/bash里可不能这么写，如果else分支没有语句执行，就不要写这个else，就像这样 if else if if 语句语
  • Linux服务器新手操作之二 周凡杨 Linux 简单 操作
    1.利用关键字搜寻Man Pages    man -k keyword  其中-k 是选项，keyword是要搜寻的关键字 如果现在想使用whoami命令，但是只记住了前3个字符who，就可以使用 man -k who来搜寻关键字who的man命令       [haself@HA5-DZ26 ~]$ man -k
  • socket聊天室之服务器搭建 朱辉辉33 socket
    因为我们做的是聊天室，所以会有多个客户端，每个客户端我们用一个线程去实现，通过搭建一个服务器来实现从每个客户端来读取信息和发送信息。    我们先写客户端的线程。 public class ChatSocket extends Thread{ Socket socket; public ChatSocket(Socket socket){ this.sock
  • 利用finereport建设保险公司决策分析系统的思路和方法 老A不折腾 finereport金融保险分析系统报表系统项目开发
    决策分析系统呈现的是数据页面，也就是俗称的报表，报表与报表间、数据与数据间都按照一定的逻辑设定，是业务人员查看、分析数据的平台，更是辅助领导们运营决策的平台。底层数据决定上层分析，所以建设决策分析系统一般包括数据层处理（数据仓库建设）。   项目背景介绍 通常，保险公司信息化程度很高，基本上都有业务处理系统（像集团业务处理系统、老业务处理系统、个人代理人系统等）、数据服务系统（通过
  • 始终要页面在ifream的最顶层 林鹤霄
    index.jsp中有ifream，但是session消失后要让login.jsp始终显示到ifream的最顶层。。。始终没搞定，后来反复琢磨之后，得到了解决办法，在这儿给大家分享下。。 index.jsp--->主要是加了颜色的那一句 <html> <iframe name="top" ></iframe> <ifram
  • MySQL binlog恢复数据 aigo mysql
    1，先确保my.ini已经配置了binlog：   # binlog log_bin = D:/mysql-5.6.21-winx64/log/binlog/mysql-bin.log log_bin_index = D:/mysql-5.6.21-winx64/log/binlog/mysql-bin.index log_error = D:/mysql-5.6.21-win
  • OCX打成CBA包并实现自动安装与自动升级 alxw4616 ocxcab
    近来手上有个项目,需要使用ocx控件 (ocx是什么? http://baike.baidu.com/view/393671.htm) 在生产过程中我遇到了如下问题. 1. 如何让 ocx 自动安装?     a) 如何签名?     b) 如何打包?     c) 如何安装到指定目录? 2.
  • Hashmap队列和PriorityQueue队列的应用 百合不是茶 Hashmap队列PriorityQueue队列
      HashMap队列已经是学过了的,但是最近在用的时候不是很熟悉,刚刚重新看以一次,   HashMap是K,v键 ,值     put()添加元素      //下面试HashMap去掉重复的 package com.hashMapandPriorityQueue; import java.util.H
  • JDK1.5 returnvalue实例 bijian1013 javathreadjava多线程returnvalue
    Callable接口： 返回结果并且可能抛出异常的任务。实现者定义了一个不带任何参数的叫做 call 的方法。 Callable 接口类似于 Runnable，两者都是为那些其实例可能被另一个线程执行的类设计的。但是 Runnable 不会返回结果，并且无法抛出经过检查的异常。        ExecutorService接口方
  • angularjs指令中动态编译的方法(适用于有异步请求的情况) 内嵌指令无效 bijian1013 JavaScriptAngularJS
            在directive的link中有一个$http请求，当请求完成后根据返回的值动态做element.append('......');这个操作，能显示没问题，可问题是我动态组的HTML里面有ng-click，发现显示出来的内容根本不执行ng-click绑定的方法！     
  • 【Java范型二】Java范型详解之extend限定范型参数的类型 bit1129 extend
    在第一篇中，定义范型类时，使用如下的方式：   public class Generics<M, S, N> { //M,S,N是范型参数 }  这种方式定义的范型类有两个基本的问题：   1. 范型参数定义的实例字段，如private M m = null;由于M的类型在运行时才能确定，那么我们在类的方法中，无法使用m，这跟定义pri
  • 【HBase十三】HBase知识点总结 bit1129 hbase
    1. 数据从MemStore flush到磁盘的触发条件有哪些？    a.显式调用flush，比如flush 'mytable'    b.MemStore中的数据容量超过flush的指定容量，hbase.hregion.memstore.flush.size,默认值是64M 2. Region的构成是怎么样？ 1个Region由若干个Store组成
  • 服务器被DDOS攻击防御的SHELL脚本 ronin47
    mkdir /root/bin vi /root/bin/dropip.sh #!/bin/bash/bin/netstat -na|grep ESTABLISHED|awk ‘{print $5}’|awk -F:‘{print $1}’|sort|uniq -c|sort -rn|head -10|grep -v -E ’192.168|127.0′|awk ‘{if($2!=null&a
  • java程序员生存手册-craps 游戏-一个简单的游戏 bylijinnan java
    import java.util.Random; public class CrapsGame { /** * *一个简单的赌*博游戏，游戏规则如下： *玩家掷两个骰子，点数为1到6，如果第一次点数和为7或11，则玩家胜， *如果点数和为2、3或12，则玩家输， *如果和为其它点数，则记录第一次的点数和，然后继续掷骰，直至点数和等于第一次掷出的点
  • TOMCAT启动提示NB: JAVA_HOME should point to a JDK not a JRE解决 开窍的石头 JAVA_HOME
    当tomcat是解压的时候，用eclipse启动正常，点击startup.bat的时候启动报错; 报错如下：   The JAVA_HOME environment variable is not defined correctly This environment variable is needed to run this program NB: JAVA_HOME shou
  • [操作系统内核]操作系统与互联网 comsci 操作系统
         我首先申明：我这里所说的问题并不是针对哪个厂商的，仅仅是描述我对操作系统技术的一些看法       操作系统是一种与硬件层关系非常密切的系统软件，按理说，这种系统软件应该是由设计CPU和硬件板卡的厂商开发的，和软件公司没有直接的关系，也就是说，操作系统应该由做硬件的厂商来设计和开发
  • 富文本框ckeditor_4.4.7 文本框的简单使用 支持IE11 cuityang 富文本框
    <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>知识库内容编辑</tit
  • Property null not found darrenzhu datagridFlexAdvancedpropery null
    When you got error message like "Property null not found ***", try to fix it by the following way: 1)if you are using AdvancedDatagrid, make sure you only update the data in the data prov
  • MySQl数据库字符串替换函数使用 dcj3sjt126com mysql函数替换
    需求：需要将数据表中一个字段的值里面的所有的  .   替换成  _   原来的数据是  site.title  site.keywords  .... 替换后要为     site_title  site_keywords   使用的SQL语句如下：   updat
  • mac上终端起动MySQL的方法 dcj3sjt126com mysqlmac
    首先去官网下载: http://www.mysql.com/downloads/ 我下载了5.6.11的dmg然后安装,安装完成之后..如果要用终端去玩SQL.那么一开始要输入很长的:/usr/local/mysql/bin/mysql 这不方便啊,好想像windows下的cmd里面一样输入mysql -uroot -p1这样...上网查了下..可以实现滴. 打开终端,输入: 1
  • Gson使用一（Gson） eksliang jsongson
    转载请出自出处：http://eksliang.iteye.com/blog/2175401 一.概述 从结构上看Json，所有的数据（data）最终都可以分解成三种类型： 第一种类型是标量（scalar），也就是一个单独的字符串（string）或数字（numbers），比如"ickes"这个字符串。 第二种类型是序列（sequence），又叫做数组（array）
  • android点滴4 gundumw100 android
    Android 47个小知识 http://www.open-open.com/lib/view/open1422676091314.html Android实用代码七段（一） http://www.cnblogs.com/over140/archive/2012/09/26/2611999.html http://www.cnblogs.com/over140/arch
  • JavaWeb之JSP基本语法 ihuning javaweb
      目录   JSP模版元素  JSP表达式  JSP脚本片断  EL表达式  JSP注释  特殊字符序列的转义处理  如何查找JSP页面中的错误   JSP模版元素    JSP页面中的静态HTML内容称之为JSP模版元素，在静态的HTML内容之中可以嵌套JSP
  • App Extension编程指南（iOS8/OS X v10.10）中文版 啸笑天 ext
             当iOS 8.0和OS X v10.10发布后，一个全新的概念出现在我们眼前，那就是应用扩展。顾名思义，应用扩展允许开发者扩展应用的自定义功能和内容，能够让用户在使用其他app时使用该项功能。你可以开发一个应用扩展来执行某些特定的任务，用户使用该扩展后就可以在多个上下文环境中执行该任务。比如说，你提供了一个能让用户把内容分
  • SQLServer实现无限级树结构 macroli oraclesqlSQL Server
    表结构如下： 数据库id path titlesort 排序 1 0 首页 0 2 0,1 新闻 1 3 0,2 JAVA 2 4 0,3 JSP 3 5 0,2,3 业界动态 2 6 0,2,3 国内新闻 1 创建一个存储过程来实现，如果要在页面上使用可以设置一个返回变量将至传过去   create procedure test as begin decla
  • Css居中div，Css居中img，Css居中文本，Css垂直居中div qiaolevip 众观千象学习永无止境每天进步一点点css
    /**********Css居中Div**********/ div.center { width: 100px; margin: 0 auto; } /**********Css居中img**********/ img.center { display: block; margin-left: auto; margin-right: auto; }
  • Oracle 常用操作(实用) 吃猫的鱼 oracle
    SQL>select text from all_source where owner=user and name=upper('&plsql_name');  SQL>select * from user_ind_columns where index_name=upper('&index_name');  将表记录恢复到指定时间段以前
  • iOS中使用RSA对数据进行加密解密 witcheryne iosrsaiPhoneobjective c
      RSA算法是一种非对称加密算法,常被用于加密数据传输.如果配合上数字摘要算法, 也可以用于文件签名. 本文将讨论如何在iOS中使用RSA传输加密数据. 本文环境 mac os  openssl-1.0.1j, openssl需要使用1.x版本, 推荐使用[homebrew](http://brew.sh/)安装. Java 8 RSA基本原理 RS
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他