starof
starof

css3实现循环执行动画，且动画每次都有延迟

一、最终效果

 

需求：gift图片的小动画每隔2s执行一次。

需求就一句话，我们看一下实现过程。

二、实现过程

1、网页结构

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    a {
        display: inline-block;
        background-color: #cc2222;
        text-decoration: none;
        color: #fff;
        font-size: 14px;
        padding: 10px 12px;
        width: 100px;
        position: relative;
    }
    
    .ico {
        position: absolute;
        width: 14px;
        height: 16px;
        background: url(images/ico.png) no-repeat center;
        background-size: 100%;
        position: absolute;
        top: 4px;
        right: 27px;
    }
    </style>
</head>

<body>
    <nav>
        <a href="javascript:;" class="box">
                            一元夺宝 
                            <div class="ico"></div>
                        </a>
    </nav>
</body>

</html>
View Code

2、原始动画

原始动画效果为：鼠标hover上去出现动画。

动画样式如下：

/*动画*/
    .ico:hover{
    -webkit-animation: Tada 1s both;
    -moz-animation: Tada 1s both;
    -ms-animation: Tada 1s both;
    animation: Tada 1s both
}
/*浏览器兼容性部分略过*/
@keyframes Tada {
    0% {
        transform: scale(1);
        transform: scale(1)
    }

    10%,20% {
        transform: scale(0.9) rotate(-3deg);
        transform: scale(0.9) rotate(-3deg)
    }

    30%,50%,70%,90% {
        transform: scale(1.1) rotate(3deg);
        transform: scale(1.1) rotate(3deg)
    }

    40%,60%,80% {
        transform: scale(1.1) rotate(-3deg);
        transform: scale(1.1) rotate(-3deg)
    }

    100% {
        transform: scale(1) rotate(0);
        transform: scale(1) rotate(0)
    }
}

效果：鼠标hover上去gift图片会动一动。

3、实现变化后的需求

需求变动，要求不再是hover上去展示动画，而是每隔2s展示一次动画。

思路：不需要hover上去出现动画，就把hover去掉，每隔2s显示一次动画，很容易想到延迟2s,然后动画一直执行。

此时相关样式变成：

.ico{
-webkit-animation: Tada 1s  2s both infinite;
-moz-animation: Tada 1s 2s both infinite;
-ms-animation: Tada 1s 2s both infinite;
animation: Tada 1s 2s both infinite;
}

但是显示的效果是：页面加载第一次出现动画会延迟2s，后面的动画将不再有延迟。如下，这是不符合需求的。

为了看出效果，下图为延迟6s的效果。

此时换种思路，不要延迟执行动画，而是动画的效果本身就是前2s元素不动，后1s是元素动，然后一直循环执行。 这样在视觉上就会看起来是延迟2s执行1s动画。

计算一下，原来的百分比节点变成了多少。

css3实现循环执行动画，且动画每次都有延迟_第1张图片

将动画总时长变成3s，用计算出的百分比替换原来的百分比，代码如下：

.ico{
    -webkit-animation: Tada 3s both infinite;
    -moz-animation: Tada 3s both infinite;
    -ms-animation: Tada 3s both infinite;
    animation: Tada 3s both infinite;
}
@keyframes Tada {
    0% {
        transform: scale(1);
        transform: scale(1)
    }

    70%,73%{
        transform: scale(0.9) rotate(-3deg);
        transform: scale(0.9) rotate(-3deg)
    }

    77%,83%,90%,97%  {
        transform: scale(1.1) rotate(3deg);
        transform: scale(1.1) rotate(3deg)
    }

    80%,87%,93%{
        transform: scale(1.1) rotate(-3deg);
        transform: scale(1.1) rotate(-3deg)
    }

    100% {
        transform: scale(1) rotate(0);
        transform: scale(1) rotate(0)
    }
}

效果就是我们期望的了。

