赤焰梦
赤焰梦

【JavaScript】仿青柠搜索界面


点击搜索栏，背景模糊，出现图标。点击界面任意处，失去焦点，恢复原样
【JavaScript】仿青柠搜索界面_第1张图片
代码：

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>
  head>
  
  <script
    type="module"
    src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.esm.js"
  >script>
  <script
    nomodule
    src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.js"
  >script>
  <link rel="stylesheet" href="18.css" />
  <body>
    <div class="container">
      <i class="one"> <ion-icon name="logo-windows">ion-icon>i>
      <div class="search-box">
        <input type="text " class="search-btn" placeholder="搜索" />
      div>
      <i class="two"><ion-icon name="search-outline">ion-icon>i>
    div>
    <div class="timeBox">div>
  body>
  <script>
    var one = document.querySelector(".one");
    var two = document.querySelector(".two");
    var container = document.querySelector(".container");
    var searchBtn = document.querySelector(".search-btn");
    var styleOne = document.createElement("style");
    var searchBox = document.querySelector(".search-box");
    var timeBox = document.querySelector(".timeBox");
    searchBtn.addEventListener("focus", function () {
      styleOne.innerHTML = `body::before{content:"";filter:blur(12px) ;transform:scale(1.03);}`;
      document.head.appendChild(styleOne);
      one.style.opacity = "1";
      two.style.opacity = "1";
      // background: rgba(255, 255, 255, 0.4);
      container.style.background = "rgba(255, 255, 255, 0.9)";
      //   获取焦点,移开鼠标不会收回宽度
      searchBox.style.width = "400px";
    });
    // 失去焦点后恢复原状
    searchBtn.addEventListener("blur", function () {
      one.style.opacity = "0";
      two.style.opacity = "0";
      container.style.background = "rgba(255, 255, 255, 0.1)";
      document.head.removeChild(styleOne);
      searchBox.style.width = "";
    });
    //获取时间
    setInterval(() => {
      var data = new Date();
      let hh = padZero(data.getHours());
      let mm = padZero(data.getMinutes());
      let ss = padZero(data.getSeconds());
      timeBox.innerHTML = `${hh}:${mm}:${ss}`;
    }, 1000);
    // 防止时分秒变成单数,影响美感
    function padZero(n) {
      return n > 9 ? n : "0" + n;
    }
  script>
html>

CSS代码：

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100vw;
  height: 100vh;
  /* 背景图放大时，多余内容隐藏 */
  overflow: hidden;
}
body::before {
  content: "";
  /* 你在网站上所看见的背景图就是你所增加的图， 不会出现平铺或重复的现象。 */
  background: url(img/1.jpg) no-repeat center;
  background-size: auto;
  background-position: center;
  object-fit: cover;
  width: 150%;
  height: 150%;
  position: absolute;
  /* left: -50px;
  top: -50px; */
  transition: all 0.2s ease-in-out;
}
.container {
  height: 60px;
  background: rgba(255, 255, 255, 0.1);
  z-index: 1;
  display: flex;
  position: absolute;
  top: 200px;
  padding: auto 10px;
  justify-content: space-between;
  align-items: center;
  border-radius: 30px;
  backdrop-filter: blur(4px);
  box-shadow: 0 0 0 1px gray;
}
.timeBox {
  position: absolute;
  /* background: white; */
  height: 40px;
  top: 16%;
  left: 47%;
  color: white;
  text-align: center;
  line-height: 40px;
  font-size: 2em;
}
.timeBox:hover {
  transition: all 0.2s ease-in-out;
  transform: translateX(-5px) scale(1.2);
}
.search-box {
  width: 200px;
  transition: all 0.3s ease-in-out;
}
.container:hover .search-box {
  width: 440px;
}
.one {
  margin: auto 30px;
  font-size: 1.5em;
  opacity: 0;
  transition-delay: 0.4s;
  transition: all 0.3s ease;
}
.two {
  margin-right: 30px;
  font-size: 1.5em;
  opacity: 0;
  transition-delay: 0.4s;
  transition: all 0.3s ease;
}
/* .container:hover .one {
  opacity: 1;
}
.container:hover .two {
  opacity: 1;
} */
/* input设置 */
.search-btn {
  width: 100%;

  border: none;
  text-align: center;
  outline: none;
  background: inherit;
  font-size: 20px;

  transition: all 0.5s ease-in-out;
}
.search-btn::placeholder {
  color: rgba(255, 255, 255, 0.7);
  text-shadow: 0 0 1px 2px black;
}
.container:hover .search-btn::placeholder {
  color: rgba(119, 119, 119, 0.8);
}

