wel_coder
wel_coder

input type=file选择图片按钮样式修改与图片预览

1 背景

在这里插入图片描述
通过上图我们可以看到input type=file按钮的默认样式，非常不美观，如果要自定义该按钮的样式，要如何实现呢？

2 方式1样式

input覆盖整个按钮区域，并且设置完全透明

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
    <style>
        div {
            position: relative;
            width: 100px;
            height: 100px;
            line-height: 100px;
            background-color: #ccc;
            text-align: center;
        }
        
        #file {
            width: 100%;
            height: 100%;
            position: absolute;
            left: 0;
            top: 0;
            opacity: 0;
        }
    style>
head>
<body>
    <div>
        选取图片
        <input type="file" accept="image/*" id="file">
    div>
body>
html>

3 方式2样式

input隐藏，通过label设置按钮样式

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
    <style>
        div {
            width: 100px;
            height: 100px;
            line-height: 100px;
            background-color: #ccc;
            text-align: center;
        }

        #file{
            display: none;
        }
        
        label {
            display: block;
            width: 100%;
            height: 100%;
        }
    style>
head>
<body>
    <div>
        <input type="file" accept="image/*" id="file">
        
        <label for="file">选取图片label>
    div>
body>
html>

4 图片预览

<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">script>
<script>
    $(function() {
        // input选取文件后会触发change事件
        $('#file').on('change', function(event) {
            console.log(event.target.files) //选取的文件对象数组

            // 通过FileReader读取文件对象信息
            var reader = new FileReader()
            reader.onload = function(e) {
                var img = new Image()
                img.src = e.target.result //读取结果会转为base64数据格式
                img.style.width = '200px'
                document.body.appendChild(img)
            }
            reader.readAsDataURL(event.target.files[0])
        })
    })
script>

5 js动态创建input方式

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
    <style>
        .file {
            width: 100px;
            height: 100px;
            line-height: 100px;
            background-color: #ccc;
            text-align: center;
        }
	style>
head>
<body>
    <div class="file">
        选取图片
    div>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">script>
<script>
	$(function() {
		$('.file').on('click', function() {
                // 动态创建input元素，type为file，样式为隐藏，并追加到body中
                var input = $('')
                input.prop('type', 'file')
                input.css('display', 'none')
                $('body').append(input)
                // 监听选取文件触发的change事件
                input.on('change', function(event) {
                    console.log(event.target.files) //选取的文件对象数组
                    // 通过FileReader读取文件对象
                    var reader = new FileReader()
                    reader.onload = function(e) {
                        var img = new Image()
                        img.src = e.target.result //读取结果会转为base64数据格式
                        img.style.width = '200px'
                        document.body.appendChild(img)
                    }
                    reader.readAsDataURL(event.target.files[0])
                    // 完成选取文件后，从dom中自我删除
                    input.remove()
                })
                // 自动触发click事件去选取文件
                input.click()
            })
        })
    script>
body>
html>

6 效果展示

