采蜜蜂的小冬菇
采蜜蜂的小冬菇

普通轮播图制作

制作思路：

需要一个banner图自动轮流播放图片，下方的小按钮也要跟着轮播图动，然后鼠标进入图片框的时候图片就会暂停播放，鼠标离开就会继续播放。

要用到的知识：

  • appendChild() 方法可向节点的子节点列表的末尾添加新的子节点。
  • cloneNode() 方法可创建指定的节点的精确拷贝。若为itm=cloneNode(true);则将对象复制一份给
    itm，若为false，复制一个空的对象给itm。
  • document.createElement(nodename)创建一个元素。
  • createTextNode() 创建一个文本节点元素。
  • setInterval() 方法可按照指定的周期（以毫秒计）来调用函数或计算表达式。会不停地调用函数，直到 clearInterval()
    被调用或窗口被关闭。由 setInterval() 返回的 ID 值可用作 clearInterval()
    方法的参数。如果你只想执行一次可以使用 setTimeout() 方法。 语法： setInterval(code,
    milliseconds); setInterval(function, milliseconds, param1, param2,
    …) 参数 描述 code/function 必需。要调用一个代码串，也可以是一个函数。
    milliseconds 必须。周期性执行或调用 code/function 之间的时间间隔，以毫秒计。 param1, param2,
    … 可选。 传给执行函数的其他参数（IE9 及其更早版本不支持该参数）。

代码：