效果图：

【JavaScript】仿青柠搜索界面_第2张图片

你可能感兴趣的:(javascript,css,前端)

  • 从0到1：AI微信红包开发全攻略，小白也能轻松上手！ 人工智能cursor程序员
    AI编程时代真的来了！最近我重度沉迷AI编程，发现它简直是开发神器，前端页面、后端服务，都能轻松搞定，效率直接起飞！最近临近过年，我突然冒出一个想法：为什么不试试用AI来做个微信红包呢？说干就干！1.明确需求要用AI做红包，首先得了解微信红包的规则。简单来说，我们需要一张精美的红包封面图，它会出现在发红包、消息气泡、拆红包、详情页等四个地方。而且尺寸也有要求，是957×1278像素。看起来有点复杂
  • 【Javascript Day11】数组的内置方法、添加获取、元素查询及练习、排序方法数组的内置方法 clp20031101 javascript前端开发语言
    数组的内置方法//js语法中所有的数据类型都是从对象演变而来的varstr="abc";console.log(typeofstr,str.constructor);//stringconsole.log(typeofstr=="string");varuser={};console.log(typeofuser,user.constructor);vararr=[1,2];console.log
  • Java全栈项目 - 校园跑腿服务系统 天天进步2015 Java项目实战java开发语言
    项目介绍校园跑腿服务系统是一个面向高校师生的互助平台,旨在解决校园内取快递、买饭、打印等日常跑腿需求。系统采用前后端分离架构,基于SpringBoot+Vue实现。技术栈后端SpringBoot2.xSpringSecurityMyBatisPlusMySQL8.0RedisRabbitMQJWT前端Vue2.xElementUIAxiosVuexVueRouter核心功能1.用户模块注册/登录实
  • CSS 布局的四大宗师：破解 BFC、IFC、GFC 和 FFC 的深层奥秘 dorabighead 前端八股总结css前端
    CSS布局的四大宗师：破解BFC、IFC、GFC和FFC的深层奥秘在CSS的江湖中，布局问题犹如无形的桎梏，困扰着每一位前端开发者。有人为浮动塌陷而抓狂，有人被复杂的响应式布局逼得手足无措。而在布局的巅峰，有四位宗师——BFC、IFC、GFC和FFC，它们分别掌控着块级、行内、网格和弹性布局的精髓。掌握它们，不仅仅是技术的进步，更是开启布局新境界的钥匙。今天，我们不再止步于表面，而是深入到它们的核
  • vue项目中使用mockjs模拟后端接口 上趣工作室 vue3.xvue2.xuniappvue.jsjavascriptecmascript
    Vue2中使用Mock.js来模拟数据是一个非常常见的做法，尤其是在前端开发时需要与后端接口交互但后端尚未完成的情况下。下面是一个简单的案例，演示如何在Vue2项目中使用Mock.js来模拟数据。1.安装Mock.js首先，确保在你的项目中安装了Mock.js。可以使用npm或yarn来安装：npminstallmockjs--save-dev或者yarnaddmockjs--dev2.将Mock
  • typescript中为js文件提供类型声明 上趣工作室 javascriptvue3.xtypescriptvue.jstypescript
    案例：为JS文件提供类型声明场景描述假设我们有一个JavaScript文件utils.js，其中包含一些实用工具函数和变量。为了在TypeScript中使用这些函数和变量并获得类型提示，我们可以使用declare关键词为它们提供类型声明。1.创建JavaScript文件：utils.js//utils.jsconstgreeting="Hello,World!";functionadd(a,b){
  • 可选链语法在javascript和typescript中的使用详解 上趣工作室 javascriptjavascripttypescript开发语言
    可选链（OptionalChaining）在JavaScript和TypeScript中的使用非常相似。以下是一个详细的使用案例，包括解释和示例代码。使用案例假设我们有一个用户对象，包含用户的个人信息和地址信息。我们希望安全地访问用户的地址信息，特别是当某些属性可能不存在时。示例对象constuser={name:"Alice",address:{street:"123MainSt",city:"
  • uniapp中使用全局样式文件引入的三种方式 上趣工作室 uniappvue3.xvue2.xuni-apprust开发语言
    如果你想在uni-app中全局引入SCSS文件（例如global.scss），可以通过以下步骤进行配置：方法一：在main.js中引入在main.js中引入全局样式：你可以在src/main.js文件中直接引入SCSS文件，这样可以确保在整个应用中都可以使用这些样式。//src/main.jsimportVuefrom'vue';importAppfrom'./App.vue';import'./
  • Vue3 使用 pinia 有一个好名字 javascript开发语言ecmascript
    什么是PiniaPinia是Vue的存储库，它允许您跨组件/页面共享状态，与vuex功能一样。准备安装npminstallpinia或者yarnaddpinia使用首先修改main.ts文件main.tsimport'./assets/main.css'import{createApp}from'vue'importAppfrom'./App.vue'import{createPinia}from
  • ::v-deep的理解 记得早睡~ vue.js前端javascript
    vue样式穿透在刚开始使用element-ui组件库时，想要修改其内部的样式，但总是不生效，通过查询资料，了解到了深度作用选择器。如果希望scoped样式中的一个选择器能够作用得“更深”，例如影响子组件，可以使用>>>操作符：.a>>>.b{width:100%;height:100%;background:red;}但是像scss等预处理器却无法解析>>>，所以我们使用下面的方式：.a{/dee
  • leetcode 66 ：加一【JavaScript/JS解法】 yuri.css 算法leetcode算法javascript
    还是先上题给定一个由整数组成的非空数组所表示的非负整数，在该数的基础上加一。最高位数字存放在数组的首位，数组中每个元素只存储单个数字。你可以假设除了整数0之外，这个整数不会以零开头。看完题之后感受就是join和split来回跳return(Number(digits.join(""))+1n).toString().split("");然后出现两个问题：1存在[0,0]这样的输入，如果直接转换为零
  • 【保姆级爬虫】微博关键词搜索并获取博文和评论内容（python+selenium+chorme） m0_74824076 爬虫pythonselenium
    微博爬虫记录写这个主要是为了防止自己忘记以及之后的组内工作交接，至于代码美不美观，写的好不好，统统不考虑，我只能说，能跑就不错了，上学压根没学过python好吧，基本上是crtl+c&ctrl+v丝滑小连招教会了我一点。写的很简单，认真看完就会用了文中筛选元素用到的一些筛选元素的正则匹配、beautifulsoup，css等相关方法我也不太懂，现学现用呗，还是那句话，能跑就行。配置简介：pytho
  • Java全栈项目--校园餐饮点评平台项目实战 天天进步2015 Java项目实战java开发语言
    项目介绍本项目是一个面向校园师生的餐饮点评平台，用户可以在平台上查看校园内各个餐厅的信息、菜品评价、发表点评等。项目采用SpringBoot+Redis+MySQL实现，包含用户登录、商户查询、优惠券秒杀、点评发布等功能。技术栈后端：SpringBoot、MyBatis-Plus、Redis前端：Vue.js、ElementUI数据库：MySQL缓存：Redis核心功能实现1.登录功能采用Redi
  • Java全栈项目 - 农产品溯源管理系统开发实践 天天进步2015 Java项目实战java开发语言
    一、项目介绍农产品溯源管理系统是一个基于Java全栈技术开发的现代化信息系统，旨在实现农产品从种植、生产到销售的全过程追踪管理。本系统帮助提高农产品质量安全监管效率，保障食品安全。二、技术架构后端技术栈：SpringBoot2.5.xSpringSecurityMyBatisPlusMySQL8.0RedisJWT认证前端技术栈：Vue.js3.0ElementPlusAxiosEchartsVu
  • JavaScript 操作符与表达式 布兰妮甜 #JavaScript基础javascript操作符表达式箭头函数前端开发
    Hi,我是布兰妮甜，编写流畅、愉悦用户体验的程序员。JavaScript是一种功能强大且灵活的编程语言，广泛应用于前端和后端开发。它提供了一系列丰富的操作符和表达式来处理数据、执行逻辑判断以及控制程序流程。理解这些概念对于编写高效、可读性强的代码至关重要。下面将详细探讨JavaScript中的操作符与表达式。文章目录一、操作符（Operators）二、表达式（Expressions）三、总结一、操
  • 【商城系统技术选型】 启山智软 商城 源码 微信小程序小程序java
    商城系统技术选型是一个复杂但至关重要的过程，它直接关系到商城系统的性能、可扩展性、安全性以及用户体验等多个方面。以下是一些关键的技术选型考虑因素：前端技术选型框架选择：React或Vue.js等流行前端框架是不错的选择，它们具有良好的可组件化和可重用性，且社区资源丰富，有大量的插件和工具可供使用，能提高开发效率和界面的交互性。响应式设计：确保系统能自适应不同设备屏幕，如手机、平板、电脑等，提供一致
  • vant组件库的按需导入导出 ordinary90 前端全栈开发VUEvue.jsjavascript前端
    要按需导入和导出Vant组件库的Vuex模块，首先需要在项目的入口文件中引入所需的组件：import{Button,Toast}from'vant';import'vant/lib/index.css';Vue.use(Button);Vue.use(Toast);接下来，创建一个store文件夹，在该文件夹下创建index.js文件，用于定义Vuex的模块、状态和操作。importVuefrom
  • CSS垂直居中的24种方法(最全最仔细) 兴风键盘侠 前端开发css前端
    在CSS中，垂直居中的方法有很多，具体的实现方式取决于布局的上下文（如是否有父容器、是否是块级元素、是否固定高度等）。以下是最全的CSS垂直居中方法：1.使用line-height(仅用于单行文本)适用于单行文本，并且元素的高度已知。div{height:200px;line-height:200px;/*line-height设置为与容器高度相同*/text-align:center;}2.使用
  • 前端建议玩node？？？ web网站装修工 前端javascriptvue.js前端框架node.js后端
    想搞个小项目玩玩顺便挣点零花钱，那node是最简单和方便的。我就发现一个node+vue后台管理比较实用，可以直接那来用。直通车：vue+node源码https://gitee.com/MMinter/vue_node核心功能模块用户管理用户信息维护：管理员可以创建、更新和删除用户账户。用户状态控制：包括激活或禁用用户账户，确保安全性和合规性。角色管理角色创建与分配：根据业务需求创建不同的角色，并
  • 都用vue3了，还这样用emit？ web网站装修工 javascriptvue.js前端node.jsvue
    今天查验一位前端同事代码，发现他为了方便封装了一个通用输入框。但也发现了很严重问题！！！先看看他的封装：子组件：import{ref}from'vue'constname=ref('')constemits=defineEmits(['getName'])constnameBlur=()=>{emits('getName',name.value)}父页面：importInputComponents
  • 黑客常备十大编程语言，每一个都不容易学，但每一个又很有用 一秋的编程笔记 Python编程计算机科技数据库sql爬虫python自动化编程语言
    文章目录1、C语言2、Python3、SQL4、Javascript5、PHP6、C++编程7、JAVA8、Ruby9、Perl10、BashPython学习资源分享1、Python所有方向的学习路线2、学习软件3、精品书籍4、入门学习视频5、实战案例6、清华编程大佬出品《漫画看学Python》7、Python副业兼职与全职路线一定要注意，您选择的编程将在很大程度上取决于您要定位的系统类型和计划使
  • Spring Boot 实战篇（四）：实现用户登录与注册功能 m0_74824054 springbootjava后端
    目录SpringBoot实战篇（四）：实现用户登录与注册功能一、用户注册功能（一）前端页面设计（简要提及）（二）后端实现二、用户登录功能（一）前端页面设计（简要提及）（二）后端实现在构建Web应用程序时，用户登录与注册功能是常见且重要的部分。以下将详细介绍在SpringBoot项目中实现用户登录与注册功能的步骤，并附上相应的代码示例。一、用户注册功能（一）前端页面设计（简要提及）创建注册页面使用H
  • Vben5登录过期无法再次登录问题，http状态码 前端typescript
    个人博客：无奈何杨（wnhyang）个人语雀：wnhyang共享语雀：在线知识共享Github：wnhyang-Overview前言最近在做项目前端，使用的https://doc.vben.pro/，在登录过期时出现了无法再次登录的问题，在此记录一下。项目前面那些直接略过，如果感兴趣直接看官方文档就可以，以下会根据解决过程附带部分官网说明。分析原因梳理流程文档前面的都已按照要求配置修改好了，所有的
  • 深入理解位运算符及其在JavaScript中的应用 javascript前端
    深入理解位运算符及其在JavaScript中的应用在我们之前的文章中，我们已经简单介绍了位运算在JavaScript中的应用，点击这里查看之前的文章。本篇文章，我们将更深入地探讨位运算，帮助你更全面地理解它。常见位运算符运算符描述运算规则&按位与and两个对应的二进制位都为1时，结果为1，否则为0\按位或or两个对应的二进制位有一者为1时，结果为1，否则为0^按位异或XOR两个对应的二进制位相异时
  • Vue.js结合ASP.NET Core构建用户登录与权限验证系统 眸笑丶 Vuec#npmvue.js
    1.环境准备2.创建项目3.Vue配置步骤一:安装包步骤二:配置文件步骤三:页面文件4.后台配置在本教程中，我将利用VisualStudio2022的强大集成开发环境，结合Vue.js前端框架和ASP.NETCore后端框架，从头开始创建一个具备用户登录与权限验证功能的Web应用程序。我们将充分利用VisualStudio的内置工具和模板来简化开发流程。1.环境准备VisualStudio2022
  • JavaScript详解十 ——数据类型、正则 遇见~未来 JavaScriptjavascript开发语言ecmascript
    （一）、数据类型内存1、简单类型与复杂类型简单类型又叫做基本数据类型或者值类型，复杂类型又叫做引用类型值类型：简单数据类型/基本数据类型，在存储时变量中存储的时值本身，因此叫做值类型string、number、boolean、undefined、null注意：简单数据类型null返回的是一个空的对象object如果有个变量我们以后打算存储为对象，暂时没想好放啥，就可以给null引用类型：复杂数据类
  • SpringBoot + Vue 项目超简单的合并部署方案 小北不想努力 教程springbootvue.jsjavanginxmaven
    文章目录前言一、Vue项目二、SpringBoot项目三、服务器上的部署四、端口映射五、请求跨域前言最近在捣鼓SpringBoot与Vue整合的项目，看了网上很多套的方案，自己总结了一套为轻量级个人开发提供的项目部署方案，简单有效！通过maven的打包在服务器上仅需要运行一个Jar包即可运行包括前端的整个项目。（全文无图！别问问就是太懒惹，下次有机会再补上。。）个人博客内有更多详细内容：https
  • reac 后端接口返回二进制文件流前端导出文件 初遇你时动了情 前端
    axios配置在你的请求中加入responseType:'blob'导出函数exportinterfaceDownloadFileOptions{filename:string;//文件名称}/***下载二进制文件流*@paramdata-二进制数据*@paramoptions-下载配置*/exportconstdownloadBinaryFile1=(data:any,//这里使用any是因为后
  • 前端必知必会-Node.js连接MongoDB 删除集合 编程岁月 前端node.jsmongodb
    文章目录Node.js连接MongoDB删除集合删除集合db.dropCollection总结Node.js连接MongoDB删除集合删除集合您可以使用drop()方法删除表或MongoDB中所谓的集合。drop()方法采用包含错误对象和结果参数的回调函数，如果成功删除集合，则返回true，否则返回false。示例获取您自己的Node.js服务器删除“customers”表：varMongoCli
  • 大文件上传的解决办法~文件切片、秒传、限制文件并发请求。。。 行咘行啊细狗 javascript开发语言ecmascript
    1、项目背景：针对大文件上传，如果将文件作为一个请求去发送给后端，会有以下几种问题，首先是上传时间长，用户不能进行其他操作，包括页面刷新等操作，其次有的接口会设置响应时间限制，可能大文件还没上传完就触发响应限制了，这样对用户很不友好，那么怎么解决呢？2、首先前端针对大文件使用文件切片技术，将大文件切成多个小文件，然后再将多个小文件传给后端，由后端进行组合即可。（文件切片）import{ref}fr
  • 书其实只有三类 西蜀石兰 类
    一个人一辈子其实只读三种书，知识类、技能类、修心类。 知识类的书可以让我们活得更明白。类似十万个为什么这种书籍，我一直不太乐意去读，因为单纯的知识是没法做事的，就像知道地球转速是多少一样（我肯定不知道），这种所谓的知识，除非用到，普通人掌握了完全是一种负担，维基百科能找到的东西，为什么去记忆？ 知识类的书，每个方面都涉及些，让自己显得不那么没文化，仅此而已。社会认为的学识渊博，肯定不是站在
  • 《TCP/IP 详解，卷1：协议》学习笔记、吐槽及其他 bylijinnan tcp
    《TCP/IP 详解，卷1：协议》是经典，但不适合初学者。它更像是一本字典，适合学过网络的人温习和查阅一些记不清的概念。 这本书，我看的版本是机械工业出版社、范建华等译的。这本书在我看来，翻译得一般，甚至有明显的错误。如果英文熟练，看原版更好： http://pcvr.nl/tcpip/ 下面是我的一些笔记，包括我看书时有疑问的地方，也有对该书的吐槽，有不对的地方请指正： 1.
  • Linux—— 静态IP跟动态IP设置 eksliang linuxIP
    一.在终端输入 vi /etc/sysconfig/network-scripts/ifcfg-eth0 静态ip模板如下： DEVICE="eth0" #网卡名称 BOOTPROTO="static" #静态IP（必须） HWADDR="00:0C:29:B5:65:CA" #网卡mac地址 IPV6INIT=&q
  • Informatica update strategy transformation 18289753290
    更新策略组件： 标记你的数据进入target里面做什么操作，一般会和lookup配合使用，有时候用0,1,1代表 forward  rejected rows被选中，rejected row是输出在错误文件里，不想看到reject输出，将错误输出到文件，因为有时候数据库原因导致某些column不能update，reject就会output到错误文件里面供查看，在workflow的
  • 使用Scrapy时出现虽然队列里有很多Request但是却不下载，造成假死状态 酷的飞上天空 request
    现象就是： 程序运行一段时间，可能是几十分钟或者几个小时，然后后台日志里面就不出现下载页面的信息，一直显示上一分钟抓取了0个网页的信息。 刚开始已经猜到是某些下载线程没有正常执行回调方法引起程序一直以为线程还未下载完成，但是水平有限研究源码未果。 经过不停的google终于发现一个有价值的信息，是给twisted提出的一个bugfix 连接地址如下http://twistedmatrix.
  • 利用预测分析技术来进行辅助医疗 蓝儿唯美 医疗
    2014年，克利夫兰诊所（Cleveland Clinic）想要更有效地控制其手术中心做膝关节置换手术的费用。整个系统每年大约进行2600例此类手术，所以，即使降低很少一部分成本，都可以为诊 所和病人节约大量的资金。为了找到适合的解决方案，供应商将视野投向了预测分析技术和工具，但其分析团队还必须花时间向医生解释基于数据的治疗方案意味着 什么。  克利夫兰诊所负责企业信息管理和分析的医疗
  • java 线程(一)：基础篇 DavidIsOK java多线程线程
                                                            &nbs
  • Tomcat服务器框架之Servlet开发分析 aijuans servlet
    最近使用Tomcat做web服务器，使用Servlet技术做开发时，对Tomcat的框架的简易分析： 疑问： 为什么我们在继承HttpServlet类之后，覆盖doGet(HttpServletRequest req, HttpServetResponse rep)方法后，该方法会自动被Tomcat服务器调用，doGet方法的参数有谁传递过来？怎样传递？ 分析之我见： doGet方法的
  • 揭秘玖富的粉丝营销之谜 与小米粉丝社区类似 aoyouzi 揭秘玖富的粉丝营销之谜
    玖富旗下悟空理财凭借着一个微信公众号上线当天成交量即破百万，第七天成交量单日破了1000万;第23天时，累计成交量超1个亿……至今成立不到10个月，粉丝已经超过500万，月交易额突破10亿，而玖富平台目前的总用户数也已经超过了1800万，位居P2P平台第一位。很多互联网金融创业者慕名前来学习效仿，但是却鲜有成功者，玖富的粉丝营销对外至今仍然是个谜。   　　近日，一直坚持微信粉丝营销
  • Java web的会话跟踪技术 百合不是茶 url会话Cookie会话Seession会话Java Web隐藏域会话
    会话跟踪主要是用在用户页面点击不同的页面时,需要用到的技术点   会话:多次请求与响应的过程     1,url地址传递参数,实现页面跟踪技术          格式:传一个参数的 url?名=值     传两个参数的 url?名=值 &名=值   关键代码
  • web.xml之Servlet配置 bijian1013 javaweb.xmlServlet配置
    定义： <servlet> <servlet-name>myservlet</servlet-name> <servlet-class>com.myapp.controller.MyFirstServlet</servlet-class> <init-param> <param-name>
  • 利用svnsync实现SVN同步备份 sunjing SVN同步E000022svnsync镜像
    1. 在备份SVN服务器上建立版本库    svnadmin create test 2. 创建pre-revprop-change文件     cd test/hooks/     cp pre-revprop-change.tmpl pre-revprop-change 3. 修改pre-revprop-
  • 【分布式数据一致性三】MongoDB读写一致性 bit1129 mongodb
    本系列文章结合MongoDB，探讨分布式数据库的数据一致性，这个系列文章包括： 数据一致性概述与CAP 最终一致性(Eventually Consistency) 网络分裂(Network Partition)问题 多数据中心(Multi Data Center) 多个写者(Multi Writer)最终一致性 一致性图表(Consistency Chart) 数据
  • Anychart图表组件-Flash图转IMG普通图的方法 白糖_ Flash
    问题背景：项目使用的是Anychart图表组件，渲染出来的图是Flash的，往往一个页面有时候会有多个flash图，而需求是让我们做一个打印预览和打印功能，让多个Flash图在一个页面上打印出来。   那么我们打印预览的思路是获取页面的body元素，然后在打印预览界面通过$("body").append(html)的形式显示预览效果，结果让人大跌眼镜：Flash是
  • Window 80端口被占用 WHY? bozch 端口占用window
    平时在启动一些可能使用80端口软件的时候，会提示80端口已经被其他软件占用，那一般又会有那些软件占用这些端口呢？    下面坐下总结：         1、web服务器是最经常见的占用80端口的，例如：tomcat , apache  , IIS , Php等等；         2
  • 编程之美-数组的最大值和最小值-分治法（两种形式） bylijinnan 编程之美
    import java.util.Arrays; public class MinMaxInArray { /** * 编程之美 数组的最大值和最小值 分治法 * 两种形式 */ public static void main(String[] args) { int[] t={11,23,34,4,6,7,8,1,2,23}; int[]
  • Perl正则表达式 chenbowen00 正则表达式perl
    首先我们应该知道 Perl 程序中，正则表达式有三种存在形式，他们分别是： 匹配：m/<regexp>;/ （还可以简写为 /<regexp>;/ ，略去 m） 替换：s/<pattern>;/<replacement>;/ 转化：tr/<pattern>;/<replacemnt>;
  • [宇宙与天文]行星议会是否具有本行星大气层以外的权力呢? comsci
          举个例子: 地球,地球上由200多个国家选举出一个代表地球联合体的议会,那么现在地球联合体遇到一个问题,地球这颗星球上面的矿产资源快要采掘完了....那么地球议会全体投票,一致通过一项带有法律性质的议案,既批准地球上的国家用各种技术手段在地球以外开采矿产资源和其它资源........    &
  • Oracle Profile 使用详解 daizj oracleprofile资源限制
    Oracle Profile 使用详解 转 一、目的： Oracle系统中的profile可以用来对用户所能使用的数据库资源进行限制，使用Create Profile命令创建一个Profile，用它来实现对数据库资源的限制使用，如果把该profile分配给用户，则该用户所能使用的数据库资源都在该profile的限制之内。 二、条件： 创建profile必须要有CREATE PROFIL
  • How HipChat Stores And Indexes Billions Of Messages Using ElasticSearch & Redis dengkane elasticsearchLucene
    This article is from an interview with Zuhaib Siddique, a production engineer at HipChat, makers of group chat and IM for teams. HipChat started in an unusual space, one you might not
  • 循环小示例，菲波拉契序列，循环解一元二次方程以及switch示例程序 dcj3sjt126com c算法
    # include <stdio.h> int main(void) { int n; int i; int f1, f2, f3; f1 = 1; f2 = 1; printf("请输入您需要求的想的序列："); scanf("%d", &n); for (i=3; i<n; i
  • macbook的lamp环境 dcj3sjt126com lamp
      sudo vim /etc/apache2/httpd.conf   /Library/WebServer/Documents 是默认的网站根目录   重启Mac上的Apache服务   这个命令很早以前就查过了，但是每次使用的时候还是要在网上查： 停止服务：sudo /usr/sbin/apachectl stop 开启服务：s
  • java ArrayList源码 下 shuizhaosi888 ArrayList源码
    版本 jdk-7u71-windows-x64   JavaSE7 ArrayList源码上：http://flyouwith.iteye.com/blog/2166890     /** * 从这个列表中移除所有c中包含元素 */ public boolean removeAll(Collection<?> c) {
  • Spring Security（08）——intercept-url配置 234390216 Spring Securityintercept-url访问权限访问协议请求方法
    intercept-url配置 目录 1.1     指定拦截的url 1.2     指定访问权限 1.3     指定访问协议 1.4     指定请求方法   1.1   &n
  • Linux环境下的oracle安装 jayung oracle
    linux系统下的oracle安装 本文档是Linux(redhat6.x、centos6.x、redhat7.x) 64位操作系统安装Oracle 11g(Oracle Database 11g Enterprise Edition Release 11.2.0.4.0 - 64bit Production)，本文基于各种网络资料精心整理而成，共享给有需要的朋友。如有问题可联系：QQ：52-7
  • hotspot虚拟机 leichenlei javaHotSpotjvm虚拟机文档
    JVM参数  http://docs.oracle.com/javase/6/docs/technotes/guides/vm/index.html   JVM工具 http://docs.oracle.com/javase/6/docs/technotes/tools/index.html   JVM垃圾回收 http://www.oracle.com
  • 读《Node.js项目实践：构建可扩展的Web应用》 ——引编程慢慢变成系统化的“砌砖活” noaighost Webnode.js
    读《Node.js项目实践：构建可扩展的Web应用》 ——引编程慢慢变成系统化的“砌砖活” 眼里的Node.JS 初初接触node是一年前的事，那时候年少不更事。还在纠结什么语言可以编写出牛逼的程序，想必每个码农都会经历这个月经性的问题：微信用什么语言写的？facebook为什么推荐系统这么智能，用什么语言写的？dota2的外挂这么牛逼，用什么语言写的？……用什么语言写这句话，困扰人也是阻碍
  • 快速开发Android应用 rensanning android
    Android应用开发过程中，经常会遇到很多常见的类似问题，解决这些问题需要花时间，其实很多问题已经有了成熟的解决方案，比如很多第三方的开源lib，参考 Android Libraries 和 Android UI/UX Libraries。 编码越少，Bug越少，效率自然会高。 但可能由于 根本没听说过、听说过但没用过、特殊原因不能用、自己已经有了解决方案等等原因，这些成熟的解决
  • 理解Java中的弱引用 tomcat_oracle java工作面试
    　不久之前，我 面试了一些求职Java高级开发工程师的应聘者。我常常会面试他们说，“你能给我介绍一些Java中得弱引用吗？”，如果面试者这样说，“嗯，是不是垃圾回收有关的？”，我就会基本满意了，我并不期待回答是一篇诘究本末的论文描述。 　　然而事与愿违，我很吃惊的发现，在将近20多个有着平均5年开发经验和高学历背景的应聘者中，居然只有两个人知道弱引用的存在，但是在这两个人之中只有一个人真正了
  • 标签输出html标签" target="_blank">关于标签输出html标签 xshdch jsp
    http://back-888888.iteye.com/blog/1181202 关于<c:out value=""/>标签的使用，其中有一个属性是escapeXml默认是true(将html标签当做转移字符，直接显示不在浏览器上面进行解析)，当设置escapeXml属性值为false的时候就是不过滤xml，这样就能在浏览器上解析html标签， &nb
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他