阿林十一
阿林十一

利用css3动画和border来实现圆形进度条

最近在学习前端的一些知识，发现border的功能十分强大啊!

首先来看看demo

利用css3动画和border来实现圆形进度条_第1张图片

就是这么一个圆形的进度条，在文本框中输入0-100的数值下面的进度条相应的转到多少

这个主要是利用border，旋转和css动画来实现的，主要思想是利用两个div来互相遮挡border形成的一个只有半圈有颜色的圆形，再利用旋转div的角度来调整显示

利用css3动画和border来实现圆形进度条_第2张图片

上代码：

html+css+js(这里引入了jquery)

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="KeyWord" content="cicle,learning">
        <meta name="description" content="cicle-learning">
        <meta name="Author" content="alsy">
        <title>圆形进度条</title>

        <!-- style-start -->
            
        <!-- style-end -->

        <style>
            .content {
                width: 400px;
                height: 400px;
                margin: 10px auto 100px;
            }
            .content .input{
                position: relative;
                margin: 40px auto;
            }
            .content .cicle {
                position: relative;
                margin: 100px auto;
                width: 100px;
                height: 100px;
                border-width: 20px;
                border-color: red;
                border-style: solid;
                border-radius: 50%;
            }
            .content .cicle .bar {
                position: absolute;
                width: 70px;
                height: 140px;
                overflow: hidden;
            }
            .content .cicle .bar-left {
                top: -20px;
                left: -20px;
            }
            .content .cicle .bar-left .bar-left-an{
                position: absolute;
                z-index: 10;
                width: 100px;
                height: 100px;
                border-width: 20px;
                border-color: transparent transparent green green;
                border-style: solid;
                border-radius: 50%;
                transform: rotate(-135deg);
            }
            .content .cicle .bar-right {
                top: -20px;
                left: 50px;
            }
            .content .cicle .bar-right .bar-right-an {
                position: absolute;
                left: -70px;
                z-index: 20;
                width: 100px;
                height: 100px;
                border-width: 20px;
                border-color: green green transparent transparent;
                border-style: solid;
                border-radius: 50%;
                transform: rotate(-135deg);
            }
            .content .cicle .tx {
                position: absolute;
                width: 100px;
                height: 100px;
                line-height: 100px;
                text-align: center;
                font-size: 20px;
                font-weight: 800;
                color: green;
            }
        </style>


    </head>
    <body>

    <div class="content">
        <div class="input">
            <label>进度条:</label><input type="text" id="inp"/>
        </div>
        <div class="cicle">
            <div class="bar bar-left">
                <div class="bar-left-an"></div>
            </div>
            <div class="bar bar-right">
                <div  class="bar-right-an"></div>
            </div>
            <div class="tx">0%</div>
        </div>
    </div>
        

        <!-- import-js -->
            <script type="text/javascript" src="js/jquery.js"></script>
        <!-- import-my-js -->
            

            <script type="text/javascript">
                $(document).ready(function() {
                    var cicle = cle = function() {
                        
                        var oTx = $(".tx");

                        var cicleTransform = function(num, old_num) {
                            var b_l_a = $(".bar-left-an");
                            var b_r_a = $(".bar-right-an");
                            var c_num = num;
                            if(c_num > 50) {
                                b_r_a.css({
                                    "transform": "rotate(45deg)",
                                    "transition": "transform 1s linear"
                                });
                                setTimeout(function() {
                                    b_l_a.css({
                                        "transform": "rotate(" + (((c_num-50)/100*360)-135) + "deg)",
                                        "transition": "transform 1s linear"
                                    });
                                },1000);
                            } else {
                                if(old_num > 50) {
                                    setTimeout(function() {
                                        b_r_a.css({
                                            "transform": "rotate(" + ((c_num/100*360)-135) + "deg)",
                                            "transition": "transform 1s linear"
                                        });
                                    },1000);
                                    b_l_a.css({
                                        "transform": "rotate(-135deg)",
                                        "transition": "transform 1s linear"
                                    });
                                } else {
                                    b_r_a.css({
                                        "transform": "rotate(" + ((c_num/100*360)-135) + "deg)",
                                        "transition": "transform 1s linear"
                                    });
                                }
                                
                            }
                        }

                        var setnum = function(num) {
                            oTx.text(num + "%");
                        }

                        var getnum = function() {
                            return parseInt(oTx.text());
                        }

                        var inputB = function() {
                            $("#inp").blur(function() {
                                var num = parseInt($.trim( $(this).val() ));
                                if(num>=0 && num <= 100){
                                    cicleTransform(num, getnum());
                                    setnum(num);
                                }else{
                                    alert("输入100以内的数值！");
                                }
                            });
                        }
                        
                        return {
                            init: function() {
                                inputB();
                            }
                        }
                    }();
                    cicle.init();
                });
            </script>
    </body>