<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>title>
    <style>
        *{margin:0;padding:0;}

        /*轮播图*/
        .banner{width:500px;height:250px;margin:50px auto;border:1px solid #bbbbbb;overflow: hidden;}
        ul{width:2500px;height:250px;position:relative;}
        .ulan{transform:translatex(0px);transition: transform .5s ease-in-out;}
        ul>li{width:500px;height:250px;list-style: none;float: left;}
        ul>li>img{width:500px;height:250px;}

        /*轮播小红点*/
        #btn{position:relative;left:50%;margin-left:-40px;bottom:20px;}
        #btn>li{border:1px solid #FFFFFF;width:8px;height:8px;border-radius:50%;float:left;margin-right:8px;}
        .check{background-color:#f10215;}
    style>
head>
<body>
<div class="banner">
    <ul id="lunbotu" class="ulan">
        <li><img src="./image/3.jpg" alt=""/>li>
        <li><img src="./image/2.jpg" alt=""/>li>
        <li><img src="./image/5.jpg" alt=""/>li>
        <li><img src="./image/1.jpg" alt=""/>li>
        <li><img src="./image/4.jpg" alt=""/>li>
    ul>
    <ul id="btn">
        <li class="check">li>
        <li>li>
        <li>li>
        <li>li>
        <li>li>
    ul>
div>
<script>
    var time=null;
    var allpage=5;
    var ulan=document.getElementsByClassName("ulan");
    var speed=1500;
    var count=0;/*记录当前图片*/
    var ulele=document.querySelector("#lunbotu");
    var btnturn=document.querySelector("#btn");
    var nowpage=0;


    /*复制ul的第一个元素加在ul之后，帮助自然切换*/
    ulele.appendChild(ulele.children[0].cloneNode(true));
    ulele.style.width=ulele.children.length*500+"px";

    //定义轮播动画
    function lunbo(){
        //判断是否具有过渡类，没有就添加
        if(!ulele.classList.contains("ulan")){
            ulele.classList.add("ulan");
        }
        count++;
        ulele.style.transform="translatex("+(-count*500)+"px)";
        nowpage=count;
        timer();
        btnColor();

    }
    allan();
    function allan(){
        time=setInterval(function(){
            lunbo();
        },speed)
    }


    //鼠标进入图片暂停
    ulan.onmouseenter=function(){
        clearInterval(time);
        console.log(1);
    }
    ulan.onmouseleave=function(){
        allan();
    }

    //设置循环计时器
    function timer(){
        setTimeout(function(){
            if(count>=ulele.children.length-1){
                //到达最后一张图时，将数据清零，重新进行循环
                count=0;
                //移除类
                ulele.classList.remove("ulan");
                ulele.style.transform = "translatex(0px)";
            }
        },500)
    }

    //定义轮播小按钮
    function btnColor(){
        if (nowpage>=1&&nowpage<allpage){
            btnturn.children[nowpage-1].classList.remove("check");
            btnturn.children[nowpage].classList.add("check");
        }
        else {
            nowpage=0;
            btnturn.children[allpage-nowpage-1].classList.remove("check");
            btnturn.children[nowpage].classList.add("check");
        }
    }

    /*定义一个计时器实现图片轮播*/


script>
body>
html>

心得：

现在自己最大的问题就还是基础知识不牢靠，做起来异常非常的慢，本次耗费最长时间的是轮播图动画尾页与第一页切换问题，以后多看。

待解决问题：

1、点击下方小btn的时候，图片切换到相对应的页数。
2、鼠标进入banner图的时候，动画未发生暂停。

你可能感兴趣的:(小案例)

  • 分享Python7个爬虫小案例（附源码） 人工智能-猫猫 爬虫python开发语言
    在这篇文章中，我们将分享7个Python爬虫的小案例，帮助大家更好地学习和了解Python爬虫的基础知识。以下是每个案例的简介和源代码：1.爬取豆瓣电影Top250这个案例使用BeautifulSoup库爬取豆瓣电影Top250的电影名称、评分和评价人数等信息，并将这些信息保存到CSV文件中。importrequestsfrombs4importBeautifulSoupimportcsv#请求U
  • 不知道天气咋样？一起用Python爬取天气数据分析告诉你 Dragon少年 Pythonpython爬虫图表可视化
    前言今天我们分享一个小案例，获取天气数据，进行可视化分析，带你直观了解天气情况！一、核心功能设计总体来说，我们需要先对中国天气网中的天气数据进行爬取，保存为csv文件，并将这些数据进行可视化分析展示。拆解需求，大致可以整理出我们需要分为以下几步完成：通过爬虫获取中国天气网7.20-7.21的降雨数据，包括城市，风力方向，风级，降水量，相对湿度，空气质量。对获取的天气数据进行预处理，分析河南的风力等
  • 用SpringBoot做一个web小案例环境搭建 只恨天高 Java代码笔记springbootjava后端
    前面我讲了四部分内容：springboot入门，springboot的配置相关知识点，springboot的视图模板引擎，springboot整合持久层框架有了这些知识点，我们就可以来完成一个相对功能完整的增删改查的小案例了，这个案例我们把以前讲JavaWeb入门课程中的哪个例子重新写一遍，基本功能：登录，用户列表显示，用户信息的增删改查，用户的模糊查询等，选用的技术由springboot2.0.
  • 小白快速上手React 看这篇就够了！！（基础篇） 一朵好运莲 react.js前端前端框架
    本篇可以快速了解React的基础语法，便于遗忘时快速复习，里面的小案例通俗易懂，没有废话，只有简单、简单、还是简单！目录一、为什么要学React？二、React入门三、JSX语法1、使用JSX创建元素2、为什么在脚手架中可以使用JSX语法3、嵌入JS表达式4、JS条件渲染5、JS列表渲染6、样式处理四、React组件1、函数创建组件2、类组件3、抽离成单独的JS文件五、React事件处理1、事件绑
  • 3 小时精通 Python 玩转 Excel：自动化办公实战案例大揭秘 七七知享 Pythonexcel自动化python办公爬虫运维人工智能
    在当今快节奏的办公环境下，掌握高效的办公技能成为提升工作效率的关键。Python作为一门强大且易于上手的编程语言，在自动化办公领域发挥着巨大的作用，尤其是在处理Excel数据方面。你是否渴望摆脱繁琐重复的Excel操作，让电脑自动帮你完成数据处理任务？现在，只需要3小时，就能学会用Python处理Excel及实现各种自动化办公小案例，大幅提升工作效率。接下来，让我们一同开启这趟神奇的Python自
  • Django系列教程（5）——Django模型详解 l软件定制开发工作室 Django教程django
    目录模型定义小案例模型的组成模型的字段基础字段关系字段on_delete删除选项related_name选项模型的META选项模型的方法标准方法示例一：自定义方法示例二：自定义Manager方法完美的高级Django模型示例小结Model(模型)简而言之即数据模型，是一个Django应用的核心。模型不是数据本身（比如数据表里的数据),而是抽象的描述数据的构成和逻辑关系。每个Django的模型(mo
  • Orleans7.0 游戏服务器全栈开发实战 unity
    本课程目标是从零开始搭建一套基于微软Orleans和DotNetty开源方案的游戏服务器框架，框架遵守Actor模型，可以充分利用多核，方便水平扩展。并且使用.NET平台，开发和部署都非常便捷。为了演示功能，也实现了一个简单的Unity客户端框架，最后使用这个框架实现了一个井字棋的对战小案例，来教会大家学以致用。这个案例演示了如何登录、开房间、匹配、对战、结算以及断线重连等一系列回合制游戏的关键节
  • python曲线回归小案例教程 jackispy python回归开发语言
    一、曲线回归的定义曲线回归是一种统计方法，用于建立自变量（独立变量）和因变量（依赖变量）之间的非线性关系模型。与线性回归不同，线性回归假设自变量和因变量之间的关系是线性的，即可以通过一条直线来描述数据点的趋势；而曲线回归则允许这种关系是非线性的，可能表现为曲线、抛物线、指数、对数或其他复杂的数学形式。其主要特征如下：非线性关系：曲线回归适用于那些不能用直线来充分描述的数据关系。它允许模型以曲线形式
  • 【Python数据分析五十个小案例】使用自然语言处理（NLP）技术分析 Twitter 情感 小馒头学python python数据分析自然语言处理
    博客主页：小馒头学python本文专栏:Python爬虫五十个小案例专栏简介：分享五十个Python爬虫小案例项目简介什么是情感分析情感分析（SentimentAnalysis）是文本分析的一部分，旨在识别文本中传递的情感信息，例如正面、负面或中立情绪。为什么选择Twitter数据数据丰富：Twitter上每天产生数百万条推文，内容多样。即时性：适合实时分析。公开可用：提供API可轻松访问。NLP
  • Vue.js 新手必看：5个趣味小案例快速理解数据绑定原理 云资社 VUEvue.js前端javascript
    Vue.js是一个渐进式JavaScript框架，用于构建用户界面。其核心特性之一是数据绑定，它允许开发者通过简单的声明式语法将数据与DOM元素绑定在一起。这种双向数据绑定机制使得数据更新和视图更新变得非常直观和高效。本文将通过5个趣味小案例，帮助Vue.js新手快速理解数据绑定的原理和实现方式。案例1：简单的文本绑定目标将输入框中的内容实时显示在页面上。实现代码Vue数据绑定-文本绑定输入框内容
  • 微信小程序开发学习笔记——3.6【小案例】熟练使用事件与数据绑定取随机值 Qy_cm 小程序开发学习笔记微信小程序学习笔记
    >>跟着b站up主“咸虾米_”学习微信小程序开发中，把学习记录存到这方便后续查找。课程连接：https://www.bilibili.com/video/BV19G4y1K74d?p=20点击时模块颜色发生改变，并产生随机数。一、代码event.wxss中添加如下代码.box{margin:50rpx;width:200rpx;height:200rpx;background:pink;color
  • python中yield的用法详解——最简单，最清晰的解释 未末0902 pythonpythonpycharm爬虫
    python-迭代器与生成器-笔记1前言一、什么是迭代器与生成器?1.可迭代对象2.可迭代对象有哪些?3.迭代器二、什么是列表推导式?1.列表推导式;2.yield关键-->生成器函数使用生成器实现斐波拉契数列手动关闭当前生成器，关闭之后不能再继续生成值*3.小案例:总结前言提示：这里可以添加本文要记录的大概内容：提示：以下是本篇文章正文内容，下面案例可供参考一、什么是迭代器与生成器?1.可迭代对
  • Orleans7.0 游戏服务器全栈开发实战 unity
    本课程目标是从零开始搭建一套基于微软Orleans和DotNetty开源方案的游戏服务器框架，框架遵守Actor模型，可以充分利用多核，方便水平扩展。并且使用.NET平台，开发和部署都非常便捷。为了演示功能，也实现了一个简单的Unity客户端框架，最后使用这个框架实现了一个井字棋的对战小案例，来教会大家学以致用。这个案例演示了如何登录、开房间、匹配、对战、结算以及断线重连等一系列回合制游戏的关键节
  • 分词实现小案例 CodingBrother 性能优化架构架构中文分词
    MySQL并不是一个专门设计用于处理自然语言处理（NLP）或文本分词的数据库，但可以通过一些方法和技巧实现基本的分词功能，尤其是在处理中文文本或其他语言的应用场景中。以下是一些在MySQL中实现分词的常用方案和设计策略。1.使用FULLTEXT索引MySQL提供了FULLTEXT索引，允许在文本字段上进行全文搜索。此功能可以在英文等语言中有效支持分词。创建FULLTEXT索引CREATETABLE
  • Python小案例：数字炸弹游戏（优化版） Marilynhom #Python基础案例python游戏windows
    优化内容上次所写的数字炸弹案例中所留了的bug：  a.两次死循环，其实可以只用一次的；☑  b.如果其中一个人输入的数据是无效的后游戏将会重新开始，规则上来讲是直接淘汰该玩家☑本次利用列表坐标name_Nub叠加，和一个continue就解决了，具体代码如下：#数字炸弹游戏#1、首先由用户输入一个范围猜取的范围初始值start_Value、end_Value和一个数字作为炸弹Bombs；star
  • Flutter学习案例分享-计数器小案例 Mr.L70517 Flutter案例学习flutter学习
    Flutter框架基础概念简介Widget,Element和RenderObject类型虽然Widget是开发人员创建和管理的，但Flutter框架会并行构建和管理另外两棵树，称为元素树和渲染对象树。这三种树用于构建用户画面（UI）并决定何时刷新他们。StatelessWidget这种widget不需要可变状态。最适合用于描述UI中永不可改的部分。StatefulWidget这种widget具有可
  • QT学习小案例 Liguopi666 qt学习
    dialog.h#ifndefDIALOG_H#defineDIALOG_H#include#include#include#include#includeQT_BEGIN_NAMESPACEnamespaceUi{classDialog;}QT_END_NAMESPACEclassDialog:publicQDialog{Q_OBJECTpublic:Dialog(QWidget*parent=
  • vue3实现搜索关键字高亮 前后端都会点儿 javascriptvue.js前端
    其实这个需求非常常见，平时用app、浏览网页时都能用到，那具体是怎么实现的？我做了小案例，先看下效果我们先梳理下这个需求获取搜索关键字，并过滤出符合条件的数据匹配出要高亮的关键字增加样式那其实关键点就在于怎么匹配，如何高亮？这里我们使用正则匹配，再用replace替换，replace的第二个参数也可以是函数，接受的值就是正则匹配到的值：constsearchKey=(val:string)=>{i
  • 【python爬虫入门教程13--selenium的自动点击 --小小案例分享】 重剑无锋1024 python爬虫selenium
    提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档《python爬虫入门教程12--selenium的安装与使用》selenium就是一个可以实现python自动化的模块，上次我们更新了如何安装以及它的语法。同时我也更新了如何用爬虫技术实现cookie免登录12306，再用selenium自动抢票。这个帖子主要是对selenium的一个语法讲解小案例，大家可以多运行试试。[免登录12
  • Linux xargs命令 fengyehongWorld Linuxlinux
    参考资料阮一峰-xargs命令教程xargsコマンド目录一.作用二.基本语法2.1-d指定分隔符2.2-p与-t选项2.3-L指定多少行作为一个命令行参数2.4-n指定将多少项作为参数2.5-I指定命令行参数占位符2.6--max-procs指定并行进程的数量三.小案例3.1文件删除3.2文件打包3.3文件移动3.4其他命令结合复杂用法一.作用⏹作用于不接收管道传参的命令，使其接受管道传来的标准输
  • 前端练习小项目——视觉冲击卡片 秋刀鱼不做梦 CSS前端学习htmlcsscss3vscode
    前言：前言：在学习完HTML和CSS之后，我们就可以开始做一些小项目了，本篇文章所讲的小项目为——视觉冲击卡片✨✨✨这里是秋刀鱼不做梦的BLOG✨✨✨想要了解更多内容可以访问我的主页秋刀鱼不做梦-CSDN博客先让我们看一下效果：那么我们如何去实现这样的小案例呢？在下文中我们对每一段重要的代码都进行了解释，读者可以根据注释对代码进行理解。1.HTML代码zjy这段HTML代码是一个基本的网页模板，展
  • canvas计时小案例 哈哈乐乐WXT
    前段时间看到某QQ群里有问这个效果怎么写，一时兴趣也研究了一下，写个小例子；效果基本实现了，代码也不是很完善，如实际操作还需更改；留着以后备用。效果图1.gifcss代码div{margin:0auto;margin-top:100px;background:#eee;width:500px;height:500px;text-align:center}canvas{margin:0auto;ma
  • 设计模式学习-简单的命令模式例子 一个不会码代码的小恐龙 设计模式学习命令模式unity
    上一章节介绍过了命令模式，这一篇文章就简单的做一个小案例来巩固学习搭建场景简单的搭建一个场景就行，随便准备一个物体放在场景中位置Reset一下即可。代码编写定义接口（或者抽象类）ICommand用来规范Command的行为。注意在命令模式中命令是桥接作用负责接受者和执行者之间的联调。所以一般会有很多的命令，每个命令都会有ICommand规范的方法同时也可以添加其他的方法。publicinterfa
  • 人定方能胜天 风追蓝天见海洋
    图片发自App书里讲到一个小案例很有趣，就是说，当供应18,000元和38,000元羽绒被的时候，38,000的高级羽绒被几乎无人问津。但是当推出了58,000的特级羽绒被之后，反而38,000的羽绒被销量一跃排到了第1位。这是因为，一开始只有两款产品的时候，顾客难以察觉38,000产品的价值，相比品质会更加关注价格便宜的产品。但如果有了三件产品，顾客就会进行挑选，在品质和价格之间作出选择，最后反
  • 云上运维案例分享 LinkSLA 云计算1024程序员节
    一、背景当下，越来越多的企业选择业务数据上云。不可否认数据上云后，增强了扩展的便利性，但是同时也提高了运维管理的难度。如何实现云上业务管理，是运维工程师们面临的新问题。LinkSLA智能运维管家，不仅提供私有云的运维管理，同时为公有云上业务系统提供了统一运维平台。方便IT运维工程师实时掌握公有云上系统的运行状况。二、案例下面我给大家分享一个云上运维监控的小案例：1、夜间重启在5月底，某三甲医院接入
  • django学习入门系列之第四点《javascript初了解》 铁匠匠匠 djangodjango学习javascript笔记开源python前端框架
    文章目录往期回顾javascript是一门编程语言，浏览器就是相当于这门语言的解释性DOM和BOM相当于这门语言内置的模块例如:Python的random，json模块JQuery可以理解为编程语言的第三方模块例如:openpyxl，requestsjavascript意义让程序实现一些动态的效果小案例Title.menus{width:200px;border:1pxsolidred;}.men
  • 情绪管理的修行之路第11篇 張濤
    情绪管理的修行之路（学习笔记第11篇）2021.1.16继续学习清华大学心理学系彭凯平教授的情绪管理课程，今天咱们探讨一下害羞和羞怯的情绪体验。【篇首语】：各位书友晚上好，在分享今天读后感之前先和大家分享一个小案例，相信对孩子是幼儿园和小学的家长朋友能有点提示。当我孩子进入初中阶段开始学习时，我请教过她一个问题，我是这样问的：你们班现在参加学校活动的主持人有没有新的面孔，她的回答让我陷入沉思！她说
  • 兰德系数（Rand Index） J@u1 日常心得（小笔记）图像分割聚类指标评价系数
    NOTE：1、一个小案例说明兰德系数是如何怎么计算的。很详细！2、关于兰德系数的讨论：https://stats.stackexchange.com/questions/89030/rand-index-calculation注意：+--------------------------------+--------------------------------------+|TP:|FN:||S
  • JavaScript设计模式：十、适配器模式 流水吾情 javascript设计模式适配器模式
    十、适配器模式一、概述适配器模式是设计模式行为型模式中的一种模式；定义：适配器用来解决两个已有接口之间不匹配的问题，它并不需要考虑接口是如何实现，也不用考虑将来该如何修改；适配器不需要修改已有接口，就可以使他们协同工作；1.最小案例vargoogleMap={show:function(){console.log('开始渲染谷歌地图');}};varbaiduMap={display:functi
  • Spring Security 可以同时对接多个用户表？ _江南一点雨
    @[toc]这个问题也是来自小伙伴的提问：image其实这个问题有好几位小伙伴问过我，但是这个需求比较冷门，我一直没写文章。其实只要看懂了松哥前面的文章，这个需求是可以做出来的。因为一个核心点就是ProviderManager，搞懂了这个，其他的就很容易了。今天松哥花一点时间，来和大家分析一下这个问题的核心，同时通过一个小小案例来演示一下如何同时连接多个数据源。1.原理1.1Authenticat
  • Linux的Initrd机制 被触发 linux
    Linux 的 initrd 技术是一个非常普遍使用的机制，linux2.6 内核的 initrd 的文件格式由原来的文件系统镜像文件转变成了 cpio 格式，变化不仅反映在文件格式上， linux 内核对这两种格式的 initrd 的处理有着截然的不同。本文首先介绍了什么是 initrd 技术，然后分别介绍了 Linux2.4 内核和 2.6 内核的 initrd 的处理流程。最后通过对 Lin
  • maven本地仓库路径修改 bitcarter maven
    默认maven本地仓库路径：C:\Users\Administrator\.m2 修改maven本地仓库路径方法：     1.打开E:\maven\apache-maven-2.2.1\conf\settings.xml     2.找到        
  • XSD和XML中的命名空间 darrenzhu xmlxsdschemanamespace命名空间
    http://www.360doc.com/content/12/0418/10/9437165_204585479.shtml http://blog.csdn.net/wanghuan203/article/details/9203621 http://blog.csdn.net/wanghuan203/article/details/9204337 http://www.cn
  • Java 求素数运算 周凡杨 java算法素数
    网络上对求素数之解数不胜数，我在此总结归纳一下，同时对一些编码，加以改进，效率有成倍热提高。 第一种：   原理: 6N(+-)1法         任何一个自然数，总可以表示成为如下的形式之一： 6N，6N+1，6N+2，6N+3，6N+4，6N+5 (N=0，1，2，…)   
  • java 单例模式 g21121 java
    想必单例模式大家都不会陌生，有如下两种方式来实现单例模式：   class Singleton { private static Singleton instance=new Singleton(); private Singleton(){} static Singleton getInstance() { return instance; }
  • Linux下Mysql源码安装 510888780 mysql
    1.假设已经有mysql-5.6.23-linux-glibc2.5-x86_64.tar.gz (1)创建mysql的安装目录及数据库存放目录       解压缩下载的源码包，目录结构，特殊指定的目录除外：           
  • 32位和64位操作系统 墙头上一根草 32位和64位操作系统
    32位和64位操作系统是指：CPU一次处理数据的能力是32位还是64位。现在市场上的CPU一般都是64位的，但是这些CPU并不是真正意义上的64 位CPU，里面依然保留了大部分32位的技术，只是进行了部分64位的改进。32位和64位的区别还涉及了内存的寻址方面，32位系统的最大寻址空间是2 的32次方= 4294967296（bit）= 4（GB）左右，而64位系统的最大寻址空间的寻址空间则达到了
  • 我的spring学习笔记10-轻量级_Spring框架 aijuans Spring 3
    一、问题提问：     → 请简单介绍一下什么是轻量级？     轻量级（Leightweight）是相对于一些重量级的容器来说的，比如Spring的核心是一个轻量级的容器，Spring的核心包在文件容量上只有不到1M大小，使用Spring核心包所需要的资源也是很少的，您甚至可以在小型设备中使用Spring。  
  • mongodb 环境搭建及简单CURD antlove WebInstallcurdNoSQLmongo
    一 搭建mongodb环境 1. 在mongo官网下载mongodb 2. 在本地创建目录 "D:\Program Files\mongodb-win32-i386-2.6.4\data\db" 3. 运行mongodb服务 [mongod.exe --dbpath "D:\Program Files\mongodb-win32-i386-2.6.4\data\
  • 数据字典和动态视图 百合不是茶 oracle数据字典动态视图系统和对象权限
    数据字典（data dictionary）是 Oracle 数据库的一个重要组成部分，这是一组用于记录数据库信息的只读（read-only）表。随着数据库的启动而启动,数据库关闭时数据字典也关闭   数据字典中包含   数据库中所有方案对象（schema object）的定义(包括表，视图，索引，簇，同义词，序列，过程，函数，包，触发器等等) 数据库为一
  • 多线程编程一般规则 bijian1013 javathread多线程java多线程
           如果两个工两个以上的线程都修改一个对象，那么把执行修改的方法定义为被同步的，如果对象更新影响到只读方法，那么只读方法也要定义成同步的。        不要滥用同步。如果在一个对象内的不同的方法访问的不是同一个数据，就不要将方法设置为synchronized的。
  • 将文件或目录拷贝到另一个Linux系统的命令scp bijian1013 linuxunixscp
    一.功能说明        scp就是security copy，用于将文件或者目录从一个Linux系统拷贝到另一个Linux系统下。scp传输数据用的是SSH协议，保证了数据传输的安全，其格式如下：        scp 远程用户名@IP地址：文件的绝对路径
  • 【持久化框架MyBatis3五】MyBatis3一对多关联查询 bit1129 Mybatis3
    以教员和课程为例介绍一对多关联关系，在这里认为一个教员可以叫多门课程，而一门课程只有1个教员教，这种关系在实际中不太常见，通过教员和课程是多对多的关系。   示例数据：   地址表：   CREATE TABLE ADDRESSES ( ADDR_ID INT(11) NOT NULL AUTO_INCREMENT, STREET VAR
  • cookie状态判断引发的查找问题 bitcarter formcgi
    先说一下我们的业务背景： 1.前台将图片和文本通过form表单提交到后台，图片我们都做了base64的编码，并且前台图片进行了压缩 2.form中action是一个cgi服务 3.后台cgi服务同时供PC，H5，APP 4.后台cgi中调用公共的cookie状态判断方法（公共的，大家都用，几年了没有问题） 问题：（折腾两天。。。。） 1.PC端cgi服务正常调用，cookie判断没
  • 通过Nginx,Tomcat访问日志(access log)记录请求耗时 ronin47
    一、Nginx通过$upstream_response_time $request_time统计请求和后台服务响应时间 nginx.conf使用配置方式： log_format main '$remote_addr - $remote_user [$time_local] "$request" ''$status $body_bytes_sent "$http_r
  • java-67- n个骰子的点数。 把n个骰子扔在地上，所有骰子朝上一面的点数之和为S。输入n，打印出S的所有可能的值出现的概率。 bylijinnan java
    public class ProbabilityOfDice { /** * Q67 n个骰子的点数 * 把n个骰子扔在地上，所有骰子朝上一面的点数之和为S。输入n，打印出S的所有可能的值出现的概率。 * 在以下求解过程中，我们把骰子看作是有序的。 * 例如当n=2时，我们认为（1，2）和（2，1）是两种不同的情况 */ private stati
  • 看别人的博客，觉得心情很好 Cb123456 博客心情
       以为写博客，就是总结，就和日记一样吧，同时也在督促自己。今天看了好长时间博客:    职业规划:    http://www.iteye.com/blogs/subjects/zhiyeguihua      android学习:    1.http://byandby.i
  • [JWFD开源工作流]尝试用原生代码引擎实现循环反馈拓扑分析 comsci 工作流
        我们已经不满足于仅仅跳跃一次，通过对引擎的升级，今天我测试了一下循环反馈模式，大概跑了200圈，引擎报一个溢出错误      在一个流程图的结束节点中嵌入一段方程，每次引擎运行到这个节点的时候，通过实时编译器GM模块，计算这个方程，计算结果与预设值进行比较，符合条件则跳跃到开始节点，继续新一轮拓扑分析，直到遇到
  • JS常用的事件及方法 cwqcwqmax9 js
    事件 描述 onactivate 当对象设置为活动元素时触发。 onafterupdate 当成功更新数据源对象中的关联对象后在数据绑定对象上触发。 onbeforeactivate 对象要被设置为当前元素前立即触发。 onbeforecut 当选中区从文档中删除之前在源对象触发。 onbeforedeactivate 在 activeElement 从当前对象变为父文档其它对象之前立即
  • 正则表达式验证日期格式 dashuaifu 正则表达式IT其它java其它
    正则表达式验证日期格式 function isDate(d){ var v = d.match(/^(\d{4})-(\d{1,2})-(\d{1,2})$/i); if(!v) { this.focus(); return false; } } <input value="2000-8-8" onblu
  • Yii CModel.rules() 方法 、validate预定义完整列表、以及说说验证 dcj3sjt126com yii
    public array rules () {return} array 要调用 validate() 时应用的有效性规则。 返回属性的有效性规则。声明验证规则，应重写此方法。 每个规则是数组具有以下结构：array('attribute list', 'validator name', 'on'=>'scenario name', ...validation
  • UITextAttributeTextColor = deprecated in iOS 7.0 dcj3sjt126com ios
    In this lesson we used the key "UITextAttributeTextColor" to change the color of the UINavigationBar appearance to white. This prompts a warning "first deprecated in iOS 7.0." Ins
  • 判断一个数是质数的几种方法 EmmaZhao Mathpython
    质数也叫素数，是只能被1和它本身整除的正整数，最小的质数是2，目前发现的最大的质数是p=2^57885161-1【注1】。 判断一个数是质数的最简单的方法如下： def isPrime1(n): for i in range(2, n): if n % i == 0: return False return True 但是在上面的方法中有一些冗余的计算，所以
  • SpringSecurity工作原理小解读 坏我一锅粥 SpringSecurity
      SecurityContextPersistenceFilter   ConcurrentSessionFilter   WebAsyncManagerIntegrationFilter   HeaderWriterFilter   CsrfFilter   LogoutFilter   Use
  • JS实现自适应宽度的Tag切换 ini JavaScripthtmlWebcsshtml5
    效果体验：http://hovertree.com/texiao/js/3.htm   该效果使用纯JavaScript代码，实现TAB页切换效果，TAB标签根据内容自适应宽度，点击TAB标签切换内容页。 HTML文件代码： <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"
  • Hbase Rest API : 数据查询 kane_xie RESThbase
    hbase（hadoop）是用java编写的，有些语言（例如python）能够对它提供良好的支持，但也有很多语言使用起来并不是那么方便，比如c#只能通过thrift访问。Rest就能很好的解决这个问题。Hbase的org.apache.hadoop.hbase.rest包提供了rest接口，它内嵌了jetty作为servlet容器。   启动命令：./bin/hbase rest s
  • JQuery实现鼠标拖动元素移动位置（源码+注释） 明子健 jqueryjs源码拖动鼠标
    欢迎讨论指正！   print.html代码： <!DOCTYPE html> <html> <head> <meta http-equiv=Content-Type content="text/html;charset=utf-8"> <title>发票打印</title> &l
  • Postgresql 连表更新字段语法 update qifeifei PostgreSQL
    下面这段sql本来目的是想更新条件下的数据，可是这段sql却更新了整个表的数据。sql如下： UPDATE tops_visa.visa_order SET op_audit_abort_pass_date = now() FROM tops_visa.visa_order as t1 INNER JOIN tops_visa.visa_visitor as t2 ON t1.
  • 将redis,memcache结合使用的方案? tcrct rediscache
    公司架构上使用了阿里云的服务，由于阿里的kvstore收费相当高，打算自建，自建后就需要自己维护，所以就有了一个想法，针对kvstore(redis)及ocs(memcache)的特点，想自己开发一个cache层，将需要用到list，set，map等redis方法的继续使用redis来完成，将整条记录放在memcache下，即findbyid，save等时就memcache，其它就对应使用redi
  • 开发中遇到的诡异的bug wudixiaotie bug
    今天我们服务器组遇到个问题： 我们的服务是从Kafka里面取出数据，然后把offset存储到ssdb中，每个topic和partition都对应ssdb中不同的key，服务启动之后，每次kafka数据更新我们这边收到消息，然后存储之后就发现ssdb的值偶尔是-2,这就奇怪了，最开始我们是在代码中打印存储的日志，发现没什么问题，后来去查看ssdb的日志，才发现里面每次set的时候都会对同一个key
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他