完整代码如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>demo of starof</title>
    <style>
    a {
        display: inline-block;
        background-color: #cc2222;
        text-decoration: none;
        color: #fff;
        font-size: 14px;
        padding: 10px 12px;
        width: 100px;
        position: relative;
    }
    
    .ico {
        position: absolute;
        width: 14px;
        height: 16px;
        background: url(images/ico.png) no-repeat center;
        background-size: 100%;
        position: absolute;
        top: 4px;
        right: 27px;
    }
    /*动画*/
    .ico{
    -webkit-animation: Tada 3s both infinite;
    -moz-animation: Tada 3s both infinite;
    -ms-animation: Tada 3s both infinite;
    animation: Tada 3s both infinite;
}
@-webkit-keyframes Tada {
    0% {
        -webkit-transform: scale(1);
        transform: scale(1)
    }

    70%,73% {
        -webkit-transform: scale(0.9) rotate(-3deg);
        transform: scale(0.9) rotate(-3deg)
    }

    77%,83%,90%,97% {
        -webkit-transform: scale(1.1) rotate(3deg);
        transform: scale(1.1) rotate(3deg)
    }

    80%,87%,93% {
        -webkit-transform: scale(1.1) rotate(-3deg);
        transform: scale(1.1) rotate(-3deg)
    }

    100% {
        -webkit-transform: scale(1) rotate(0);
        transform: scale(1) rotate(0)
    }
}

@-moz-keyframes Tada {
    0% {
        -moz-transform: scale(1);
        transform: scale(1)
    }

    70%,73% {
        -moz-transform: scale(0.9) rotate(-3deg);
        transform: scale(0.9) rotate(-3deg)
    }

    77%,83%,90%,97% {
        -moz-transform: scale(1.1) rotate(3deg);
        transform: scale(1.1) rotate(3deg)
    }

    80%,87%,93%{
        -moz-transform: scale(1.1) rotate(-3deg);
        transform: scale(1.1) rotate(-3deg)
    }

    100% {
        -moz-transform: scale(1) rotate(0);
        transform: scale(1) rotate(0)
    }
}

@-ms-keyframes Tada {
    0% {
        -ms-transform: scale(1);
        transform: scale(1)
    }

    70%,73% {
        -ms-transform: scale(0.9) rotate(-3deg);
        transform: scale(0.9) rotate(-3deg)
    }

    77%,83%,90%,97% {
        -ms-transform: scale(1.1) rotate(3deg);
        transform: scale(1.1) rotate(3deg)
    }

    80%,87%,93% {
        -ms-transform: scale(1.1) rotate(-3deg);
        transform: scale(1.1) rotate(-3deg)
    }

    100% {
        -ms-transform: scale(1) rotate(0);
        transform: scale(1) rotate(0)
    }
}

@keyframes Tada {
    0% {
        transform: scale(1);
        transform: scale(1)
    }

    70%,73%{
        transform: scale(0.9) rotate(-3deg);
        transform: scale(0.9) rotate(-3deg)
    }

    77%,83%,90%,97%  {
        transform: scale(1.1) rotate(3deg);
        transform: scale(1.1) rotate(3deg)
    }

    80%,87%,93%{
        transform: scale(1.1) rotate(-3deg);
        transform: scale(1.1) rotate(-3deg)
    }

    100% {
        transform: scale(1) rotate(0);
        transform: scale(1) rotate(0)
    }
}

    </style>
</head>

<body>
    <nav>
        <a href="javascript:;" class="box">
                            一元夺宝 
                            <div class="ico"></div>
        </a>
    </nav>
</body>

</html>
View Code

 

本文只是介绍一种思路，关于动画各个参数详情可参考：

css3中变形与动画（一）

css3中变形与动画（二）

css3中变形与动画（三）

 

本文作者starof,因知识本身在变化，作者也在不断学习成长，文章内容也不定时更新，为避免误导读者，方便追根溯源，请诸位转载注明出处：http://www.cnblogs.com/starof/p/5443445.html有问题欢迎与我讨论，共同进步。