</html>

 

你可能感兴趣的:(利用css3动画和border来实现圆形进度条)

  • Python全网最全基础课程笔记(三)——所有运算符+运算符优先级 长风清留扬 最新Python入门基础合集开发语言python运算符Python基础numpypandaspip
    本专栏系列为Pythong基础系列，每天都会更新新的内容，搜罗全网资源以及自己在学习和工作过程中的一些总结，可以说是非常详细和全面。以至于为什么要写的这么详细：自己也是学过Python的，很多新手只是简单的过一篇语法，其实对于一个知识点的底层逻辑和其他使用方法以及参数详情根本不是很了解，这就导致学完很容易忘记，而且在实战过程中也是半知半解，所以自己就尽量写的详细些，让需要的人能更了解Python的
  • 本地docker镜像改名字 Wwwilling docker容器运维
    如果你想修改本地Docker镜像的名字，可以通过创建该镜像的新标签（tag）来实现。Docker中没有直接修改镜像名字的命令，但可以通过重新打标签的方式实现类似的效果。以下是具体步骤：查看当前镜像：dockerimages找到你想要重命名的镜像的IMAGEID。给镜像打一个新的标签（即新名字）：dockertag:例如，如果你想把一个镜像重命名为mynewimage:latest，你可以这样做：d
  • leetcode搜索系列 页图 leetcodec++leetcode
    BFS1.计算在网格中从原点到特定点的最短路径长度2.组成整数的最小平方数数量3.最短单词路径DFS1.查找最大的连通面积2.矩阵中的连通分量数目3.好友关系的连通分量数目4.填充封闭区域5.能到达的太平洋和大西洋的区域Backtracking1.数字键盘组合2.IP地址划分3.在矩阵中寻找字符串4.输出二叉树中所有从根到叶子的路径5.排列6.含有相同元素求排列7.组合8.组合求和9.含有相同元素
  • 金融数据有哪些，有用的股票API接口数据 nance99 金融pythongit
    一、金融数据有哪些，有用的股票API接口行情数据金融大数据是为金融机构、个人投资者以及金融应用开发者提供专业的数据和行情报价API服务，满足不同用户在投资过程中丰富多样的行情数据分析和投资研究，以API接口形式为用户提供行情数据API服务，提供的数据包括市场行情、财报、宏观等，还有基于文本分析的股票关联数据。对金融机构或者投资者而言，金融数据是企业财富。实时数据对企业成功至关重要，股票行情数据种类
  • Vue 3 中的 ref 完全指南 m0_74824002 vue.js前端javascript
    Vue3中的ref完全指南Vue3引入了CompositionAPI，其中ref是关键的一部分。ref可以让我们更方便地在组件中定义响应式数据，在模板中使用语法糖时尤为简洁。本文将详细讲解Vue3中ref的概念、用途及常见用法，并通过示例展示如何在实际开发中利用ref提升开发效率。一、什么是refref是Vue3CompositionAPI中定义响应式数据的核心函数。ref可以使基本类型（字符串、
  • SQL实现md5加密方法 m0_74824002 面试学习路线阿里巴巴sql数据库
    1.MD5加密概述MD5(MessageDigestAlgorithm5)是一种广泛使用的哈希算法，它将输入的字符串（或数据）转换为固定长度的128位（16字节）哈希值。MD5的主要特点是：不可逆性：MD5是一种单向哈希算法，这意味着你无法从MD5哈希值还原出原始数据。输出固定长度：无论输入数据的长度如何，MD5输出的哈希值始终是32个字符的十六进制数（128位）。碰撞性：虽然MD5很长时间被广泛
  • 2024 年 MathorCup 数学应用挑战赛——大数据竞赛 赛道 B：电商品类货量预测及品类分仓规划 思路和代码 持续更新中 2025年数学建模美赛 数学建模2024年大数据第五届MathorCupB题
    2024年所有数学建模类比赛的个人思路和代码都会发布到专栏内,会结合最新的chatgpt发布思路,开赛一天后恢复原价99,不代写论文,不回复私信.没有群,只需订阅一次目录问题分析与解决思路问题1：货量预测模型问题2：一品一仓分仓规划问题3：一品多仓分仓规划总结这类大数据竞赛的重点在于构建一个全面的预测和优化模型，通过数据处理、时间序列分析以及运筹优化来完成货量预测和分仓规划。下面是一个解决问题的整
  • 2024年美赛MCM/ICM E题 财产保险的可持续性 最新思路 2025年数学建模美赛 数学建模20242024美赛思路财产保险的可持续性最新思路
    专栏内ABCDEF题持续更新中这个数学建模问题要求我们开发两个模型：一个用于保险公司决定是否在极端天气事件频发地区承保保单的模型，另一个为社区领导人提供如何保护具有文化、历史、经济或社区意义建筑的指导模型。我们将分步骤地探讨这两个模型的开发过程，提供详细的解决思路和方法。保险公司模型目标开发一个模型，帮助保险公司评估在特定地区承保财产保险的风险与收益，特别是在极端天气事件日益增多的背景下。方法数据
  • ArkUI页面导航机制 荔枝寄 harmonyos
    鸿蒙操作系统（HarmonyOS）是华为公司自主研发的分布式操作系统，旨在为不同设备提供统一的操作平台。它支持多种终端设备，包括但不限于智能手机、平板电脑、智能手表等，并能够实现设备间的无缝协同工作。为了适应这一特性，鸿蒙引入了ArkUI，一个专为鸿蒙设计的用户界面开发框架。ArkUI页面导航机制在鸿蒙操作系统中，页面导航是指在应用的不同页面之间进行切换和传递数据的过程。良好的页面导航设计对于用户
  • 剑指offer_edition2刷题记录 jiandandian_ 数据结构与算法java开发语言
    剑指offer_edition2刷题记录写在前面：此博客记录刷剑指offer题中遇到的困难和总结，以及过程中难以理解的地方，其中*代表需要过段时间回过头再看的题Q7重建二叉树*（20210421）Q8二叉树的下一个节点（原书涉及到指针，暂时跳过）Q9两个栈实现一个队列附加题两个队列实现一个栈Q10斐波那契数列附加题：青蛙跳台阶附加题：快速排序Q11旋转数组的最小数字*（20210424）Q12矩阵
  • 免费开源的后端API服务-supabase安装和使用-简直是前端学习者福音 前端三评 strapiAjax工具开源前端supabase
    文章目录它是什么安装和部署关于安装关于部署1、注册用户2、创建组织3、创建项目创建数据库表（填充内容）填充数据库表使用postman联调API它是什么一个开源免费的后端框架，firebase的替代品。可以简单理解类似于headlesscms，但是不仅仅只提供内容，它还集成了服务订阅、即时API，用户身份认证（包括第三方身份认证，比如使用github、Google等账号实现快速登录和注册）、边缘函数
  • python pack中padx和pady的用法,padx(10,5)是什么意思 huiyuanzhenduo python前端开发语言
    在Python的Tkinter库中，`pack`方法用于添加小部件（如按钮、标签、框架等）到窗口中。`padx`和`pady`是`pack`方法的可选参数，用于控制小部件内部和外部的填充（或空隙）。-`padx`：控制小部件的！！！左右外边距！！！（水平填充）。它的值指定了小部件两侧的额外空间，单位是像素。-`pady`：控制小部件的上下外边距（垂直填充）。它的值指定了小部件上下的额外空间，单位也
  • 【力扣Hot 100】普通数组1 SharkWeek. leetcode算法数据结构
    1.最大子数组和给你一个整数数组nums，请你找出一个具有最大和的连续子数组（子数组最少包含一个元素），返回其最大和。子数组是数组中的一个连续部分。示例1：输入：nums=[-2,1,-3,4,-1,2,1,-5,4]输出：6解释：连续子数组 [4,-1,2,1]的和最大，为 6。示例2：输入：nums=[1]输出：1示例3：输入：nums=[5,4,-1,7,8]输出：23提示：1&nums){
  • 【力扣Hot 100】链表1 SharkWeek. leetcode链表算法
    1.相交链表给你两个单链表的头节点headA和headB，请你找出并返回两个单链表相交的起始节点。如果两个链表不存在相交节点，返回null。图示两个链表在节点c1开始相交**：**!https://assets.leetcode-cn.com/aliyun-lc-upload/uploads/2018/12/14/160_statement.png题目数据保证整个链式结构中不存在环。注意，函数返回
  • 算法练习——函数、递归和递推 SharkWeek. 算法练习算法递归深度优先c++
    在此记录一些有关函数、递归和递推的问题。所有题目均来自洛谷的题单能力提升综合题单Part1入门阶段-题单-洛谷|计算机科学教育新生态(luogu.com.cn)（实际上都没有用递推做）[NOIP2001普及组]数的计算题目描述给出正整数nnn，要求按如下方式构造数列：只有一个数字nnn的数列是一个合法的数列。在一个合法的数列的末尾加入一个正整数，但是这个正整数不能超过该数列最后一项的一半，可以得到
  • C++ —— 智能指针 unique_ptr （上） 奶香臭豆腐 c++开发语言学习
    C++——智能指针unique_ptr（上）普通指针的不足普通指针的释放智能指针智能指针unique_ptr智能指针初始化错误用法get()方法返回裸指针智能指针不支持指针的运算（+、-、++、--）普通指针的不足new和new[]的内存需要用delete和delete[]释放（堆区的内存一定要手工释放，否则会发生内存的泄露）；程序员主观上的失误，忘记或漏掉释放；不确定何时释放。普通指针的释放类内
  • C语言程序性能调优：提升执行效率与内存优化的终极指南 大模型铲屎官 C语言从入门到精通c语言开发语言程序性能调优编程内存优化执行效率
    系列文章目录01-C语言从零到精通：常用运算符完全指南，掌握算术、逻辑与关系运算02-C语言控制结构全解析：轻松掌握条件语句与循环语句03-C语言函数参数传递深入解析：传值与传地址的区别与应用实例04-C语言数组与字符串操作全解析：从基础到进阶，深入掌握数组和字符串处理技巧05-C语言指针与内存管理：指针使用、内存泄漏与调试技巧06-C语言数据结构深度解析：结构体与联合体的实战应用与技巧07-C语
  • Python--进程和线程 Ssaty. python开发语言
    第1关：Python多进程-求素数个数本关任务：使用Python多进程求素数个数。importmathfrommultiprocessingimportcpu_countfrommultiprocessingimportPool#判断数字是否为质数#**********Begin*****
  • C#在软件定义无线电（SDR）开发中的革命性应用——从概念到实践的全面解析 墨夶 C#学习资料2c#网络开发语言
    在这个数字化与无线通信飞速发展的时代，软件定义无线电（SoftwareDefinedRadio,SDR）作为一项关键技术，正在改变着我们对传统无线电系统的认知。它不仅允许工程师们以软件的方式实现复杂的信号处理算法，而且还为各种新型无线应用提供了无限可能。然而，要真正驾驭这项技术并非易事，尤其是在选择合适的编程语言时更是如此。今天，我们将聚焦于C#这一强大而灵活的语言，探讨它是如何成为SDR开发的理
  • SQLI靶场（四）（54~65关） 新玉5401 数据库oraclejava
    less-54本关需要我们在10步之内获取到字段名。不过方法和之前还是一样。但是本关会随机生成数据库名字，表名，列名。以下语句是根据我在通关时所随机产生的内容而定的。判断闭合输入：?id=1,?id=1'据此得出闭合方式为单引号闭合。判断显示位输入：?id=-1'unionselect1,2,3--+获取数据库名输入：?id=-1'unionselect1,database(),3--+获取表名输
  • 使用YOLOv8训练一个无人机（UAV）检测模型，深度学习目标检测中_并开发一个完整的系统 yolov8来训练无人机数据集并检测无人机 QQ_767172261 无人及视角YOLO无人机深度学习
    使用YOLOv8训练一个无人机（UAV）检测模型，深度学习目标检测中_并开发一个完整的系统yolov8来训练无人机数据集并检测无人机无人机数据集，yolo格式种类为uav，一共近5w张图片，如何用yolov8代码训练无人机检测数据集文章目录以下文章及内容仅供参考。1.环境部署2.数据预处理数据集准备划分数据集3.模型定义4.训练模型5.评估模型6.结果分析与可视化7.集成与部署PyQt6GUI(`
  • xss靶场搭建 奶酪是小白 xss安全web安全
    1.xss靶场源码do0dl3/xss-labs:xss跨站漏洞平台2.将源码下载好后解压放入phpstudy的www下3.启动apache和mysql4.在浏览器中输入127.0.0.1/xss-labs-master进入xss-labs靶场注：xss-labs后续通关教程陆续更新
  • 牛客小白月赛109 A-C 今天_也很困 c语言算法数据结构
    A-Onewan的疑惑题目描述Onewan有一天知道了19 260 817和114 514这两个奇妙的数字。他想知道在小于等于n的正整数中有多少个数x，使得下式成立：x+(19 260 817)≥n−(114 514)他算不出来答案所以想请你帮帮他。输入描述:在一行上输入一个整数n(1≤n≤1e9)代表所给定的上限。输出描述:在一行上输出一个整数，代表满足题意的x的数量。示例1输入2输出2示例2输
  • 程序代码篇---python回调函数&异步编程 Ronin-Lotus 程序代码篇python前端开发语言学习程序人生回调函数异步编程
    文章目录前言第一部分：Python的回调函数1.基本概念2.如何实现定义回调函数：定义主函数：例子3.回调函数的应用场景事件处理异步编程库和框架注意事项调用时机错误处理闭包第二部分：async和await关键字1.异步编程的概念2.async定义用法特性3.await定义用法特性4.异步编程的例子5.注意事项总结前言以上就是今天要讲的内容，本文简单介绍了Python中的回调函数以及异步编程。第一部
  • 奇怪的比赛（Python，递归，状态压缩动态规划dp） 不染_是非 python算法python动态规划算法蓝桥杯
    目录前言：题目：思路：递归：代码及详细注释：状态压缩dp：代码及详细注释：总结：前言：这道题原本是蓝桥上的题，现在搜不到了，网上关于此题的讲解更是寥寥无几，仅有的讲解也只是递归思想，python讲解和状态压缩dp的解决方法都没有，这里就带大家用状态压缩dp方法来解决此题。题目：大奖赛计分规则：每位选手需要回答10个问题（其编号为1到10），越后面越有难度。答对的，当前分数翻倍；答错了，则扣掉与题号
  • 基于springboot在线考试系统 2201_75927219 计算机毕业设计springboot后端java
    基于SpringBoot的在线考试系统是一种现代化的教育考试解决方案，它结合了SpringBoot框架的高效性和在线考试的便捷性，为教育机构、教师和学生提供了一个功能强大、易于使用的在线考试平台。一、系统背景与意义随着教育数字化的推进和在线学习需求的增长，传统的纸质考试方式已经逐渐显示出局限性，特别是在灵活性和可访问性方面。在线考试系统的开发正是响应这一趋势，它允许教育机构在任何时间、任何地点进行
  • HarmonyOS快速入门 蓝枫amy HarmonyOSharmonyos华为
    HarmonyOS快速入门1、基本概念UI框架：HarmonyOS提供了一套UI开发框架，即方舟开发框架（ArkUI框架）。方舟开发框架可为开发者提供应用UI开发所必需的能力，比如多种组件、布局计算、动画能力、UI交互、绘制等。方舟开发框架针对不同目的和技术背景的开发者提供了两种开发范式，分别是基于ArkTS的声明式开发范式（简称“声明式开发范式”）和兼容JS的类Web开发范式（简称“类Web开发
  • 【微信小程序】5步轻松掌握微信小程序获取位置API，你get到了吗？ 墨瑾轩 微信小程序微信小程序notepad++小程序
    关注墨瑾轩，带你探索编程的奥秘！超萌技术攻略，轻松晋级编程高手技术宝库已备好，就等你来挖掘订阅墨瑾轩，智趣学习不孤单即刻启航，编程之旅更有趣5步轻松掌握微信小程序获取位置API，你get到了吗？亲爱的小伙伴们，大家好呀！今天我们要一起来探讨微信小程序中的获取位置API——wx.getLocation。无论你是小程序的新手，还是有一定经验的开发者，这篇文章都会带你深入了解wx.getLocation
  • 微信小程序-点餐（美食屋）02开发实践 你我哈 微信小程序微信小程序小程序美食htmlphp
    目录概要整体架构流程（一）用户注册与登录（二）菜品浏览与点餐（三）订单管理（四）后台管理部分代码展示1.index.wxml2.list.wxml3.checkout.wxml4.detail.wxml小结优点概要01篇让我们成功搭建开发环境，现在让我们着手开发“美食屋”点餐系统了。下面，我会用PHP和MySQL实现系统核心功能，像用户注册登录、展示和管理菜品，以及处理订单。快一起动手，让“美食屋
  • 车位租赁系统的设计与实现(代码+数据库+LW) 小码学长 毕业设计小程序java数据库maven学习
    摘要传统信息的管理大部分依赖于管理人员的手工登记与管理，然而，随着近些年信息技术的迅猛发展，让许多比较老套的信息管理模式进行了更新迭代，车位信息因为其管理内容繁杂，管理数量繁多导致手工进行处理不能满足广大用户的需求，因此就应运而生出相应的车位租赁系统。本车位租赁系统分为管理员还有用户两个权限，管理员可以管理用户的基本信息内容，可以管理公告信息以及车位信息，能够与用户进行相互交流等操作，用户可以查看
  • 基本数据类型和引用类型的初始值 3213213333332132 java基础
    package com.array; /** * @Description 测试初始值 * @author FuJianyong * 2015-1-22上午10:31:53 */ public class ArrayTest { ArrayTest at; String str; byte bt; short s; int i; long
  • 摘抄笔记--《编写高质量代码：改善Java程序的151个建议》 白糖_ 高质量代码
            记得3年前刚到公司，同桌同事见我无事可做就借我看《编写高质量代码：改善Java程序的151个建议》这本书，当时看了几页没上心就没研究了。到上个月在公司偶然看到，于是乎又找来看看，我的天，真是非常多的干货，对于我这种静不下心的人真是帮助莫大呀。           看完整本书，也记了不少笔记
  • 【备忘】Django 常用命令及最佳实践 dongwei_6688 django
    注意：本文基于 Django 1.8.2 版本   生成数据库迁移脚本（python 脚本） python manage.py makemigrations polls  说明：polls 是你的应用名字，运行该命令时需要根据你的应用名字进行调整   查看该次迁移需要执行的 SQL 语句（只查看语句，并不应用到数据库上）： python manage.p
  • 阶乘算法之一N! 末尾有多少个零 周凡杨 java算法阶乘面试效率
                                     &n
  • spring注入servlet g21121 Spring注入
    传统的配置方法是无法将bean或属性直接注入到servlet中的，配置代理servlet亦比较麻烦，这里其实有比较简单的方法，其实就是在servlet的init()方法中加入要注入的内容： ServletContext application = getServletContext(); WebApplicationContext wac = WebApplicationContextUtil
  • Jenkins 命令行操作说明文档 510888780 centos
    假设Jenkins的URL为http://22.11.140.38:9080/jenkins/ 基本的格式为 java 基本的格式为 java -jar jenkins-cli.jar [-s JENKINS_URL] command [options][args] 下面具体介绍各个命令的作用及基本使用方法 1. &nb
  • UnicodeBlock检测中文用法 布衣凌宇 UnicodeBlock
    /**  * 判断输入的是汉字  */ public static boolean isChinese(char c) {        Character.UnicodeBlock ub = Character.UnicodeBlock.of(c);    
  • java下实现调用oracle的存储过程和函数 aijuans javaorale
    1.创建表：STOCK_PRICES     2.插入测试数据：     3.建立一个返回游标：  PKG_PUB_UTILS   4.创建和存储过程：P_GET_PRICE     5.创建函数：   6.JAVA调用存储过程返回结果集 JDBCoracle10G_INVO
  • Velocity Toolbox antlove 模板toolboxvelocity
    velocity.VelocityUtil package velocity; import org.apache.velocity.Template; import org.apache.velocity.app.Velocity; import org.apache.velocity.app.VelocityEngine; import org.apache.velocity.c
  • JAVA正则表达式匹配基础 百合不是茶 java正则表达式的匹配
      正则表达式;提高程序的性能,简化代码,提高代码的可读性,简化对字符串的操作   正则表达式的用途; 字符串的匹配 字符串的分割 字符串的查找 字符串的替换       正则表达式的验证语法     [a] //[]表示这个字符只出现一次 ,[a] 表示a只出现一
  • 是否使用EL表达式的配置 bijian1013 jspweb.xmlELEasyTemplate
            今天在开发过程中发现一个细节问题，由于前端采用EasyTemplate模板方法实现数据展示，但老是不能正常显示出来。后来发现竟是EL将我的EasyTemplate的${...}解释执行了，导致我的模板不能正常展示后台数据。         网
  • 精通Oracle10编程SQL(1-3)PLSQL基础 bijian1013 oracle数据库plsql
    --只包含执行部分的PL/SQL块 --set serveroutput off begin dbms_output.put_line('Hello,everyone!'); end; select * from emp; --包含定义部分和执行部分的PL/SQL块 declare v_ename varchar2(5); begin select
  • 【Nginx三】Nginx作为反向代理服务器 bit1129 nginx
    Nginx一个常用的功能是作为代理服务器。代理服务器通常完成如下的功能：   接受客户端请求 将请求转发给被代理的服务器 从被代理的服务器获得响应结果 把响应结果返回给客户端 实例 本文把Nginx配置成一个简单的代理服务器 对于静态的html和图片，直接从Nginx获取 对于动态的页面，例如JSP或者Servlet，Nginx则将请求转发给Res
  • Plugin execution not covered by lifecycle configuration: org.apache.maven.plugin blackproof maven报错
    转：http://stackoverflow.com/questions/6352208/how-to-solve-plugin-execution-not-covered-by-lifecycle-configuration-for-sprin   maven报错： Plugin execution not covered by lifecycle configuration:
  • 发布docker程序到marathon ronin47 docker 发布应用
    1 发布docker程序到marathon 1.1 搭建私有docker registry 1.1.1 安装docker regisry docker pull docker-registry docker run -t -p 5000:5000 docker-registry 下载docker镜像并发布到私有registry docker pull consol/tomcat-8.0
  • java-57-用两个栈实现队列&&用两个队列实现一个栈 bylijinnan java
    import java.util.ArrayList; import java.util.List; import java.util.Stack; /* * Q 57 用两个栈实现队列 */ public class QueueImplementByTwoStacks { private Stack<Integer> stack1; pr
  • Nginx配置性能优化 cfyme nginx
    转载地址：http://blog.csdn.net/xifeijian/article/details/20956605   大多数的Nginx安装指南告诉你如下基础知识——通过apt-get安装，修改这里或那里的几行配置，好了，你已经有了一个Web服务器了。而且，在大多数情况下，一个常规安装的nginx对你的网站来说已经能很好地工作了。然而，如果你真的想挤压出Nginx的性能，你必
  • [JAVA图形图像]JAVA体系需要稳扎稳打,逐步推进图像图形处理技术 comsci java
         对图形图像进行精确处理，需要大量的数学工具，即使是从底层硬件模拟层开始设计，也离不开大量的数学工具包，因为我认为，JAVA语言体系在图形图像处理模块上面的研发工作，需要从开发一些基础的，类似实时数学函数构造器和解析器的软件包入手，而不是急于利用第三方代码工具来实现一个不严格的图形图像处理软件......   &nb
  • MonkeyRunner的使用 dai_lm androidMonkeyRunner
    要使用MonkeyRunner，就要学习使用Python，哎 先抄一段官方doc里的代码 作用是启动一个程序（应该是启动程序默认的Activity），然后按MENU键，并截屏 # Imports the monkeyrunner modules used by this program from com.android.monkeyrunner import MonkeyRun
  • Hadoop-- 海量文件的分布式计算处理方案 datamachine mapreducehadoop分布式计算
    csdn的一个关于hadoop的分布式处理方案，存档。 原帖：http://blog.csdn.net/calvinxiu/article/details/1506112。     Hadoop 是Google MapReduce的一个Java实现。MapReduce是一种简化的分布式编程模式，让程序自动分布到一个由普通机器组成的超大集群上并发执行。就如同ja
  • 以資料庫驗證登入 dcj3sjt126com yii
    以資料庫驗證登入 由於 Yii 內定的原始框架程式, 採用綁定在UserIdentity.php 的 demo 與 admin 帳號密碼:    public function authenticate()    {        $users=array( &nbs
  • github做webhooks：[2]php版本自动触发更新 dcj3sjt126com githubgitwebhooks
    上次已经说过了如何在github控制面板做查看url的返回信息了。这次就到了直接贴钩子代码的时候了。 工具/原料 git github 方法/步骤   在github的setting里面的webhooks里把我们的url地址填进去。   钩子更新的代码如下： error_reportin
  • Eos开发常用表达式 蕃薯耀 Eos开发Eos入门Eos开发常用表达式
    Eos开发常用表达式 >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> 蕃薯耀 2014年8月18日 15:03:35 星期一     &
  • SpringSecurity3.X--SpEL 表达式 hanqunfeng SpringSecurity
    使用 Spring 表达式语言配置访问控制，要实现这一功能的直接方式是在<http>配置元素上添加 use-expressions 属性：   <http auto-config="true" use-expressions="true"> 这样就会在投票器中自动增加一个投票器：org.springframework
  • Redis vs Memcache IXHONG redis
    1. Redis中，并不是所有的数据都一直存储在内存中的，这是和Memcached相比一个最大的区别。 2. Redis不仅仅支持简单的k/v类型的数据，同时还提供list，set，hash等数据结构的存储。 3. Redis支持数据的备份，即master-slave模式的数据备份。 4. Redis支持数据的持久化，可以将内存中的数据保持在磁盘中，重启的时候可以再次加载进行使用。 Red
  • Python - 装饰器使用过程中的误区解读 kvhur JavaScriptjqueryhtml5css
    大家都知道装饰器是一个很著名的设计模式，经常被用于AOP(面向切面编程)的场景，较为经典的有插入日志，性能测试，事务处理，Web权限校验， Cache等。 原文链接：http://www.gbtags.com/gb/share/5563.htm Python语言本身提供了装饰器语法（@），典型的装饰器实现如下：   @function_wrapper de
  • 架构师之mybatis-----update 带case when 针对多种情况更新 nannan408 case when
    1.前言.    如题. 2. 代码.   <update id="batchUpdate" parameterType="java.util.List"> <foreach collection="list" item="list" index=&
  • Algorithm算法视频教程 栏目记者 Algorithm算法
    课程：Algorithm算法视频教程 百度网盘下载地址： http://pan.baidu.com/s/1qWFjjQW 密码: 2mji 程序写的好不好,还得看算法屌不屌！Algorithm算法博大精深。 一、课程内容： 课时1、算法的基本概念 + Sequential search 课时2、Binary search 课时3、Hash table 课时4、Algor
  • C语言算法之冒泡排序 qiufeihu c算法
    任意输入10个数字由小到大进行排序。 代码： #include <stdio.h> int main() { int i,j,t,a[11]; /*定义变量及数组为基本类型*/ for(i = 1;i < 11;i++){ scanf("%d",&a[i]); /*从键盘中输入10个数*/ } for
  • JSP异常处理 wyzuomumu Webjsp
    1.在可能发生异常的网页中通过指令将HTTP请求转发给另一个专门处理异常的网页中: <%@ page errorPage="errors.jsp"%>   2.在处理异常的网页中做如下声明： errors.jsp: <%@ page isErrorPage="true"%>，这样设置完后就可以在网页中直接访问exc
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他