input type=file选择图片按钮样式修改与图片预览_第1张图片

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

  • 小架构step系列19：请求和响应 秋千码途 架构
    1概述作为Web程序，通用形式是发起HTTP请求并获取返回的结果，在这个过程中，需要把请求映射到代码的接口上，提供这种接口的类一般称为Controller，也就是需要把请求映射到Controller的接口方法上，把请求的参数映射到接口的参数中，并从接口返回接口处理的结果。在后端渲染页面的场景中，返回的结果需要处理为视图View。而现在更普遍的是前后端分离，返回的结果一般处理为JSON格式的数据，前
  • 重学前端006 --- 响应式网页设计 CSS 弹性盒子
    文章目录盒模型一、盒模型的基本概念二、两种盒模型的对比举例三、总结Flexbox弹性盒子布局一、Flexbox的核心概念二、Flexbox的基本语法1.定义Flex容器2.Flex容器的主要属性3.Flex项目的主要属性三、Flexbox的常见布局示例四、FlexboxvsGrid布局五、总结imgobject-fitgapCSS::after伪元素详解1.基本概念2.基础语法3.关键注意事项以下
  • 重学前端007 --- 响应式网页设计 CSS 排版 Sapphire～ 前端前端
    文章目录导入字体总结浏览器给元素添加的默认值text-indent:-8px;1.text-indent属性的作用2.总结其他css导入字体这将导入OpenSans字体系列，字体粗细值为400、700和800。总结浏览器给元素添加的默认值元素默认外边距（Margin）默认内边距（Padding）作用-上下0.5em~1em无标题与内容分隔上下1em无段落间距/上下1em，左右40px无列表缩进上下
  • 轻量、高性能、易扩展——为什么 Elysia.js 是 Node.js 的未来？ 朱公子的Note 编程语言node.jsjavascriptElysia.js凭什么封神？
    “你还在用Express吗？功能不少，但每秒处理能力却像蜗牛爬行。”现如今，Serverless、边缘计算与微服务已成趋势，传统后端框架难以应对高并发需求。Elysia.js脱胎于Bun生态，以其超强性能与类型安全特性，正成为后端开发的新宠。本篇将带你深入剖析为什么它是未来绝佳选择。在Node.js生态中，Elysia.js凭借其极致的性能、优雅的API设计和强大的类型安全，迅速成为现代后端开发的
  • js扁平数组树形，根据指定节点id查询改节点下的所有子节点
    废话不多说，直接上代码functionfindAllChildren(list,parentId){constresult=[];//查找直接子节点constdirectChildren=list.filter((item)=>item.parentId===parentId);//递归查找子节点的子节点directChildren.forEach((child)=>{result.push(ch
  • 网络安全第三次作业搭建前端页面并解析
    我制作的是一个简单的登录页面网源代码1.CSS中box-sizing:border-box：使元素宽度包含边框和内边距，避免布局因padding变化错位。2.min-height:100vh：让body高度至少等于屏幕高度，确保登录框始终居中，不受内容高度影响。3..login-container的max-width:400px：限制登录框最大宽度，在大屏设备上不无限拉伸，保持美观。4.input
  • javascript基本内容和标签 Sonnenblume_f IT总结编程语言javascriptIT总结
    js概念:javascript是互联网上最流行的，可以嵌套到html代码中的，一种基于对象和事件驱动的，并具有安全性能的脚本语言。具有1）向html页面中增加交互行为；2）脚本语言，语法和java类似；3）解释性语言，边执行边解释;4）跨平台，每个浏览器都具有js解释器;作用：增删HTML和css中的代码,能够动态校验数据组成：ECMAScript（核心）BOM浏览器对象模型DOM文档对象模型引入
  • nextjs+react接口会请求两次？
    解决Next.js+React接口重复请求问题在Next.js应用中，你可能会遇到API请求被发送两次的情况。以下是常见原因和解决方案：1.开发模式下StrictMode的影响原因Next.js默认启用React的StrictMode，在开发环境下会故意渲染两次组件以帮助发现潜在问题。解决方案//next.config.jsmodule.exports={reactStrictMode:false
  • 微信公众号定位 任小栗 微信公众号微信
    系列文章目录通过高德地图坐标转换接口，完成微信wx.getLocation（）jsdk坐标转换，实现定位高精确度效果微信公众号定位系列文章目录前言一、下载高德二、封装地图组件，vantUI三、拖拽组件，vantUI前言一起开始在百度找了坐标转换，腾讯地图转换成百度地图坐标等等方法但是误差还是很多很难搞，后来看高德原生的地图api里面有浏览器精确定位，我就想着搬到微信公众号，但是公司比较穷，用不起h
  • css实现箭头进度条 惜音renee
    实现的目标：源码：首先写出一个基本的样式：买家下单买家付款发货买家确认收货.progress-barli{padding:0px20px;line-height:40px;background:#50abe4;display:inline-block;color:#fff;position:relative;width:180px;text-align:center;}接下来使用:after伪类画
  • 网络爬虫进阶 rooney2024 爬虫
    目录一、进阶爬虫的核心挑战二、关键技术与最佳实践三、实战案例：爬取动态电商价格（伪代码示例）四、持续学习路径结语一、进阶爬虫的核心挑战动态渲染页面(JavaScript/AJAX)问题：数据由JavaScript动态加载生成，初始HTML中不存在。解决方案：浏览器自动化工具：Selenium,Playwright,Puppeteer。模拟真实浏览器行为，等待JS执行并渲染出完整DOM后再解析。无头
  • vscode怎么装python_vscode如何安装python
    vscode安装python的方法：1、在vscode的扩展中输入"extinstallpython"安装python插件打开VScode，Ctrl+p输入"extinstallpython"，搜索时间可能会比较长安装过程不能停止，否则重新安装；2、在配置文件“settings.json”修改python的安装路径修改用户设置-settings.json，将"python.pythonPath":
  • Android音视频探索之旅 | Webrtc 1对1音视频通话核心流程分析 慢行的骑兵 音视频android音视频webrtc
    一.前言使用Webrtc实现1对1的音视频通话，先从Web端进行学习要比直接从Android端进行学习要轻松许多（若没有JS和Html以及Node基础，查找相关基础教程，能梳理代码的逻辑即可）。本文Android端接入Webrtc是通过引入官方的sdk来实现的。本文涉及到的Demo代码包含三部分，服务器端、Web端、Android端。服务器端使用的是Node，Web使用的是Html和JS，Andr
  • docker 常见错误 零一间
    服务启动失败#systemctlstartdocker.serviceJobfordocker.servicefailedbecausethecontrolprocessexitedwitherrorcode.See"systemctlstatusdocker.service"and"journalctl-xe"fordetails解决方法修改/etc/docker/daemon.json文件(j
  • kafka 生产消息和消费消息 kafka-console-producer.sh kafka-console-consumer.sh 锅锅来了 #Kafka运维实战kafkalinq分布式
    目录kafka-console-producer.sh基本用法常用参数说明示例用法1.简单发送消息2.发送带键的消息3.从文件读取消息4.发送批量消息5.使用自定义配置配置文件示例注意事项kafka-console-consumer.sh基本用法核心参数说明常见使用场景1.实时消费最新消息2.消费历史所有消息3.使用消费组4.消费特定分区5.格式化输出6.消费JSON格式消息7.导出消息到文件8.
  • Linux 基本指令详解 Cherl. Linuxlinux运维服务器基本命令
    1.pwd（PrintWorkingDirectory）显示当前工作目录的完整路径root@hcss-ecs-a3f4:~#pwd/root2.ls（List）列出目录内容ls#查看当前目录下文件和文件夹ls-l#长格式显示(显示权限、所有者、大小、修改时间等)ls-a#显示所有文件(包括隐藏文件)ls-la#长格式显示所有文件ls-lh#以人类可读的方式显示文件大小ls-R#递归显示子目录ll为
  • 【学术会议投稿】Vue.js组件开发实战：从零构建高效可复用组件 小周不想卷 艾思科蓝学术会议投稿vue.js
    【IEEE出版|会后3-4个月EI检索】第三届云计算、大数据应用与软件工程国际学术会议(CBASE2024）_艾思科蓝_学术一站式服务平台更多学术会议请看：https://ais.cn/u/nuyAF3目录引言一、Vue.js组件开发基础二、构建高效可复用组件三、Vue.js组件的高级特性四、Vue.js的优点与缺点Vue.js的优点Vue.js的缺点引言在现代前端开发中，Vue.js凭借其简洁的
  • 在vue项目中使用富文本编辑器 - tinymce 橘式不妙 vue富文本编辑器vue.js前端javascript编辑器
    推荐文章tinymce常用配置摘要在vue项目中使用tinymce富文本编辑器。这款编辑器比较轻量级、界面简洁、功能丰富，主要是易扩展。使用步骤安装tinymce官方地址1.安装tinymce#pnpm命令是npm命令的增强，p是proformance的意思，高性能pnpminstall--save"@tinymce/tinymce-vue@^5"2.引入tinymce的mainjstinymce
  • 《Vue.js 核心概念：前端魔法世界的奇幻基石》 Muai木离 前端vue.jsflutter
    在当今数字化浪潮汹涌澎湃，Web应用如梦幻仙境般绚烂多彩且变幻无穷的时代，Vue.js仿若一位神秘而强大的魔法画师，其核心概念则是绘制出震撼人心的Web开发魔法画卷的神来之笔。这些概念宛如星空中最耀眼、最具魔力的星座，不仅赋予Vue.js令人心醉神迷的独特魅力与蓬勃无尽的创造力，更为构建灵动如仙、性能超凡且用户体验犹如置身奇幻梦境的Web应用勾勒出清晰可见的魔法蓝图。对于那些心怀对前端开发领域的炽
  • Pinia 实战指南：Vue 3 状态管理的高效之道 做人不能太高调 vue.js前端javascript
    1.给我来个系统学习Pinia的大纲学习Pinia作为Vue.js的状态管理库，可以按照以下大纲来系统地进行学习：1.Pinia入门Pinia简介什么是Pinia？Pinia是Vue3的官方状态管理库，是对Vuex的继承和改进。它通过提供更简洁和灵活的API，使得在Vue应用中管理全局状态变得更加容易。Pinia是专为Vue3设计的，基于CompositionAPI，允许开发者以更加模块化和简洁的
  • error ‘vue‘ 不是内部或外部命令，也不是可运行的程序或批处理文件 [Windows/Mac/Linux 系统解决方案大全]
    error‘vue‘不是内部或外部命令，也不是可运行的程序或批处理文件[Windows/Mac/Linux系统解决方案大全]在使用Vue.js开发时，常常会遇到如下错误提示：'vue'不是内部或外部命令，也不是可运行的程序或批处理文件。这是因为系统无法识别vue命令，可能源于多种原因：未安装或未正确配置环境变量、VueCLI未安装、Node.js管理工具（如nvm）切换版本后未重新全局安装等。作者
  • vue中实现验证码输入 结城 vue验证码vue输入框
    vue验证码input输入解决焦点切换有点晚了就不吐槽了，咱还是把代码上了，赶紧洗澡，养好精神明天努力上班！！！想学node,想学react,想精进webpack,想vue学的更好一点，了解底层代码，学算法，学计算机原理，想写自己的博客网站…这是一条学无止境的路，没办法要恰饭效果html部分js部分exportdefault{props:{inputNums:{type:Number,defaul
  • 微信小程序软键盘弹出的问题 结城 javascript小程序
    微信小程序软键盘弹出的问题这里记录一个微信中开发的一个小问题，1.当我开发这个页面功能的时候在缩小的状态正常情况聚焦时在手机上会有一个软键盘弹出来完全遮住了我textarea输入框2.遮住状态这个时候我们还发现页面被顶了上去，头部的导航栏没有了3.解决问题html部分/防止页面被顶我们使用adjust-position属性js部分//并且加入失去焦点，得到焦点事件，通过bindfocus事件对象我
  • 《Vue3笔记》第38节：Vue3项目集成TinyMCE富文本编辑器 Mr.小朱同学 【Vue3项目开发】笔记vue.js前端TinyMCE富文本编辑器tinymcetinymce编辑器Vue3集成tinymce
    前一个小节的内容中，已经介绍了Vue3项目中Quill如何配置highlight.js代码高亮的插件。这个小节来学一个新的富文本编辑器，叫做：TinyMCE。Vue3项目开发（微信文章集合）1.1、运行效果TinyMCE编辑器的效果，如下所示：1.2、安装TinyMCE依赖首先，需要安装tinymce依赖，执行下面命令：#安装依赖npminstalltinymce--save
  • 入门指南：Vue.js的基本概念和用法 是小韩呀 vue.jsjavascript前端
    引言：Vue.js是一种流行的JavaScript框架，用于构建现代化的Web应用程序。它以其简洁易用的API和响应式的数据绑定而闻名，使得开发人员能够更轻松地构建交互性强大的用户界面。本文将介绍Vue.js的基本概念和用法，帮助初学者快速入门。一、Vue.js是一个轻量级、渐进式的JavaScript框架，用于构建用户界面。它的设计目标是通过尽可能简单的API，让开发者能够更高效地开发交互性强大
  • nestjs[一文学懂TypeORM在nestjs中的日常使用]
    前提第一步：需要先了解nestjs中使用typeorm的引入和使用。参考官方：TypeORM集成第二步：熟悉typeorm文档了解与熟悉相关的api内容基础。学习步骤1.了解nestjs中引入typeorm并且配置引入相关库，参考前提-第一步在真实的项目中往往数据库信息都是放在配置文件中。其中Entities代表着数据表实体集，往往好多学习文档中都会开启自动扫描autoLoadEntities或者
  • nestjs[一文学懂nestjs中对npm功能包的封装，ioredis封装示例] 墨水白云 npm前端node.js
    问题描述NPM（NodePackageManager）是Node.js的包管理工具，它允许开发者轻松地分享、安装和管理依赖包，促进了代码的复用性和项目协作。而npm插件库将是nodejs开发中不可缺失的重要组成因素。在nestjs中，官方已经给我们开发了一系列各种各样的封装功能让我们能够快速的进行开发。然而实际应用中，我们在开发的过程中任然需要引入各种各样的插件工具，因此学会封装nestjs组件功
  • nodejs关于后端服务开发的探究 墨水白云 node.js
    前提在当前的环境中关于webserver的主流开发基本上都是java、php之类的，其中javaspring系列基本上占了大头，而python之流也在奋起直追，但别忘了nodejs也是可以做这个服务的，只是位置有点尴尬，现在就来探究下nodejs做webserver的当前现状。nodejs简介Node.js是一个基于ChromeV8引擎的JavaScript运行环境。Node.js使用了一个事件驱
  • React 最新版本（hooks写法） 抬头第一眼，是天 Reactreact.jsjavascript前端
    React目录提示：这里可以添加系列文章的所有文章的目录，目录需要自己手动添加提示：写完文章后，目录可以自动生成，如何生成可参考右边的帮助文档文章目录React目录前言一、指令jsx语法：需要注意的是：react的类名class变成了className，事件从onClick，因为class是react的内部关键字动态数据useState()相当于Vue3的ref（），reactive（）条件渲染列
  • 使用位运算优化 Vue.js 应用：高效状态管理技巧 结城 vuevue.js前端javascript
    在Vue.js开发中，位运算（BitwiseOperations）是一种高效的工具，尤其适用于需要管理大量布尔状态或优化性能的场景。位运算通过操作二进制位来实现状态的存储和检查，相比传统的数组或对象操作，内存占用更低，执行速度更快。本篇博客将介绍如何在Vue.js中应用位运算技巧，结合Vue的响应式系统实现高效的状态管理。读vue3响应式源码有感https://github.com/vuejs/c
  • linux系统服务器下jsp传参数乱码 3213213333332132 javajsplinuxwindowsxml
    在一次解决乱码问题中， 发现jsp在windows下用js原生的方法进行编码没有问题，但是到了linux下就有问题， escape,encodeURI,encodeURIComponent等都解决不了问题 但是我想了下既然原生的方法不行，我用el标签的方式对中文参数进行加密解密总该可以吧。于是用了java的java.net.URLDecoder,结果还是乱码，最后在绝望之际，用了下面的方法解决了
  • Spring 注解区别以及应用 BlueSkator spring
    1. @Autowired @Autowired是根据类型进行自动装配的。如果当Spring上下文中存在不止一个UserDao类型的bean，或者不存在UserDao类型的bean，会抛出 BeanCreationException异常，这时可以通过在该属性上再加一个@Qualifier注解来声明唯一的id解决问题。   2. @Qualifier 当spring中存在至少一个匹
  • printf和sprintf的应用 dcj3sjt126com PHPsprintfprintf
    <?php printf('b: %b <br>c: %c <br>d: %d <bf>f: %f', 80,80, 80, 80); echo '<br />'; printf('%0.2f <br>%+d <br>%0.2f <br>', 8, 8, 1235.456); printf('th
  • config.getInitParameter 171815164 parameter
    web.xml <servlet> <servlet-name>servlet1</servlet-name> <jsp-file>/index.jsp</jsp-file> <init-param> <param-name>str</param-name>
  • Ant标签详解--基础操作 g21121 ant
            Ant的一些核心概念：         build.xml：构建文件是以XML 文件来描述的，默认构建文件名为build.xml。        project：每个构建文
  • [简单]代码片段_数据合并 53873039oycg 代码
            合并规则:删除家长phone为空的记录,若一个家长对应多个孩子,保留一条家长记录,家长id修改为phone,对应关系也要修改。         代码如下:        
  • java 通信技术 云端月影 Java 远程通信技术
    在分布式服务框架中，一个最基础的问题就是远程服务是怎么通讯的，在Java领域中有很多可实现远程通讯的技术，例如：RMI、MINA、ESB、Burlap、Hessian、SOAP、EJB和JMS等，这些名词之间到底是些什么关系呢，它们背后到底是基于什么原理实现的呢，了解这些是实现分布式服务框架的基础知识，而如果在性能上有高的要求的话，那深入了解这些技术背后的机制就是必须的了，在这篇blog中我们将来
  • string与StringBuilder 性能差距到底有多大 aijuans
              之前也看过一些对string与StringBuilder的性能分析，总感觉这个应该对整体性能不会产生多大的影响，所以就一直没有关注这块！         由于学程序初期最先接触的string拼接，所以就一直没改变过自己的习惯！        
  • 今天碰到 java.util.ConcurrentModificationException 异常 antonyup_2006 java多线程工作IBM
    今天改bug，其中有个实现是要对map进行循环，然后有删除操作，代码如下： Iterator<ListItem> iter = ItemMap.keySet.iterator(); while(iter.hasNext()){ ListItem it = iter.next(); //...一些逻辑操作 ItemMap.remove(it); } 结果运行报Con
  • PL/SQL的类型和JDBC操作数据库 百合不是茶 PL/SQL表标量类型游标PL/SQL记录
    PL/SQL的标量类型:    字符,数字,时间,布尔,%type五中类型的 --标量：数据库中预定义类型的变量 --定义一个变长字符串 v_ename varchar2(10); --定义一个小数,范围 -9999.99~9999.99 v_sal number(6,2); --定义一个小数并给一个初始值为5.4 :=是pl/sql的赋值号
  • Mockito：一个强大的用于 Java 开发的模拟测试框架实例 bijian1013 mockito单元测试
    Mockito框架：         Mockito是一个基于MIT协议的开源java测试框架。         Mockito区别于其他模拟框架的地方主要是允许开发者在没有建立“预期”时验证被测系统的行为。对于mock对象的一个评价是测试系统的测
  • 精通Oracle10编程SQL(10)处理例外 bijian1013 oracle数据库plsql
    /* *处理例外 */ --例外简介 --处理例外-传递例外 declare v_ename emp.ename%TYPE; begin SELECT ename INTO v_ename FROM emp where empno=&no; dbms_output.put_line('雇员名：'||v_ename); exceptio
  • 【Java】Java执行远程机器上Linux命令 bit1129 linux命令
    Java使用ethz通过ssh2执行远程机器Linux上命令，   封装定义Linux机器的环境信息   package com.tom; import java.io.File; public class Env { private String hostaddr; //Linux机器的IP地址 private Integer po
  • java通信之Socket通信基础 白糖_ javasocket网络协议
    正处于网络环境下的两个程序，它们之间通过一个交互的连接来实现数据通信。每一个连接的通信端叫做一个Socket。一个完整的Socket通信程序应该包含以下几个步骤： ①创建Socket； ②打开连接到Socket的输入输出流； ④按照一定的协议对Socket进行读写操作； ④关闭Socket。   Socket通信分两部分：服务器端和客户端。服务器端必须优先启动，然后等待soc
  • angular.bind boyitech AngularJSangular.bindAngularJS APIbind
    angular.bind 描述：         上下文，函数以及参数动态绑定，返回值为绑定之后的函数. 其中args是可选的动态参数，self在fn中使用this调用。 使用方法：          angular.bind(se
  • java-13个坏人和13个好人站成一圈，数到7就从圈里面踢出一个来，要求把所有坏人都给踢出来，所有好人都留在圈里。请找出初始时坏人站的位置。 bylijinnan java
    import java.util.ArrayList; import java.util.List; public class KickOutBadGuys { /** * 题目：13个坏人和13个好人站成一圈，数到7就从圈里面踢出一个来，要求把所有坏人都给踢出来，所有好人都留在圈里。请找出初始时坏人站的位置。 * Maybe you can find out
  • Redis.conf配置文件及相关项说明（自查备用） Kai_Ge redis
       Redis.conf配置文件及相关项说明 # Redis configuration file example # Note on units: when memory size is needed, it is possible to specifiy # it in the usual form of 1k 5GB 4M and so forth: #
  • [强人工智能]实现大规模拓扑分析是实现强人工智能的前奏 comsci 人工智能
         真不好意思,各位朋友...博客再次更新...      节点数量太少,网络的分析和处理能力肯定不足,在面对机器人控制的需求方面,显得力不从心....      但是,节点数太多,对拓扑数据处理的要求又很高,设计目标也很高,实现起来难度颇大...
  • 记录一些常用的函数 dai_lm java
    public static String convertInputStreamToString(InputStream is) { StringBuilder result = new StringBuilder(); if (is != null) try { InputStreamReader inputReader = new InputStreamRead
  • Hadoop中小规模集群的并行计算缺陷 datamachine mapreducehadoop并行计算
    注：写这篇文章的初衷是因为Hadoop炒得有点太热，很多用户现有数据规模并不适用于Hadoop，但迫于扩容压力和去IOE（Hadoop的廉价扩展的确非常有吸引力）而尝试。尝试永远是件正确的事儿，但有时候不用太突进，可以调优或调需求，发挥现有系统的最大效用为上策。 -----------------------------------------------------------------
  • 小学4年级英语单词背诵第二课 dcj3sjt126com englishword
    egg  蛋 twenty 二十 any 任何 well 健康的，好   twelve 十二 farm 农场 every 每一个 back 向后，回   fast 快速的 whose 谁的 much 许多 flower 花   watch 手表 very 非常，很 sport 运动 Chinese 中国的  
  • 自己实践了github的webhooks, linux上面的权限需要注意 dcj3sjt126com githubwebhook
    环境, 阿里云服务器   1. 本地创建项目, push到github服务器上面   2. 生成www用户的密钥 sudo -u www ssh-keygen -t rsa -C "[email protected]"     3. 将密钥添加到github帐号的SSH_KEYS里面   3. 用www用户执行克隆, 源使
  • Java冒泡排序 蕃薯耀 冒泡排序Java冒泡排序Java排序
    冒泡排序 >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> 蕃薯耀 2015年6月23日 10:40:14 星期二 http://fanshuyao.iteye.com/
  • Excle读取数据转换为实体List【基于apache-poi】 hanqunfeng apache
    1.依赖apache-poi   2.支持xls和xlsx   3.支持按属性名称绑定数据值   4.支持从指定行、列开始读取   5.支持同时读取多个sheet   6.具体使用方式参见org.cpframework.utils.excelreader.CP_ExcelReaderUtilTest.java 比如： Str
  • 3个处于草稿阶段的Javascript API介绍 jackyrong JavaScript
    原文： http://www.sitepoint.com/3-new-javascript-apis-may-want-follow/?utm_source=html5weekly&utm_medium=email   本文中，介绍3个仍然处于草稿阶段，但应该值得关注的Javascript API. 1) Web Alarm API   &
  • 6个创建Web应用程序的高效PHP框架 lampcy Web框架PHP
    以下是创建Web应用程序的PHP框架，有coder bay网站整理推荐： 1. CakePHP CakePHP是一个PHP快速开发框架，它提供了一个用于开发、维护和部署应用程序的可扩展体系。CakePHP使用了众所周知的设计模式，如MVC和ORM，降低了开发成本，并减少了开发人员写代码的工作量。 2. CodeIgniter CodeIgniter是一个非常小且功能强大的PHP框架，适合需
  • 评"救市后中国股市新乱象泛起"谣言 nannan408
    首先来看百度百家一位易姓作者的新闻： 三个多星期来股市持续暴跌，跌得投资者及上市公司都处于极度的恐慌和焦虑中，都要寻找自保及规避风险的方式。面对股市之危机，政府突然进入市场救市，希望以此来重建市场信心，以此来扭转股市持续暴跌的预期。而政府进入市场后，由于市场运作方式发生了巨大变化，投资者及上市公司为了自保及为了应对这种变化，中国股市新的乱象也自然产生。 首先，中国股市这两天
  • 页面全屏遮罩的实现 方式 Rainbow702 htmlcss遮罩mask
    之前做了一个页面，在点击了某个按钮之后，要求页面出现一个全屏遮罩，一开始使用了position:absolute来实现的。当时因为画面大小是固定的，不可以resize的，所以，没有发现问题。 最近用了同样的做法做了一个遮罩，但是画面是可以进行resize的，所以就发现了一个问题，当画面被reisze到浏览器出现了滚动条的时候，就发现，用absolute 的做法是有问题的。后来改成fixed定位就
  • 关于angularjs的点滴 tntxia AngularJS
      angular是一个新兴的JS框架，和以往的框架不同的事，Angularjs更注重于js的建模，管理，同时也提供大量的组件帮助用户组建商业化程序，是一种值得研究的JS框架。   Angularjs使我们可以使用MVC的模式来写JS。Angularjs现在由谷歌来维护。   这里我们来简单的探讨一下它的应用。   首先使用Angularjs我
  • Nutz--->>反复新建ioc容器的后果 xiaoxiao1992428 DAOmvcIOCnutz
    问题： public class DaoZ {     public static Dao dao() { // 每当需要使用dao的时候就取一次     Ioc ioc = new NutIoc(new JsonLoader("dao.js"));     return ioc.get(
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他