你可能感兴趣的:(css3实现循环执行动画，且动画每次都有延迟)

  • 构建四则运算解析器：字符串处理与计算逻辑实战 大熊小清新
    本文还有配套的精品资源，点击获取简介：四则运算解析器是将包含四则运算符号的字符串表达式转化为可执行计算的程序。它对编程初学者而言是理解编程逻辑和语法分析的基础。通过理解四则运算的优先级规则，实现输入处理、词法分析、语法分析和计算步骤，可以采用递归下降解析或堆栈解析等方法。本解析器的实现涉及字符串处理、数据结构的运用，有助于学习者掌握编程语言的底层工作方式，提升编程技能和问题解决能力。1.四则运算解
  • 提示词编程语言设计艺术探索 AI天才研究院 计算AI人工智能与大数据AI大模型企业级应用开发实战javapythonjavascriptkotlingolang架构人工智能大厂程序员硅基计算碳基计算认知计算生物计算深度学习神经网络大数据AIGCAGILLM系统架构设计软件哲学Agent程序员实现财富自由
    《提示词编程语言设计艺术探索》关键词：提示词编程语言，设计艺术，编程语言设计，核心算法，实例分析，项目实战摘要：本文旨在深入探讨提示词编程语言的设计艺术，从基础概念到核心算法，再到实际应用和未来趋势，全面解析这一领域的关键技术和设计理念。通过具体的实例分析和项目实战，帮助读者更好地理解和掌握提示词编程语言的设计与实现。引言与概述1.1提示词编程语言的背景和重要性提示词编程语言（Prompt-Bas
  • C# 中 EventWaitHandle 实现多进程状态同步的深度解析 Leon@Lee c#开发语言
    在现代软件开发中，多进程应用场景日益普遍。无论是分布式系统、微服务架构，还是传统的客户端-服务器模型，进程间的状态同步都是一个关键挑战。C#提供了多种同步原语，其中EventWaitHandle是一个强大的工具，特别适合处理跨进程的同步需求。本文将深入探讨EventWaitHandle的工作原理、使用场景及最佳实践。一、EventWaitHandle基础原理EventWaitHandle是.NET
  • vue-cron: Cron表达式UI组件开发指南 刘通双Elsie
    vue-cron:Cron表达式UI组件开发指南项目地址:https://gitcode.com/gh_mirrors/vu/vue-cron项目介绍vue-cron是一个基于Vue框架设计的cron表达式UI组件库.该项目特别适用于那些需要在前端界面中提供cron表达式编辑功能的应用场景。通过简洁直观的接口，开发者可以轻松地将此组件集成到他们的Vue应用程序中，以实现对定时任务计划的精确控制。该
  • 计算机考研408真题解析（2024-34 二进制数字调制方法深度解析与FSK双频载波实现）
    【良师408】计算机考研408真题解析（2024-34二进制数字调制方法深度解析与FSK双频载波实现）传播知识，做懂学生的好老师1.【哔哩哔哩】（良师408）2.【抖音】（良师408）goodteacher4083.【小红书】（良师408）4.【CSDN】（良师408）goodteacher4085.【微信】（良师408）goodteacher408特别提醒：【良师408】所收录真题根据考生回忆整
  • 推荐使用ReactJS Cron：一款强大且灵活的定时任务编辑器
    推荐使用ReactJSCron：一款强大且灵活的定时任务编辑器react-js-cronAReactcroneditorbuiltwithantd项目地址:https://gitcode.com/gh_mirrors/re/react-js-cron项目简介ReactJSCron是一个基于React和AntDesign构建的高效能定时任务编辑组件。它提供了友好的用户界面，帮助开发者轻松创建和管理c
  • LabVIEW液压系统远程监控 LabVIEW开发 LabVIEW开发案例LabVIEW开发案例
    利用LabVIEW开发构建注塑机合模液压系统远程监控平台，实现设备状态实时监测、数据交互与远程控制。应用场景工业自动化产线监控：在大型注塑生产车间，实时监测多台注塑机合模液压系统的压力、流量、位移等关键参数，支持产线集中管理。设备远程维护：工程师可通过VPN网络远程访问现场设备，实现故障诊断、参数调整，减少现场维护成本与停机时间。无人值守生产场景：配合自动化上下料系统，实现24小时连续生产监控，异
  • Golang cron 定时任务完全指南：从入门到精通 Golang编程笔记 Golang编程笔记Golang开发实战golangwpf开发语言ai
    Golangcron定时任务完全指南：从入门到精通关键词：Golang、cron、定时任务、任务调度、并发处理、分布式任务、最佳实践摘要：本文将全面介绍Golang中实现cron定时任务的各个方面，从基础概念到高级应用，涵盖标准库使用、第三方库对比、并发处理、分布式任务调度等核心内容。我们将通过详细的代码示例、架构图解和实际应用场景分析，帮助开发者掌握在Golang中构建可靠、高效的定时任务系统的
  • 【C++】命令模式
    目录一、模式核心概念与结构二、C++实现示例：遥控器与家电控制三、命令模式的关键特性四、应用场景五、命令模式与其他设计模式的关系六、C++标准库中的命令模式应用七、优缺点分析八、实战案例：数据库事务命令九、实现注意事项如果这篇文章对你有所帮助，渴望获得你的一个点赞！命令模式（CommandPattern）是一种【行为型】设计模式，它将请求封装为对象，从而使你可以用不同的请求对客户端进行参数化，对请
  • 力扣网C语言编程题：在数组中查找目标值位置 魏劭 逻辑编程题C语言算法c语言leetcode
    一.简介本文记录一下力扣网上涉及数组的问题：排序数组中查找目标值的位置。主要以C语言实现。二.力扣网C语言编程题：在数组中查找目标值位置题目：在排序数组中查找元素的第一个和最后一个位置给你一个按照非递减顺序排列的整数数组nums，和一个目标值target。请你找出给定目标值在数组中的开始位置和结束位置。如果数组中不存在目标值target，返回[-1,-1]。你必须设计并实现时间复杂度为O(logn
  • 力扣网C语言编程题：接雨水（双指针法） 魏劭 逻辑编程题C语言c语言leetcode算法
    一.简介前面文章是以动态规划方法实现的，文章如下：力扣网C语言编程题：接雨水（动态规划实现）-CSDN博客本文继续针对力扣网的接雨水问题，以另一种解题思路（双指针）以C语言实现和Python实现。二.力扣网C语言编程题：接雨水（双指针法）题目：接雨水给定n个非负整数表示每个宽度为1的柱子的高度图，计算按此排列的柱子，下雨之后能接多少雨水。示例2：输入：height=[4,2,0,3,2,5]输出：
  • vue3 实现文件上传 编程（变成）小辣鸡 vuevue
    1、上传文件html上传文件        将文件拖到此处，或点击上传只支持pdf、doc、docx、png、jpg提交import{ref,reactive}from'vue'import{uploadImg}from'@/api/common.js';letuploadFile=ref(false);letfileList=ref([]);constupload=(val)=>{fileLis
  • element ui plus 找不到bodyWrapper实现两个表格同步滚动的方法。 不二家大哥哥 前端vue.jsjavascript
    mounted(){this.dom1=this.$refs.table1;this.dom2=this.$refs.table2;this.dom1.$el.addEventListener("mouseover",(e)=>{this.flag=false;//此处的flag判断是否主动滚动了当前tablethis.dom2.$el.addEventListener("mouseover",(
  • css同心圆扩散 weixin_43966308 css布局
    同心圆扩散要点：定位：每个圆形定位要相同，因为为了达到同心圆扩散的效果有一个定宽定高的圆形，剩下的圆形通过缩放和透明的改变而改变，因此必须保证定位的位置相同为了达到垂直居中的效果，可以通过transfrom(-50%,-50%),但是因为需要通过transfrom的缩放来达到扩散的效果，因此会发现之前水平垂直的效果没有达到，因为被动画中的trasnfrom缩放的语句覆盖了可以通过margin负值宽
  • el-table特殊表头样式 不懂代码的孩子 随笔vue.jsjavascriptelementui
    el-table特殊表头样式实现表头是按钮
  • 基于SIP的视频会议系统研究 weixin_33921089 数据库
    摘要根据IETFSIPPING工作组提出的集中式会议模型，设计并实现了基于SIP的视频会议系统。该系统各部分可分别设计，具有良好的可扩展性。详细介绍了此系统的结构和工作原理。关键词SIP视频会议会议控制服务器会场控制媒体服务器0前言近几年来，随着计算机技术、通信技术和互联网技术的飞速发展，视频会议的应用范围正逐渐从传统的专业领域、大型企业等高端用户向中小企业等普通用户和个人用户拓展。据有关机构的分
  • 【Html实现“心形日出”（附效果+源代码）】| JavaScript面试题：解释一下异步编程中的回调函数、Promise和Async/Await的概念。它们有什么区别？ 追光者♂ html5css3心形日出前端特效JS面试题PromiseAsync/Await
    风会带走你曾经存在过的证明。——虞姬作者主页：追光者♂个人简介：[1]计算机专业硕士研究生[2]2023年城市之星领跑者TOP1(哈尔滨)[3]2022年度博客之星人工智能领域TOP4[4]阿里云社区特邀专家博主[5]CSDN-人工智能领域优质创作者无限进步，一起追光！！！
  • 在vue3项目中使用el-upload实现文件上传 柒@宝儿姐 javascript前端vue.jsvscode
    在vue3项目中使用el-upload实现文件上传template将文件拖到此处，或点击上传是否更新已经存在的用户数据仅允许导入xls、xlsx格式文件。下载模板确定取消相关属性说明limit：允许上传文件的最大数量accept：接受上传的文件类型headers：设置上传的请求头部action：请求URLdisabled：是否禁用上传on-progress：文件上传时的钩子on-success：文
  • css3 圆形水波纹特效 程序媛之博客 css3前端css
    需求描述：需要制作一个动画，特效从圆心开始往外扩散，然后又往回收。效果图：实现代码：.circle{width:100rpx;height:100rpx;background-color:#FF4C4C;border-radius:50%;/*圆形*/box-shadow:inset00010rpxrgba(255,255,255,0.5),/*内阴影，初始半透明圆*/inset00020rpxr
  • CSS实标题现同心圆的缩放 做一个暴躁的开发 css3html
    CSS实标题现同心圆的缩放最近学习了css动画效果，记录一下同心圆的缩放问题问题描述我先设置了两个div，外圈是class=“one”，内圈是class=“two”,代码如下：分别设置他们的div，给他们边框，并且设置成圆形.one{width:500px;height:500px;border:20pxsolidlightcoral;border-radius:50%;overflow:hidd
  • flowable 修改历史变量 小云小白 springbootflowable修改历史变量springboot
    简洁场景：对已结束流程的变量进行改动方法包含2个类1）核心方法，flowablecommand类：HistoricVariablesUpdateCmd2）执行command类：BpmProcessCommandService然后springboot执行方法即可：bpmProcessCommandService.executeUpdateHistoricVariables(processInstan
  • vue+Element 动态表单 动态增减表单项 疯人院里的疯言风语 vue.jselementuijavascript
    动态增减表单项也是比较常用的，除了在Form组件上一次性传递所有的验证规则外还可以在单个的表单域上传递属性的验证规则，在一些需求下面很灵活方便。下面来看看怎么样实现动态增加，验证，删除表单项。直接上代码点击打开动态表单1"class="box_threeel-icon-delete"@click="removeDomain(item)">现在有({{quantity||"1"}})个最多45个新增
  • 使用html+css+jquery实现3D轮播图 mini_055 jqueryhtmlcss
    还是先来看看效果图：通过效果图我们先理一下思路：首先就是需要几张图片，但只有一张是显示在我们眼前的第二步：把一张图片分成几等份，这样点击转换的时候就会分开转第三步：就是实现点击按钮切换下一张。HTML部分HTML部分首先我们需要一个盒子显示图片，然后在盒子里装入图片，你想装几张图片就可以写几个li,除了图片我们还需要一个按钮来点击。一个li的图片效果如图所示：div是当你点击下一张的时候一个div
  • STM32学习笔记
    实现按键控制LED灯前置知识：基本的GPIO输入模式：读取外部信号（如按键、传感器状态）。——主要用到上拉输入输出模式：向外部输出信号（如控制LED、继电器）。——主要用到推挽输出其他模式：模拟输入、复用功能（如USART、I2C）等。按键的知识与常识按键未按下：GPIO引脚通过上拉电阻连接到VCC，读取为高电平（1）。按键按下：按键将GPIO引脚直接接地，读取为低电平（0）。有关LED的代码部分
  • vue大数据量列表渲染性能优化：虚拟滚动原理 Java小卷 Vue3开源组件实战vue3自定义Tree虚拟滚动
    前面咱完成了自定义JuanTree组件各种功能的实现。在数据量很大的情况下，我们讲了两种实现方式来提高渲染性能：前端分页和节点数据懒加载。前端分页小节：Vue3扁平化Tree组件的前端分页实现节点数据懒加载小节：ElementTreePlus版功能演示：数据懒加载关于扁平化结构Tree和嵌套结构Tree组件的渲染嵌套结构的Tree组件是一种递归渲染，性能上比起列表结构的v-for渲染比较一般。对于
  • Vue3+ element 实现导入导出 青柠97 vue.jsjavascript前端
    一、导入功能相关代码分析相关变量定义importVisible：这是一个ref类型的响应式变量，用于控制导入对话框的显示与隐藏，初始值为false。当用户点击“导入”按钮时，会尝试将其值设为true来显示导入对话框，若出现异常则提示相应错误信息。file：同样是ref类型的变量，用于存储用户选择要上传的文件对象，后续在文件上传等操作中会以此文件对象作为基础数据进行处理。pre_import：ref
  • css实现圆环效果 春风欲雨 csscss圆环
    圆环效果图.div{width:100px;height:100px;background-color:#fbc2eb;border-radius:50%;}.div:after{content:"";display:block;width:50px;height:50px;border-radius:50%;background-color:#fff;position:relative;top:
  • C++智能指针编程实例 lixzest c++开发语言
    智能指针是C++11引入的重要特性，用于自动管理动态分配的内存，防止内存泄漏。下面介绍几种高级智能指针编程实例。1.共享所有权模式(shared_ptr)循环引用问题及解决方案#include#includeclassB;//前向声明classA{public:std::shared_ptrb_ptr;~A(){std::couta_ptr;//这里会导致循环引用~B(){std::cout();
  • web iframe 实现pdf word Excel 预览 青柠97 JavaScript
  • element周选择器---设置展示周和日期 GLINLIND vueelementjavascript前端vue.jshtml5
    element周选择器：粘贴可用实现效果：—代码：npminstalldayjs--savemain.jsimportdayjsfrom"dayjs";Vue.prototype.dayjs=dayjs;页面data(){return{value2:"",week:"",//周startTimeStamp:
  • Java序列化进阶篇 g21121 java序列化
            1.transient         类一旦实现了Serializable 接口即被声明为可序列化，然而某些情况下并不是所有的属性都需要序列化，想要人为的去阻止这些属性被序列化，就需要用到transient 关键字。
  • escape()、encodeURI()、encodeURIComponent()区别详解 aigo JavaScriptWeb
    原文：http://blog.sina.com.cn/s/blog_4586764e0101khi0.html   JavaScript中有三个可以对字符串编码的函数，分别是： escape,encodeURI,encodeURIComponent，相应3个解码函数：,decodeURI,decodeURIComponent 。 下面简单介绍一下它们的区别 1 escape()函
  • ArcgisEngine实现对地图的放大、缩小和平移 Cb123456 添加矢量数据对地图的放大、缩小和平移Engine
    ArcgisEngine实现对地图的放大、缩小和平移:  个人觉得是平移，不过网上的都是漫游，通俗的说就是把一个地图对象从一边拉到另一边而已。就看人说话吧.  具体实现: 一、引入命名空间    using ESRI.ArcGIS.Geometry;    using ESRI.ArcGIS.Controls; 二、代码实现.
  • Java集合框架概述 天子之骄 Java集合框架概述
       集合框架 集合框架可以理解为一个容器，该容器主要指映射(map)、集合(set)、数组(array)和列表(list)等抽象数据结构。 从本质上来说，Java集合框架的主要组成是用来操作对象的接口。不同接口描述不同的数据类型。   简单介绍：   Collection接口是最基本的接口，它定义了List和Set，List又定义了LinkLi
  • 旗正4.0页面跳转传值问题 何必如此 javajsp
    跳转和成功提示 a)        成功字段非空forward 成功字段非空forward，不会弹出成功字段，为jsp转发，页面能超链接传值,传输变量时需要拼接。接拼接方式list.jsp?test="+strweightUnit+"或list.jsp?test="+weightUnit+&qu
  • 全网唯一:移动互联网服务器端开发课程 cocos2d-x小菜 web开发移动开发移动端开发移动互联程序员
        移动互联网时代来了！     App市场爆发式增长为Web开发程序员带来新一轮机遇，近两年新增创业者，几乎全部选择了移动互联网项目！传统互联网企业中超过98%的门户网站已经或者正在从单一的网站入口转向PC、手机、Pad、智能电视等多端全平台兼容体系。据统计，AppStore中超过85%的App项目都选择了PHP作为后端程
  • Log4J通用配置|注意问题 笔记 7454103 DAOapachetomcatlog4jWeb
    关于日志的等级 那些去 百度就知道了！ 这几天 要搭个新框架  配置了 日志 记下来 ！做个备忘！ #这里定义能显示到的最低级别,若定义到INFO级别,则看不到DEBUG级别的信息了~! log4j.rootLogger=INFO,allLog # DAO层 log记录到dao.log 控制台 和 总日志文件 log4j.logger.DAO=INFO,dao,C
  • SQLServer TCP/IP 连接失败问题 ---SQL Server Configuration Manager darkranger sqlcwindowsSQL ServerXP
    当你安装完之后,连接数据库的时候可能会发现你的TCP/IP 没有启动.. 发现需要启动客户端协议 : TCP/IP  需要打开 SQL Server Configuration Manager... 却发现无法打开 SQL Server Configuration Manager..?? 解决方法:  C:\WINDOWS\system32目录搜索framedyn.
  • [置顶] 做有中国特色的程序员 aijuans 程序员
    从出版业说起 网络作品排到靠前的，都不会太难看，一般人不爱看某部作品也是因为不喜欢这个类型，而此人也不会全不喜欢这些网络作品。究其原因，是因为网络作品都是让人先白看的，看的好了才出了头。而纸质作品就不一定了，排行榜靠前的，有好作品，也有垃圾。 许多大牛都是写了博客，后来出了书。这些书也都不次，可能有人让为不好，是因为技术书不像小说，小说在读故事，技术书是在学知识或温习知识，有些技术书读得可
  • document.domain 跨域问题 avords document
    document.domain用来得到当前网页的域名。比如在地址栏里输入：javascript:alert(document.domain); //www.315ta.com我们也可以给document.domain属性赋值，不过是有限制的，你只能赋成当前的域名或者基础域名。比如：javascript:alert(document.domain = "315ta.com");
  • 关于管理软件的一些思考 houxinyou 管理
    工作好多看年了,一直在做管理软件,不知道是我最开始做的时候产生了一些惯性的思维,还是现在接触的管理软件水平有所下降.换过好多年公司,越来越感觉现在的管理软件做的越来越乱. 在我看来,管理软件不论是以前的结构化编程,还是现在的面向对象编程,不管是CS模式,还是BS模式.模块的划分是很重要的.当然,模块的划分有很多种方式.我只是以我自己的划分方式来说一下. 做为管理软件,就像现在讲究MVC这
  • NoSQL数据库之Redis数据库管理(String类型和hash类型) bijian1013 redis数据库NoSQL
    一.Redis的数据类型 1.String类型及操作         String是最简单的类型，一个key对应一个value，string类型是二进制安全的。Redis的string可以包含任何数据，比如jpg图片或者序列化的对象。         Set方法：设置key对应的值为string类型的value
  • Tomcat 一些技巧 征客丶 javatomcatdos
    以下操作都是在windows 环境下 一、Tomcat 启动时配置 JAVA_HOME 在 tomcat 安装目录，bin 文件夹下的 catalina.bat 或 setclasspath.bat 中添加 set JAVA_HOME=JAVA 安装目录 set JRE_HOME=JAVA 安装目录/jre 即可； 二、查看Tomcat 版本 在 tomcat 安装目
  • 【Spark七十二】Spark的日志配置 bit1129 spark
    在测试Spark Streaming时，大量的日志显示到控制台，影响了Spark Streaming程序代码的输出结果的查看(代码中通过println将输出打印到控制台上)，可以通过修改Spark的日志配置的方式，不让Spark Streaming把它的日志显示在console   在Spark的conf目录下，把log4j.properties.template修改为log4j.p
  • Haskell版冒泡排序 bookjovi 冒泡排序haskell
    面试的时候问的比较多的算法题要么是binary search，要么是冒泡排序，真的不想用写C写冒泡排序了，贴上个Haskell版的，思维简单，代码简单，下次谁要是再要我用C写冒泡排序，直接上个haskell版的，让他自己去理解吧。     sort [] = [] sort [x] = [x] sort (x:x1:xs) | x>x1 = x1:so
  • java 路径 配置文件读取 bro_feng java
    这几天做一个项目，关于路径做如下笔记，有需要供参考。 取工程内的文件，一般都要用相对路径，这个自然不用多说。 在src统计目录建配置文件目录res,在res中放入配置文件。 读取文件使用方式： 1. MyTest.class.getResourceAsStream("/res/xx.properties") 2. properties.load(MyTest.
  • 读《研磨设计模式》-代码笔记-简单工厂模式 bylijinnan java设计模式
    声明： 本文只为方便我个人查阅和理解，详细的分析以及源代码请移步 原作者的博客http://chjavach.iteye.com/ package design.pattern; /* * 个人理解：简单工厂模式就是IOC; * 客户端要用到某一对象，本来是由客户创建的，现在改成由工厂创建，客户直接取就好了 */ interface IProduct {
  • SVN与JIRA的关联 chenyu19891124 SVN
    SVN与JIRA的关联一直都没能装成功，今天凝聚心思花了一天时间整合好了。下面是自己整理的步骤： 一、搭建好SVN环境，尤其是要把SVN的服务注册成系统服务 二、装好JIRA，自己用是jira-4.3.4破解版 三、下载SVN与JIRA的插件并解压，然后拷贝插件包下lib包里的三个jar，放到Atlassian\JIRA 4.3.4\atlassian-jira\WEB-INF\lib下，再
  • JWFDv0.96 最新设计思路 comsci 数据结构算法工作企业应用公告
                       随着工作流技术的发展，工作流产品的应用范围也不断的在扩展，开始进入了像金融行业(我已经看到国有四大商业银行的工作流产品招标公告了)，实时生产控制和其它比较重要的工程领域，而
  • vi 保存复制内容格式粘贴 daizj vi粘贴复制保存原格式不变形
        vi是linux中非常好用的文本编辑工具，功能强大无比，但对于复制带有缩进格式的内容时，粘贴的时候内容错位很严重，不会按照复制时的格式排版，vi能不能在粘贴时，按复制进的格式进行粘贴呢？ 答案是肯定的，vi有一个很强大的命令可以实现此功能 。     在命令模式输入:set paste，则进入paste模式，这样再进行粘贴时
  • shell脚本运行时报错误：/bin/bash^M: bad interpreter 的解决办法 dongwei_6688 shell脚本
    出现原因：windows上写的脚本，直接拷贝到linux系统上运行由于格式不兼容导致 解决办法： 1. 比如文件名为myshell.sh，vim myshell.sh 2. 执行vim中的命令 : set ff?查看文件格式，如果显示fileformat=dos，证明文件格式有问题 3. 执行vim中的命令 :set fileformat=unix 将文件格式改过来就可以了，然后:w
  • 高一上学期难记忆单词 dcj3sjt126com wordenglish
    honest 诚实的；正直的 argue 争论 classical 古典的 hammer 锤子 share  分享；共有 sorrow 悲哀；悲痛 adventure 冒险 error 错误；差错 closet 壁橱；储藏室 pronounce 发音；宣告 repeat 重做；重复 majority 大多数；大半   native 本国的，本地的，本国
  • hibernate查询返回DTO对象，DTO封装了多个pojo对象的属性 frankco POJOhibernate查询DTO
          DTO-数据传输对象；pojo-最纯粹的java对象与数据库中的表一一对应。       简单讲：DTO起到业务数据的传递作用，pojo则与持久层数据库打交道。         有时候我们需要查询返回DTO对象，因为DTO
  • Partition List hcx2013 partition
    Given a linked list and a value x, partition it such that all nodes less than x come before nodes greater than or equal to x. You should preserve the original relative order of th
  • Spring MVC测试框架详解——客户端测试 jinnianshilongnian
    上一篇《Spring MVC测试框架详解——服务端测试》已经介绍了服务端测试，接下来再看看如果测试Rest客户端，对于客户端测试以前经常使用的方法是启动一个内嵌的jetty/tomcat容器，然后发送真实的请求到相应的控制器；这种方式的缺点就是速度慢；自Spring 3.2开始提供了对RestTemplate的模拟服务器测试方式，也就是说使用RestTemplate测试时无须启动服务器，而是模拟一
  • 关于推荐个人观点 liyonghui160com 推荐系统关于推荐个人观点
        回想起来，我也做推荐了3年多了，最近公司做了调整招聘了很多算法工程师，以为需要多么高大上的算法才能搭建起来的，从实践中走过来，我只想说【不是这样的】     第一次接触推荐系统是在四年前入职的时候，那时候，机器学习和大数据都是没有的概念，什么大数据处理开源软件根本不存在，我们用多台计算机web程序记录用户行为，用.net的w
  • 不间断旋转的动画 pangyulei 动画
    CABasicAnimation* rotationAnimation; rotationAnimation = [CABasicAnimation animationWithKeyPath:@"transform.rotation.z"]; rotationAnimation.toValue = [NSNumber numberWithFloat: M
  • 自定义annotation sha1064616837 javaenumannotationreflect
    对象有的属性在页面上可编辑，有的属性在页面只可读，以前都是我们在页面上写死的，时间一久有时候会混乱，此处通过自定义annotation在类属性中定义。越来越发现Java的Annotation真心很强大，可以帮我们省去很多代码，让代码看上去简洁。 下面这个例子 主要用到了 1.自定义annotation：@interface，以及几个配合着自定义注解使用的几个注解 2.简单的反射 3.枚举
  • Spring 源码 up2pu spring
    1.Spring源代码 https://github.com/SpringSource/spring-framework/branches/3.2.x 注：兼容svn检出 2.运行脚本 import-into-eclipse.bat 注：需要设置JAVA_HOME为jdk 1.7 build.gradle compileJava { sourceCompatibilit
  • 利用word分词来计算文本相似度 yangshangchuan wordword分词文本相似度余弦相似度简单共有词
    word分词提供了多种文本相似度计算方式： 方式一：余弦相似度，通过计算两个向量的夹角余弦值来评估他们的相似度 实现类：org.apdplat.word.analysis.CosineTextSimilarity 用法如下： String text1 = "我爱购物"; String text2 = "我爱读书"; String text3 =
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他