赵至柔
赵至柔

使用HTML实现图片切换/轮播

1、需求分析

实现中国天气网中全国降水量预报图的切换、轮播。点击图中左下方的长方形按钮可以切换三个时段降水量的预报图，点击图中左下方的播放按钮自动轮播三张预报图。
使用HTML实现图片切换/轮播_第1张图片

2、代码实现

HTML

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>专业产品-中国天气网title>
    <link type="text/css" href="css/product_2016.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/jquery/1.8.3/jquery.min.js">script>
head>

<body>
    <div style="min-height:1000px">
        
        <div class="mainContent">
            <div class="contentBg">
                
                <div class="rightContent">
                    
                    <div class="picContent">
                        <a href="http://pi.weather.com.cn/i/product/pic/l/sevp_nmc_stfc_sfer_er24_achn_l88_p9_20180228070002400.jpg" target="_blank">
                            <img src="http://pi.weather.com.cn/i/product/pic/l/sevp_nmc_stfc_sfer_er24_achn_l88_p9_20180228070002400.jpg" class="showImg" style="width:757px;height:615px;">a>
                        <a href="http://pi.weather.com.cn/i/product/pic/l/sevp_nmc_stfc_sfer_er24_achn_l88_p9_20180228010004800.jpg" target="_blank">
                            <img src="http://pi.weather.com.cn/i/product/pic/l/sevp_nmc_stfc_sfer_er24_achn_l88_p9_20180228010004800.jpg" style="width:757px;height:615px;">a>
                        <a href="http://pi.weather.com.cn/i/product/pic/l/sevp_nmc_stfc_sfer_er24_achn_l88_p9_20180228010007200.jpg" target="_blank">
                            <img src="http://pi.weather.com.cn/i/product/pic/l/sevp_nmc_stfc_sfer_er24_achn_l88_p9_20180228010007200.jpg" style="width:757px;height:615px;">a>
                    div>
                    
                    
                    <div class="playDiv">
                        <div class="btnDiv imgBtns playBtn" id="playBtn">div>
                        <div class="btnDiv imgBtns stopBtn dis">div>
                        <div class="playStaLi playStaLi03">
                            
                            
                            <div class="infoDiv " style="width:68px;text-align:center;">24小时div>
                            
                            <div id="btn_group" style="overflow:hidden">
                                <a class="cur" data-type="0">a>
                                <a data-type="1">a>
                                <a data-type="2">a>
                            div>
                        div>
                    div>
                div>
                
            div>
        div>
        
        
        <script type="text/javascript" src="js/index.js">script>
    div>
body>
html>

js

var ELE = {
    img: $(".picContent a img"),
    btn_choose: $("#btn_group a"),
    btn_play: $("#playBtn"),
    info: $(".infoDiv")
};
var TIMEMSG = ['24小时', '48小时', '72小时'];
var SETTIME = 500;
var PLAY = false;

function swiper(num) {
    //1变换图片
    //2改变文字
    //3变换按钮
    ELE.img.removeClass('showImg');
    ELE.img.eq(num).addClass('showImg');

    ELE.btn_choose.removeClass('cur');
    ELE.btn_choose.eq(num).addClass('cur');

    ELE.info.html(TIMEMSG[num]);
}

function play(num) {

    var n = num;
    var t = SETTIME;
    PLAY = true;

    swiper(n);
    n++;
    if (n >= 3) {
        setTimeout(function() {
            swiper(0);
            ELE.btn_play.removeClass('stopBtn').addClass('playBtn');
            PLAY = false;
            console.log(PLAY)
        }, t)
        return
    }
    setTimeout(function() {

        play(n);
    }, t)
}

ELE.btn_choose.on("click", function(e) {
    if (!PLAY) {
        var num = $(this).attr('data-type');
        swiper(num);
    }

});

ELE.btn_play.on("click", function(e) {
    if (!PLAY) {
        $(this).removeClass('playBtn').addClass('stopBtn');
        play(0);
    }
});

css

/*播放时的按钮不单独显示*/
.dis{display:none}
.mainContent{width:1000px;margin:0 auto;position:relative;z-index:1}
/*背景浅蓝色底板*/
.mainContent .contentBg{width:100%;float:left;background:#e6f4ff}
/*图片放置在背景底板右侧*/
.mainContent .contentBg .rightContent{width:786px;float:right;position:relative;padding:23px 8px 23px 0}
/*显示图片元素*/
.picContent{width:100%;height:auto}
.picContent img{width:786px;height:460px;display:none}
.picContent .showImg{display:block}
/*控制台按钮*/
.playDiv{width:100%;height:36px;background:#043567;line-height:36px}
.playDiv .btnDiv{width:36px;height:36px;float:left;margin-right:5px}
.playDiv .playBtn{margin-top:5px;margin-left:5px;height:25px;width:25px;background-position:-85px 0}
.playDiv .stopBtn{margin-top:6px;margin-left:5px;height:25px;width:25px;background-position:-60px 0}
.playDiv .infoDiv{height:36px;float:left;color:#fff;margin-right:10px;font-size:12px}
/*三个长方形按钮*/
.playDiv .playStaLi a{height:6px;float:left;margin-top:15px;_margin-top:8px;background:#5a82ab;cursor:pointer}
/*鼠标移动到按钮上的时候为白色*/
.playDiv .playStaLi a:hover{background:#fff}
.playDiv .playStaLi .cur{background:#f29143!important}
.playDiv .playStaLi02 a{margin-left:10px;width:40px}
.playDiv .playStaLi03 a{margin-right:4px;width:36px}
.playDiv .playStaLi24 a{margin-left:3px;width:21px}
/*播放键*/
.imgBtns{background-image:url(http://i.tq121.com.cn/i/product_2016/imgBtns.png);background-repeat:no-repeat}

3、实现结果

最后达到的效果图如下图所示
使用HTML实现图片切换/轮播_第2张图片

你可能感兴趣的:(使用HTML实现图片切换/轮播)

  • 佐企 BPM 表单设计器：重塑业务流程数字化基石 牛油果爱编程 开源开源软件开源协议
    表单篇在当今竞争激烈的商业环境中，企业数字化转型的步伐愈发紧迫。佐企BPM作为一款卓越的业务流程管理解决方案，其中的表单设计器宛如一颗璀璨明珠，为企业构建高效、灵活的业务流程数字化框架提供了核心支撑。今天，让我们一同深入探索佐企BPM表单设计器的丰富功能，领略其如何助力企业实现流程优化与创新。一、表单设计器类型经典表单设计器：作为基础且常用的表单设计模式，为用户提供了简洁直观的表单搭建环境。开发者
  • java23种设计模式-解释器模式 千里码！ 设计模式后端技术#Java设计模式解释器模式java
    解释器模式（InterpreterPattern）学习笔记编程相关书籍分享：https://blog.csdn.net/weixin_47763579/article/details/145855793DeepSeek使用技巧pdf资料分享：https://blog.csdn.net/weixin_47763579/article/details/1458840391.模式定义行为型设计模式，给定
  • Redis教程(二十一)：Redis怎么保证缓存一致性 ThatMonth 缓存redis数据库
    传送门：Redis教程汇总篇，让你从入门到精通Redis的缓存一致性Redis的缓存一致性是指在使用Redis作为缓存层时，保证缓存中的数据与数据库中的数据保持一致的状态。在分布式系统中，数据一致性是一个重要的问题，因为可能存在多个客户端同时读写同一数据，或者数据在不同节点间需要同步更新。在涉及缓存的场景中，保持缓存一致性面临以下挑战：数据更新：当数据库中的数据被修改后，相关联的缓存数据需要被相应
  • 数据库添加数据时，主键字段报错：Field 'mid' doesn't have a default value 懂的越多不懂的也越多 数据库添加数据时主键字段报错：Field'mid'doesn't
    数据库添加数据时，主键字段报错：Field'mid'doesn'thaveadefaultvalue简介1、打开mysql安装目录找到my.ini文件，查找2、MySQL5usesastrictmodewhichneedstobedisabled.3、那就可能是你的数据库字段设置有问题.简介在使用ORM框架(Mybatis.JPA…)添加数据时,报错:Field‘mid’doesn’thavead
  • JAVA面试_进阶部分_23种设计模式总结 茂茂在长安 JAVAjava面试设计模式
    1.单例模式：确保某一个类只有一个实例，而且自行实例化并向整个系统提供这个实例。（1）懒汉式public class Singleton {      /* 持有私有静态实例，防止被引用，此处赋值为null，目的是实现延迟加载 */      private static Singleton instance = null;      /* 私有构造方法，防止被实例化 */     private
  • 响应式前端开发框架Bootstrap实战应用 马屿人
    本文还有配套的精品资源，点击获取简介：Bootstrap是广受欢迎的前端框架，用于创建响应式和移动优先的网站。结合JavaEE、Spring、SpringMVC和MyBatis后端技术，开发者可利用Bootstrap快速开发出模块化、用户友好的Web应用。该框架含有预定义的CSS样式、JavaScript插件、HTML模板和更多资源，以支持高效和模块化的Web应用开发流程。本压缩包中可能包含Boo
  • python合并多个pdf_Python实现按序合并多个pdf文件 weixin_39647458 python合并多个pdf
    技术交流QQ群:1027579432，欢迎你的加入！欢迎关注我的微信公众号：CurryCoder的程序人生1.整体实现步骤在日常办公中，我们可能会有一个需求，需要将多个pdf文件合并成一个文件。例如：需要将每个章节的pdf文件学习资料合并成一个pdf文件，便于我们进行学习资料的归档与整理。如何才能合并多个pdf文件呢？我查了一下网上现有的资料(详见参考资料1)，发现python中有一个第三方库Py
  • 神通数据库ShenTong7在CentOS7上的安装与MySQL迁移遇到的兼容性问题 Heartsuit 运维Database国产化迁移适配问题解决记录1024程序员节神通数据库数据迁移find_in_setCentOS7
    背景最近接触了个项目，数据库用的是国产数据库：神通数据库ShenTong7。简单总结下ShenTong7在CentOS7上的安装与使用。此外，在开发环境使用的是MySQL数据库，部署时需要迁移到神通数据库ShenTong7，并且记录了在迁移过程中以及迁移之后遇到的问题及解决方法。以下信息是在安装过程中关于神通数据库ShenTong7的官方介绍：神通数据库是天津神舟通用数据技术有限公司（以下简称“神
  • 探秘 ES6 模板字符串：从基础语法到高级应用的全方位解析 码上前端 javascriptvue.js
    前言：家人们，大家好！今天分享一篇文章给大家！要是文章对你有帮助，激发了你的灵感，求个收藏+关注啦～后续还有超多惊喜，别错过！目录引言一、基础语法：告别传统字符串拼接的繁琐（一）传统字符串拼接的困境（二）模板字符串的简洁之美二、多行字符串：轻松实现复杂文本布局（一）传统方式处理多行字符串的难题（二）模板字符串的多行支持三、表达式求值：动态生成字符串内容（一）嵌入简单变量（二）进行数学运算（三）调用
  • SQL笔记9.嵌入式SQL 笑神552 sql
    SQL嵌入到其它语言中，这个时候编译需要其他方法1.扩充主语言编译系统，使之能够处理SQL语句2.预处理：在编译前先扫描源程序，将SQL语句翻译成目标（或主语言程序）过程代码，并将SQL执行翻译成主语言的过程调用预处理后的源程序再交给诸语言的编译系统处理在使用时，所有的SQL语句都要加EXECSQL在前面，后面PL/1,C时，用；，COBOL用END-EXEC通信：1.SQLCODE这是一个整型变
  • Elasticsearch：使用阿里云 AI 服务进行向量化和重新排名
    作者：来自ElasticTomásMurúa在本文中，我们将介绍如何将阿里云AI功能与Elasticsearch集成，以提高语义搜索的相关性。阿里云人工智能搜索是一种将高级人工智能功能与Elasticsearch工具相结合的解决方案，利用QwenLLM/DeepSeek-R1系列提供高级推理和分类模型。在本文中，我们将使用同一作者撰写的小说和戏剧的描述来测试阿里巴巴重新排名和稀疏嵌入端点。步骤创建
  • Ubuntu中 json 打包数据的使用 猫猫的小茶馆 嵌入式软件开发ubuntujsonlinux服务器网络mcu
    1.JSON的概念和作用为了避免不同平台下的字节对齐、类型大小不统一的问题，json库把数据封装成具有一定格式的字符流数据，进行传输。json格式：把数据与键值一一对应，数据传输双方约定好同一键值，使用接口API根据键值操作json对象（json_object）存储或取得数据。一般使用：数据-->（封装）json对象-->String格式-->...传输。。。-->String格式-->（解析）j
  • 实现一个 RDMA 用户态驱动程序
    写在前面随着DeepSeek的火爆，当众人将目光集中到模型优化时，底层网络通信基础设施的重要性往往容易被忽略。实际上，高性能、易维护、易定制的网络基础设施对于提升AI训练、推理的效率是至关重要的一环。目前，主流的高性能网络通信方案基本被几家头部公司垄断，其提供的标准API接口也已经被精心封装，绝大多数开发者无需关心底层实现细节。达坦科技始终致力于国产高性能网络基础设施解决方案的研发，深知网络通信基
  • 提升物流效率，减少错误：板栗看板为你打造完美物流管理体验 项目管理软件
    利用板栗看板优化物流管理，可以通过其可视化的任务管理、团队协作和实时跟踪功能，提升物流效率、减少错误并增强团队协作。以下是具体的优化方法和步骤：明确物流管理流程在开始使用板栗看板之前，先梳理企业的物流管理流程，明确各个环节（如订单接收、库存管理、运输调度、配送跟踪等）。将这些环节映射到看板中，形成清晰的工作流。示例看板列：○待处理订单○库存准备中○运输中○已送达○问题处理创建任务卡片将每个物流任务
  • Next.js 开发指南 实战篇 | React Notes | 侧边栏笔记列表 人工智能_SYBH 课程推荐javascriptreact.js笔记Next.js实战前端框架开发语言
    Next.js开发指南-冴羽-掘金小册前言本篇我们来实现ReactNotes的左侧侧边栏部分。SidebarNoteList现在我们接着完善笔记列表，毕竟笔记列表这里还要实现展开和收回功能：修改components/SidebarNoteList.js代码：jsx复制代码importSidebarNoteItemfrom'@/components/SidebarNoteItem';exportde
  • 练手代码之使用Python实现合并PDF文件 Wcowin Pythonpythonpdf前端
    如果你有合并PDF的需要，你会怎么办我们无所不能的程序员会选择写一个Python代码来实现（谁会这么无聊？是我），如果真的有PDF操作需要，我推荐你使用PDFExpert这个软件哈~话不多说直接上代码：importosimportPyPDF2fromtkinterimportTkfromtkinter.filedialogimportaskopenfilenamesdefcombine_pdfs(
  • ShareSDK 扩展业务功能设置 java
    扩展业务说明ShareSDK提供的扩展业务功能为：通过进行地理维度的统计以实现更为精细化的运营；生成脱敏的终端用户设备唯一性标识；实现网络链路的选择与优化、检测并实现与特定区域相关的服务；合并链路服务。其中鸿蒙端支持上述第一个、第二个和第三个功能。ShareSDK为开发者提供退出上述功能的接口，开发者可以调用接口，向最终用户提供退出的能力。最终用户退出上述功能后，ShareSDK依然可以为您终端用
  • Excel的两个小问题解决 怜渠客 实用技巧excel
    （一）因为合并单元格存在，无法使用下拉自动填充公式。解决方案：使用Ctrl+Enter组合键选中目标区域：选中需要应用公式的所有合并单元格区域，这些单元格可能是由2行或3行等合并而成。输入公式：在编辑栏中输入所需的公式，例如，如果要对C列和D列对应合并单元格区域进行乘法运算，在编辑栏输入=C2*D2，此时不要按回车键。填充公式：按下Ctrl+Enter组合键，Excel会将公式同时应用到选中的所有
  • MobPush扩展业务功能设置 java
    扩展业务说明MobPush提供的扩展业务功能包括：按照地域提供更为精准的推送；实现网络链路的选择与优化、检测并实现与特定区域相关的服务；生成用户画像；合并链路服务。其中鸿蒙端支持上述第一项和第二项功能。MobPush为开发者提供退出上述功能的接口，开发者可以调用接口，向最终用户提供退出的能力。最终用户退出上述功能后，MobPush依然可以为您终端用户提供基础的消息推送服务。开发者需遵守相关法律法规
  • SQLite Select 语句详解 lsx202406 开发语言
    SQLiteSelect语句详解引言SQLite是一款轻量级的数据库管理系统，以其小巧的体积、易于使用和跨平台的特点受到广泛欢迎。在SQLite中，SELECT语句是最基本的数据查询操作，用于从数据库表中检索数据。本文将详细介绍SQLite的SELECT语句，包括其语法、功能以及一些高级用法。1.SELECT语句基础SELECT语句的基本语法如下：SELECTcolumn1,column2,...
  • Hive 面试题 昨夜为你摘星
    什么是Hive?Hive是基于Hadoop的一个数据仓库工具，用来进行数据提取、转化、加载，这是一种可以存储、查询和分析存储在Hadoop中的大规模数据的机制。Hive数据仓库工具能将结构化的数据文件映射为一张数据库表，并提供SQL查询功能，能将SQL语句转变成MapReduce任务来执行。Hive的意义（最初研发的原因）?降低程序员使用Hadoop的难度，降低学习成本Hive的内部组成模块，作用
  • Python面向对象面试题及参考答案 大模型大数据攻城狮 python面试继承封装接口隔离弱引用元类
    目录什么是面向对象编程？Python中的类和对象是什么？什么是继承？Python如何实现继承？什么是多态？Python如何实现多态？Python中的类属性和实例属性有什么区别？类属性和实例属性的访问优先级规则是什么？Python中的实例方法、类方法和静态方法有什么区别？静态方法、类方法、实例方法的参数传递差异是什么？什么是构造函数（init）？解释__init__方法与__new__方法的区别Py
  • C# Socket网络通信【高并发场景】 阿波茨的鹅 C#开发c#网络开发语言
    用途在C#中，Socket类是用于在网络上进行低级别通信的核心类。它提供了对TCP、UDP等协议的支持，可以实现服务器和客户端之间的数据传输。Socket提供了比TcpClient、UdpClient等更细粒度的控制，因此通常用于需要更多控制的场景。使用服务器usingSystem;usingSystem.Net;usingSystem.Net.Sockets;usingSystem.Text;c
  • redisCluster集群相关查询结果详解 ghostp redisredis
    redisCluster集群相关查询结果详解进入redis进群查看集群信息CLUSTERINFO命令CLUSTERNODES命令info命令infoCommandstats命令查询服务器相关key的大小单个key查询某些前缀key批量查询进入redis进群在安装redis的机器上，找到安装目录的bin文件夹，使用以下命令来进入集群：[root@localhostbin]#./redis-cli-c
  • Spring Boot与MyBatis geinvse_seg 面试学习路线阿里巴巴springbootmybatis后端
    SpringBoot与MyBatis的配置一、简介SpringBoot是一个用于创建独立的、基于Spring的生产级应用程序的框架，它简化了Spring应用的初始搭建以及开发过程。MyBatis是一款优秀的持久层框架，它支持定制化SQL、存储过程以及高级映射。将SpringBoot和MyBatis结合使用，可以高效地开发数据驱动的应用程序。二、环境准备（一）创建SpringBoot项目可以使用Sp
  • Maven详解：从入门到进阶 CarlowZJ mavenjava
    前言Maven是一款广泛应用于Java项目的构建和管理工具，通过标准化的项目结构和生命周期管理，极大地简化了项目构建过程。本文将从Maven的基础知识讲起，逐步深入到其核心概念、常用命令、依赖管理、插件使用以及实战应用，帮助读者全面掌握Maven。1.Maven概述1.1为什么使用Maven在传统的Java项目开发中，开发者需要手动下载依赖包、管理包的版本以及解决依赖冲突。Maven的出现解决了这
  • JS获取时间戳的五种方法 暴怒的代码 #JavaScriptjavascript开发语言ecmascript
    一、JavasCRIPT时间转时间戳JavaScript获得时间戳的方法有五种，后四种都是通过实例化时间对象newDate()来进一步获取当前的时间戳，JavaScript处理时间主要使用时间对象Date。方法一：Date.now()Date.now()可以获得当前的时间戳：console.log(Date.now())//1642471441587方法二：Date.parse()Date.par
  • 什么是通配符证书 ssl证书数字证书
    在网络安全领域，SSL证书是保障数据传输安全的重要工具，而通配符证书是其中一种特殊类型的证书，下面我们就来详细了解一下它。一、通配符证书的定义通配符证书是一种SSL/TLS证书，其特点在于可以保护一个主域名及其所有的子域名。简单来说，当你拥有一个通配符证书时，它能够为诸如主域名下的等任意子域名提供安全加密保护。证书中使用通配符“*”来表示匹配该主域名下的所有子域名，这使得它在管理多个子域名的安全时
  • 软件测试全流程工具链：从用例管理到缺陷跟踪的完整方案 程序员
    软件测试是软件开发过程中至关重要的环节，它确保软件产品的质量和稳定性。而在软件测试全流程中，从用例管理到缺陷跟踪，跨部门协作工具的选择和使用起着关键作用。本文将为您介绍软件测试全流程工具链中涉及的跨部门协作工具，包括三类实时沟通工具和文档共享系统，并为您提供详细的指南和推荐。实时沟通工具的重要性在软件测试过程中，跨部门的实时沟通是确保项目顺利进行的关键。有效的沟通可以及时解决问题、协调工作、提高效
  • Python实现观察者模式 麦田里走一夜 PYTHONpython观察者模式开发语言
    请关注【来玩AI】公众号体验人工智能来玩AI>>>Python实现观察者模式观察者模式python代码实现说明应用场景观察者模式模式是一种常用的设计模式，可以在对象之间建立一对多的依赖关系。Python中实现观察者模式有多种方式，下面给出一种基于类和装饰器的实现方式：python代码实现classObserver:defupdate(self,observable,*args,**kwargs):
  • Java实现的基于模板的网页结构化信息精准抽取组件：HtmlExtractor yangshangchuan 信息抽取HtmlExtractor精准抽取信息采集
    HtmlExtractor是一个Java实现的基于模板的网页结构化信息精准抽取组件，本身并不包含爬虫功能，但可被爬虫或其他程序调用以便更精准地对网页结构化信息进行抽取。   HtmlExtractor是为大规模分布式环境设计的，采用主从架构，主节点负责维护抽取规则，从节点向主节点请求抽取规则，当抽取规则发生变化，主节点主动通知从节点，从而能实现抽取规则变化之后的实时动态生效。 如
  • java编程思想 -- 多态 百合不是茶 java多态详解
    一: 向上转型和向下转型 面向对象中的转型只会发生在有继承关系的子类和父类中（接口的实现也包括在这里）。父类：人    子类：男人向上转型： Person p = new Man() ; //向上转型不需要强制类型转化向下转型： Man man =
  • [自动数据处理]稳扎稳打,逐步形成自有ADP系统体系 comsci dp
          对于国内的IT行业来讲,虽然我们已经有了"两弹一星",在局部领域形成了自己独有的技术特征,并初步摆脱了国外的控制...但是前面的路还很长....       首先是我们的自动数据处理系统还无法处理很多高级工程...中等规模的拓扑分析系统也没有完成,更加复杂的
  • storm 自定义 日志文件 商人shang stormclusterlogback
    Storm中的日志级级别默认为INFO，并且，日志文件是根据worker号来进行区分的，这样，同一个log文件中的信息不一定是一个业务的，这样就会有以下两个需求出现： 1. 想要进行一些调试信息的输出 2. 调试信息或者业务日志信息想要输出到一些固定的文件中   不要怕，不要烦恼，其实Storm已经提供了这样的支持，可以通过自定义logback 下的 cluster.xml 来输
  • Extjs3 SpringMVC使用 @RequestBody 标签问题记录 21jhf
    springMVC使用 @RequestBody(required = false) UserVO userInfo 传递json对象数据，往往会出现http 415，400,500等错误，总结一下需要使用ajax提交json数据才行，ajax提交使用proxy，参数为jsonData，不能为params；另外，需要设置Content-type属性为json，代码如下： （由于使用了父类aaa
  • 一些排错方法 文强chu 方法
    1、java.lang.IllegalStateException: Class invariant violation at org.apache.log4j.LogManager.getLoggerRepository(LogManager.java:199)at org.apache.log4j.LogManager.getLogger(LogManager.java:228) at o
  • Swing中文件恢复我觉得很难 小桔子 swing
           我那个草了！老大怎么回事，怎么做项目评估的？只会说相信你可以做的，试一下，有的是时间！        用java开发一个图文处理工具，类似word，任意位置插入、拖动、删除图片以及文本等。文本框、流程图等，数据保存数据库，其余可保存pdf格式。ok,姐姐千辛万苦，
  • php 文件操作 aichenglong PHP读取文件写入文件
    1 写入文件 @$fp=fopen("$DOCUMENT_ROOT/order.txt", "ab"); if(!$fp){ echo "open file error" ; exit; } $outputstring="date:"." \t tire:".$tire."
  • MySQL的btree索引和hash索引的区别 AILIKES 数据结构mysql算法
    Hash 索引结构的特殊性，其 检索效率非常高，索引的检索可以一次定位，不像B-Tree 索引需要从根节点到枝节点，最后才能访问到页节点这样多次的IO访问，所以 Hash 索引的查询效率要远高于 B-Tree 索引。     可能很多人又有疑问了，既然 Hash 索引的效率要比 B-Tree 高很多，为什么大家不都用 Hash 索引而还要使用 B-Tree 索引呢
  • JAVA的抽象--- 接口 --实现 百合不是茶
    抽象 接口 实现接口   //抽象 类 ,方法   //定义一个公共抽象的类 ,并在类中定义一个抽象的方法体 抽象的定义使用abstract   abstract class A 定义一个抽象类 例如： //定义一个基类 public abstract class A{     //抽象类不能用来实例化，只能用来继承 //
  • JS变量作用域实例 bijian1013 作用域
    <script> var scope='hello'; function a(){ console.log(scope); //undefined var scope='world'; console.log(scope); //world console.log(b);
  • TDD实践（二） bijian1013 javaTDD
    实践题目：分解质因数 Step1： 单元测试： package com.bijian.study.factor.test; import java.util.Arrays; import junit.framework.Assert; import org.junit.Before; import org.junit.Test; import com.bijian.
  • [MongoDB学习笔记一]MongoDB主从复制 bit1129 mongodb
    MongoDB称为分布式数据库，主要原因是1.基于副本集的数据备份， 2.基于切片的数据扩容。副本集解决数据的读写性能问题，切片解决了MongoDB的数据扩容问题。   事实上，MongoDB提供了主从复制和副本复制两种备份方式，在MongoDB的主从复制和副本复制集群环境中，只有一台作为主服务器，另外一台或者多台服务器作为从服务器。 本文介绍MongoDB的主从复制模式，需要指明
  • 【HBase五】Java API操作HBase bit1129 hbase
    import java.io.IOException; import org.apache.hadoop.conf.Configuration; import org.apache.hadoop.hbase.HBaseConfiguration; import org.apache.hadoop.hbase.HColumnDescriptor; import org.apache.ha
  • python调用zabbix api接口实时展示数据 ronin47
    zabbix api接口来进行展示。经过思考之后，计划获取如下内容：     1、  获得认证密钥     2、  获取zabbix所有的主机组     3、  获取单个组下的所有主机     4、  获取某个主机下的所有监控项  
  • jsp取得绝对路径 byalias 绝对路径
    在JavaWeb开发中，常使用绝对路径的方式来引入JavaScript和CSS文件，这样可以避免因为目录变动导致引入文件找不到的情况，常用的做法如下： 一、使用${pageContext.request.contextPath} 　　代码” ${pageContext.request.contextPath}”的作用是取出部署的应用程序名，这样不管如何部署，所用路径都是正确的。
  • Java定时任务调度：用ExecutorService取代Timer bylijinnan java
    《Java并发编程实战》一书提到的用ExecutorService取代Java Timer有几个理由，我认为其中最重要的理由是： 如果TimerTask抛出未检查的异常，Timer将会产生无法预料的行为。Timer线程并不捕获异常，所以 TimerTask抛出的未检查的异常会终止timer线程。这种情况下，Timer也不会再重新恢复线程的执行了;它错误的认为整个Timer都被取消了。此时，已经被
  • SQL 优化原则 chicony sql
    一、问题的提出 　在应用系统开发初期，由于开发数据库数据比较少，对于查询SQL语句，复杂视图的的编写等体会不出SQL语句各种写法的性能优劣，但是如果将应用系统提交实际应用后，随着数据库中数据的增加，系统的响应速度就成为目前系统需要解决的最主要的问题之一。系统优化中一个很重要的方面就是SQL语句的优化。对于海量数据，劣质SQL语句和优质SQL语句之间的速度差别可以达到上百倍，可见对于一个系统
  • java 线程弹球小游戏 CrazyMizzz java游戏
    最近java学到线程，于是做了一个线程弹球的小游戏，不过还没完善 这里是提纲 1.线程弹球游戏实现 1.实现界面需要使用哪些API类 JFrame JPanel JButton FlowLayout Graphics2D Thread Color ActionListener ActionEvent MouseListener Mouse
  • hadoop jps出现process information unavailable提示解决办法 daizj hadoopjps
    hadoop jps出现process information unavailable提示解决办法   jps时出现如下信息： 3019 -- process information unavailable3053 -- process information unavailable2985 -- process information unavailable2917 --
  • PHP图片水印缩放类实现 dcj3sjt126com PHP
    <?php class Image{ private $path; function __construct($path='./'){ $this->path=rtrim($path,'/').'/'; } //水印函数，参数：背景图，水印图，位置，前缀,TMD透明度 public function water($b,$l,$pos
  • IOS控件学习：UILabel常用属性与用法 dcj3sjt126com iosUILabel
    参考网站： http://shijue.me/show_text/521c396a8ddf876566000007 http://www.tuicool.com/articles/zquENb http://blog.csdn.net/a451493485/article/details/9454695 http://wiki.eoe.cn/page/iOS_pptl_artile_281
  • 完全手动建立maven骨架 eksliang javaeclipseWeb
    建一个 JAVA 项目 ： mvn archetype:create -DgroupId=com.demo -DartifactId=App [-Dversion=0.0.1-SNAPSHOT] [-Dpackaging=jar] 建一个 web 项目 ： mvn archetype:create -DgroupId=com.demo -DartifactId=web-a
  • 配置清单 gengzg 配置
    1、修改grub启动的内核版本 vi /boot/grub/grub.conf 将default 0改为1 拷贝mt7601Usta.ko到/lib文件夹 拷贝RT2870STA.dat到 /etc/Wireless/RT2870STA/文件夹 拷贝wifiscan到bin文件夹，chmod 775 /bin/wifiscan 拷贝wifiget.sh到bin文件夹，chm
  • Windows端口被占用处理方法 huqiji windows
    以下文章主要以80端口号为例，如果想知道其他的端口号也可以使用该方法..........................1、在windows下如何查看80端口占用情况?是被哪个进程占用?如何终止等.        这里主要是用到windows下的DOS工具,点击"开始"--"运行",输入&
  • 开源ckplayer 网页播放器， 跨平台(html5, mobile)，flv, f4v, mp4, rtmp协议. webm, ogg, m3u8 ！ 天梯梦 mobile
    CKplayer，其全称为超酷flv播放器，它是一款用于网页上播放视频的软件，支持的格式有：http协议上的flv,f4v,mp4格式，同时支持rtmp视频流格 式播放，此播放器的特点在于用户可以自己定义播放器的风格，诸如播放/暂停按钮，静音按钮，全屏按钮都是以外部图片接口形式调用，用户根据自己的需要制作 出播放器风格所需要使用的各个按钮图片然后替换掉原始风格里相应的图片就可以制作出自己的风格了，
  • 简单工厂设计模式 hm4123660 java工厂设计模式简单工厂模式
           简单工厂模式（Simple Factory Pattern）属于类的创新型模式，又叫静态工厂方法模式。是通过专门定义一个类来负责创建其他类的实例，被创建的实例通常都具有共同的父类。简单工厂模式是由一个工厂对象决定创建出哪一种产品类的实例。简单工厂模式是工厂模式家族中最简单实用的模式，可以理解为是不同工厂模式的一个特殊实现。
  • maven笔记 zhb8015 maven
    跳过测试阶段： mvn package -DskipTests 临时性跳过测试代码的编译： mvn package -Dmaven.test.skip=true   maven.test.skip同时控制maven-compiler-plugin和maven-surefire-plugin两个插件的行为，即跳过编译，又跳过测试。   指定测试类 mvn test
  • 非mapreduce生成Hfile，然后导入hbase当中 Stark_Summer maphbasereduceHfilepath实例
    最近一个群友的boss让研究hbase，让hbase的入库速度达到5w+/s，这可愁死了，4台个人电脑组成的集群，多线程入库调了好久，速度也才1w左右，都没有达到理想的那种速度，然后就想到了这种方式，但是网上多是用mapreduce来实现入库，而现在的需求是实时入库，不生成文件了，所以就只能自己用代码实现了，但是网上查了很多资料都没有查到，最后在一个网友的指引下，看了源码，最后找到了生成Hfile
  • jsp web tomcat 编码问题 王新春 tomcatjsppageEncode
    今天配置jsp项目在tomcat上，windows上正常，而linux上显示乱码，最后定位原因为tomcat 的server.xml 文件的配置，添加 URIEncoding 属性： <Connector port="8080" protocol="HTTP/1.1" connectionTi
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他