业余草
业余草

HTML5仿手机微信聊天界面

给大家带来的是HTML5仿手机微信聊天界面，截图效果如下：

HTML5仿手机微信聊天界面_第1张图片

源代码如下：

XML/HTML Code 复制内容到剪贴板
  1. >  
  2. <html>  
  3. <head>  
  4.     <meta charset="UTF-8">  
  5.     <title>HTML5模拟微信聊天界面title>  
  6.     <style>  
  7.   /**重置标签默认样式*/   
  8.         * {   
  9.             margin: 0;   
  10.             padding: 0;   
  11.             list-style: none;   
  12.             font-family: '微软雅黑'   
  13.         }   
  14.         #container {   
  15.             width: 450px;   
  16.             height: 780px;   
  17.             background: #eee;   
  18.             margin: 80px auto 0;   
  19.             position: relative;   
  20.             box-shadow: 20px 20px 55px #777;   
  21.         }   
  22.         .header {   
  23.             background: #000;   
  24.             height: 40px;   
  25.             color: #fff;   
  26.             line-height: 34px;   
  27.             font-size: 20px;   
  28.             padding: 0 10px;   
  29.         }   
  30.         .footer {   
  31.             width: 430px;   
  32.             height: 50px;   
  33.             background: #666;   
  34.             position: absolute;   
  35.             bottom: 0;   
  36.             padding: 10px;   
  37.         }   
  38.         .footer input {   
  39.             width: 275px;   
  40.             height: 45px;   
  41.             outline: none;   
  42.             font-size: 20px;   
  43.             text-indent: 10px;   
  44.             position: absolute;   
  45.             border-radius: 6px;   
  46.             right: 80px;   
  47.         }   
  48.         .footer span {   
  49.             display: inline-block;   
  50.             width: 62px;   
  51.             height: 48px;   
  52.             background: #ccc;   
  53.             font-weight: 900;   
  54.             line-height: 45px;   
  55.             cursor: pointer;   
  56.             text-align: center;   
  57.             position: absolute;   
  58.             right: 10px;   
  59.             border-radius: 6px;   
  60.         }   
  61.         .footer span:hover {   
  62.             color: #fff;   
  63.             background: #999;   
  64.         }   
  65.         #user_face_icon {   
  66.             display: inline-block;   
  67.             background: red;   
  68.             width: 60px;   
  69.             height: 60px;   
  70.             border-radius: 30px;   
  71.             position: absolute;   
  72.             bottom: 6px;   
  73.             left: 14px;   
  74.             cursor: pointer;   
  75.             overflow: hidden;   
  76.         }   
  77.         img {   
  78.             width: 60px;   
  79.             height: 60px;   
  80.         }   
  81.         .content {   
  82.             font-size: 20px;   
  83.             width: 435px;   
  84.             height: 662px;   
  85.             overflow: auto;   
  86.             padding: 5px;   
  87.         }   
  88.         .content li {   
  89.             margin-top: 10px;   
  90.             padding-left: 10px;   
  91.             width: 412px;   
  92.             display: block;   
  93.             clear: both;   
  94.             overflow: hidden;   
  95.         }   
  96.         .content li img {   
  97.             float: left;   
  98.         }   
  99.         .content li span{   
  100.             background: #7cfc00;   
  101.             padding: 10px;   
  102.             border-radius: 10px;   
  103.             float: left;   
  104.             margin: 6px 10px 0 10px;   
  105.             max-width: 310px;   
  106.             border: 1px solid #ccc;   
  107.             box-shadow: 0 0 3px #ccc;   
  108.         }   
  109.         .content li img.imgleft {    
  110.             float: left;    
  111.         }   
  112.         .content li img.imgright {    
  113.             float: right;    
  114.         }   
  115.         .content li span.spanleft {    
  116.             float: left;   
  117.             background: #fff;   
  118.         }   
  119.         .content li span.spanright {    
  120.             float: right;   
  121.             background: #7cfc00;   
  122.         }   
  123.     style>  
  124.     <script>  
  125.         window.onload = function(){   
  126.             var arrIcon = ['http://www.xttblog.com/icons/favicon.ico','http://www.xttblog.com/wp-content/uploads/2016/03/123.png'];   
  127.             var num = 0;     //控制头像改变   
  128.             var iNow = -1;    //用来累加改变左右浮动   
  129.             var icon = document.getElementById('user_face_icon').getElementsByTagName('img');   
  130.             var btn = document.getElementById('btn');   
  131.             var text = document.getElementById('text');   
  132.             var content = document.getElementsByTagName('ul')[0];   
  133.             var img = content.getElementsByTagName('img');   
  134.             var span = content.getElementsByTagName('span');   
  135.   
  136.             icon[0].onclick = function(){   
  137.                 if(num==0){   
  138.                     this.src = arrIcon[1];   
  139.                     num = 1;   
  140.                 }else if(num==1){   
  141.                     this.src = arrIcon[0];   
  142.                     num = 0;   
  143.                 }                   
  144.             }   
  145.             btn.onclick = function(){   
  146.                 if(text.value ==''){   
  147.                     alert('不能发送空消息');   
  148.                 }else {   
  149.                     content.innerHTML += '<li><img src="'+arrIcon[num]+'"><span>'+text.value+'span>li>';   
  150.                     iNow++;   
  151.                     if(num==0){   
  152.                         img[iNow].className += 'imgright';   
  153.                         span[iNow].className += 'spanright';   
  154.                     }else {   
  155.                         img[iNow].className += 'imgleft';   
  156.                         span[iNow].className += 'spanleft';   
  157.                     }   
  158.                     text.value = '';   
  159.      // 内容过多时,将滚动条放置到最底端   
  160.      contentcontent.scrollTop=content.scrollHeight;     
  161.                 }   
  162.             }   
  163.         }   
  164.     script>  
  165. head>  
  166. <body>  
  167.     <div id="container">  
  168.         <div class="header">  
  169.             <span style="float: left;">业余草:模拟微信聊天界面span>  
  170.             <span style="float: right;">14:21span>  
  171.         div>  
  172.         <ul class="content">  
  173.      
  174.   ul>  
  175.         <div class="footer">  
  176.             <div id="user_face_icon">  
  177.                 <img src="http://www.xttblog.com/icons/favicon.ico" alt="">  
  178.             div>  
  179.             <input id="text" type="text" placeholder="说点什么吧...">  
  180.             <span id="btn">发送span>  
  181.         div>  
  182.     div>  
  183. body>  
  184. html>  

以上就是本文的全部内容，是不是很精彩，希望对大家的学习有所帮助。

原文:http://www.xttblog.com/?p=265

你可能感兴趣的:(HTML5仿手机微信聊天界面)

  • 【嵌入式面试】2024年嵌入式经典面试题汇总（Linux 文件IO）_嵌入式linux面试题 2401_83704192 程序员嵌入式
    Linux主要通过shell命令进行安装。可以使用apt方式安装（软件包管理系统）、rpm包安装、deb包安装、tar.gz源代码包安装、tar.bz2源代码包安装、yum方式安装(安装rpm包)、bin文件安装。1.8占用系统资源linux是字符界面，占用的系统资源较于windows下的图形界面所占的资源小。Windows是图形界面，较于Linux的字符界面所占的资源大。参考链接2Linux的根
  • TrayTool：任务栏托盘图标管理神器 高杉峻
    本文还有配套的精品资源，点击获取简介：TrayTool是一款精巧的免费软件，专门用于隐藏或显示Windows任务栏托盘区域的图标。它帮助用户清理任务栏杂乱，并根据需求自定义托盘图标显示。作为绿色软件，TrayTool无需安装，即下即用，易于携带和管理。通过提供个性化任务栏体验，它成为优化系统界面的理想工具。1.托盘图标管理的重要性1.1托盘图标管理概述在现代操作系统中，系统托盘区域是用户与软件交互
  • 为大模型提供webui界面的利器：Open WebUI 完全本地离线部署deepseek r1 skywalk8163 人工智能人工智能deepseekwebui
    为大模型提供webui界面的利器：OpenWebUIOpenWebUI的官网：Home|OpenWebUI开源代码：WeTab新标签页OpenWebUI是一个可扩展、功能丰富、用户友好的自托管AI平台，旨在完全离线运行。它支持各种LLM运行程序，如Ollama和OpenAI兼容的API，内置RAG推理引擎，使其成为一个强大的AI部署解决方案。安装使用pip进行安装：pipinstallopen-w
  • twrp选择sdcard为0B的问题解决 新青年. 踩坑记录刷机其他经验分享
    如果刷入的twrp版本在3.2.3版本以下的有无法选择sdcard的bug,必须先格式化Data分区,尝试一下.,请更新twrp版本尝试解决,由于笔者没有找到适用于我手机的(oppor11)的刷机包,所以我选择了去奇兔下载twrp,他的是3.2.3来的,更新好之后进入Rec,继续格式化Data,把Data分区文件系统改为ext4,然后重启到Recovery,再重启到系统,传好文件,再进入rec,之
  • 前端25.1.26学习记录 RlTED 前端学习javascript
    DOM是给予如：JS编程语言使用的apiDOM是树状结构根节点是html节点是DOM的最小单位。等Node类型可以类比于java的object类，所有的节点都需要继承TA。TA提供了最基本的操作方法如：访问父、子、同级节点增加和删除节点。Document类型Document类指向整个HTML界面。操作的是html页面中的节点。Document可以通过class、tag（标签）、id对节点进行查询D
  • 抠图神器，全离线使用，支持win和mac 互联网之路. 软件工具信息与通信
    互联网各领域资料分享专区(不定期更新)：Sheet前言由于内容较多，且不便于排版，为避免资源失效，请用手机点击链接进行保存，若链接生效请及时反馈，谢谢~正文链接如下（为避免资源失效，请用手机点击链接进行保存）：夸克网盘分享
  • 「iOS」通过CoreLocation Framework深入了解MVC架构 小鹿撞出了脑震荡 iosmvc架构
    「iOS」通过CoreLocationFramework重新了解多界面传值以及MVC架构文章目录「iOS」通过CoreLocationFramework重新了解多界面传值以及MVC架构前言CoreLocation了解根据需求建模设计属性方法设计协议传值Block传值KVONotification通知方式总结参考文章前言在这个学期的前段时间进行了MVC的相关学习，并且使用MVC完成了知乎日报奥的项目
  • 用 Python 实现经典的 2048 游戏：一步步带你打造属于你的小游戏！ 一位小说男主 pythonpython游戏
    用Python实现经典的2048游戏：一步步带你打造属于你的小游戏！（结尾附完整代码）简介2048是一个简单而又令人上瘾的数字拼图游戏。玩家通过滑动方块使相同数字的方块合并，目标是创造出数字2048！在这篇博客中，我们将用Python的Tkinter库从零开始实现这款游戏，涵盖从界面设计到逻辑实现的每一个细节，帮助你全面了解背后的开发思路。游戏特点经典玩法：滑动合并相同数字，尽可能达到2048。随
  • VScode开发STM32 predestination836 vscodestm32单片机
    由于keil5的界面太差（太丑），而VScode的界面，代码提醒等基本完杀keil5，所以VScode负责写代码，keil5负责代码的下载和调试VScode的下载和安装官网地址：https://code.visualstudio.com/但官网下载太慢，这里附上某盘的连接：链接：https://pan.baidu.com/s/10hL0aqUOlbe10fuSSDFS4w?pwd=3ouk提取码：
  • uniapp - [全端兼容] 实现精美Editor富文本编辑器功能，uniApp全平台兼容的富文本插件组件用户可上传图片及对接服务器存储文件等，手机移动端H5网页富文本/小程序富文本/App富文本！ 王二红 +UniAppuni-app富文本使用富文本编辑器插入图片图像uni-app微信小程序富文本uniapp网页h5端富文本uniap安卓苹果app富文本富文本上传图片及服务器保存
    前言网上的教程乱七八糟且兼容性太差，本文提供优质示例。在uni-app全平台兼容（H5网页网站、支付宝/微信小程序、安卓App、苹果App、nvue）开发中，详解引入使用富文本编辑器及图片上传显示等功能，用户可上传图片显示和服务器保存回显效果（插入图片），uniApp各平台都兼容的富文本editor插件，自定义富文本按钮功能及自由排版样式布局，uniapp富文本组件插件用于发布文章/发布资讯公告/
  • 微信小程序web-view打开网页与网页H5跳转微信小程序 XLin666666 微信小程序前端小程序
    1、微信小程序web-view打开网页目前从小程序进入网页的方法使用web-view1.1、小程序官网需要配置业务域名打开官网，选择左侧开发管理，选择开发设置，往下找到业务域名，添加域名。设置时需要下载校验文件，并将文件放置在域名根目录下。1.2、web-view配置完成但是打不开web-view|微信开放文档web-view组件是一个可以用来承载网页的容器，会自动铺满整个小程序页面。个人类型与海
  • 爬虫实战--- （6）链家房源数据爬取与分析可视化 rain雨雨编程 爬虫实战系列python爬虫数据分析
    文章持续跟新，可以微信搜一搜公众号[rain雨雨编程]，第一时间阅读，涉及数据分析，机器学习，Java编程，爬虫，实战项目等。目录前言1.爬取目标2.所涉及知识点3.步骤分析（穿插代码讲解）步骤一：发送请求步骤二：获取数据步骤三：解析数据步骤四：保存数据4.爬取结果5.完整代码6数据可视化前言今天我将为大家分享一个非常实用的Python项目——链家房源数据的爬取与分析可视化。在这篇文章中，我们将分
  • 微信小程序web-view嵌入h5页面，分享当前页 木本心声 微信小程序微信小程序
    ①index.wxml为web-view标签添加bindload事件web-viewbindload|微信开放文档②index.js页面加载成功时会触发bindload事件绑定的方法此方法可以获取当前页面的地址getCurUrl(e){varshareUrl=e.detail.src;this.setData({shareUrl:shareUrl,})},③index.js把地址赋值给变量shar
  • uni-app 实现自定义底部导航 蜕变菜鸟 uni-app
    原博：https://juejin.cn/post/7365533404790341651在开发微信小程序，通常会使用uniapp自带的tabBar实现底部图标和导航，但现实有少量应用使用uniapp自带的tabBar无法满足需求，这时需要自定义底部tabBar功能。例如下图的需求，在中间添加一个加号，例如根据不同登录的角色显示不同的tabBar按钮等，这些功能在无法通过uniapp自带的tabB
  • 调用wx.openDocument，文件或文件夹不在白名单中, 上传时会被忽略, 在真机上可能无法读取 黑云压城After 微信uni-app前端微信小程序
    1.这个问题可能是由于微信小程序的安全策略导致的。微信小程序对于网络请求和文件读取都有一些限制，其中包括白名单机制。如果你的小程序中的文件不在白名单中，那么在真机上可能无法读取。怎么解决这个问题，我们先使用uni.downloadFile把后台接口或者本地的PDF以及其他格式转为获取到本地临时路径。然后再使用uni.openDocument就可以了。[代码]复制就能用。Click(){//this
  • 【微信小程序】page.json配置-easycom引入自定义组件 墨夶 微信小程序微信小程序json小程序
    在微信小程序中，page.json文件不仅可以用于配置单个页面的样式和其他属性，还可以用于配置easycom模式，以简化自定义组件的引入和使用。easycom模式允许开发者在不进行手动引入和注册的情况下，直接在页面中使用自定义组件。本文将详细介绍如何在page.json文件中配置easycom模式，并提供一些最佳实践。1.easycom模式简介easycom模式是UniApp提供的一种组件自动注册
  • webview打开本小程序页面 2401_86082326 小程序
    首先下载微信**jssdk**npminstallweixin-js-sdk在页面中引入importwxfrom'weixin-js-sdk'之后就可以使用wx.miniProgram.navigateTo({url:'/pages/index/index?id='+id}）的方式进行h5和微信小程序页面进行跳转互通
  • 使用Vue3来实现一个倒计时器以及倒计时任务 记得开心一点嘛 JavaWeb前端开发技术栈vue.jselementuijavascriptvueHtml
    本内容使用Vue3，以及element-plus辅助开发。首先展示倒计时器的功能：手动设置倒计时器的倒计时时间开始倒计时按钮暂停倒计时按钮重新开始倒计时按钮其次展示倒计时任务管理界面功能：创建倒计时任务选择任务并进行倒计时删除任务目录一.倒计时器：1.html：2.script：（1）状态变量：（2）格式化显示时间：（3）初始化倒计时：（4）开始按钮startCountdown->启动倒计时器：（
  • AI如何帮助解决生活中的琐碎难题？ HUIBUR科技 人工智能
    引言：AI已经融入我们的日常生活你有没有遇到过这样的情况——早上匆忙出门却忘了带钥匙，到了公司才想起昨天的会议资料没有打印，或者下班回家还在纠结晚饭吃什么？这些看似微不足道的小事，往往让人疲惫不堪。而如今，人工智能（AI）的出现，正在悄然改变这一切。从语音助手到智能家居，从健康管理到购物推荐，AI正在帮助人们处理生活中的琐碎事务，让每一天变得更高效、更轻松。只需要动动嘴或者点一点手机，就能完成过去
  • 电脑（伪）大神装B必备，来学几个windows脚本命令 zyxgtwsjgzs 资源分享官方教程
    作为一个经常使用电脑的人来说，掌握一些脚本命令以备在别人面前装B是很有必要的。看完这篇文章，你就学会了基础常用的装B命令，让装B轻松自如。其实脚本命令没什么新鲜的，属于低级的操作，所谓的电脑大神也是伪大神。想当年，我小时候，把一堆CMD命令抄在纸上来回背，研究各种批处理，脚本操作，就为了装一波B。大家都熟悉windows图形操作界面，其实windows还有一套cmd命令同样可以实现基本的操作。wi
  • 微信聊天记录批量导出 小软件大世界 微信
    是否曾因为WX聊天记录太多无法导出而苦恼？在手机上导出时间太长，还占用手机使用？网络还不稳定？或者想保存某些重要对话，却发现操作复杂，甚至需要额外工具？今天给大家推荐一款非常实用的PC端WX聊天记录导出神器：wechatDataBackup！功能亮点wechatDataBackup提供了一个类似微信的简易操作界面，让导出聊天记录变得像聊天一样简单。以下是它的核心功能：1、一键导出多类型信息支持的内
  • 支付域——收银台 庄小焱 支付域金融支付
    摘要随着支付方式的多样化和业务需求的不断演进，支付收银台的展示策略日益复杂。平台不仅支持微信、支付宝、银行卡、苹果支付、银联闪付等多种支付渠道，还需根据业务场景、商户要求、平台营销策略和用户习惯进行个性化展示。例如，不同品类商品可能受到特定渠道的限制，大商户可能有特殊的支付方式要求，甚至某些支付渠道会通过合作模式影响展示顺序。最终，收银台的展示需要兼顾提高支付成功率、优化用户体验和满足各方需求，实
  • 探索前端的未来：深度使用 SolidJS 构建高性能用户界面 桂月二二 前端ui
    SolidJS是近年来前端开发领域的一颗新星，它结合了React的思维模式和Vue的性能优势，提供了一种高效且轻量的框架解决方案。本文将带你深入了解SolidJS的实际使用，并探索如何利用其核心特性构建现代化的高性能应用。为什么选择SolidJS？相比于其他框架，SolidJS有以下独特优势：超高性能：基于fine-grainedreactivity（细粒度反应性）机制，仅更新必要的DOM节点。零
  • LangGraph系列-1：用LangGraph构建简单聊天机器人 梦想画家 机器学习LangGraphLangChain
    在快速发展的人工智能和大型语言模型（llm）世界中，开发人员不断寻求创建更灵活、更强大、更直观的人工智能代理的方法。虽然LangChain已经改变了这个领域的游戏规则，允许创建复杂的链和代理，但对代理运行时的更复杂控制的需求也在不断增长。LangGraph是建立在LangChain之上的重要模块，它将彻底改变我们设计和实施人工智能工作流的方式。在这篇博客中，我们提供了一个关于构建聊天机器人和彻底改
  • Phaser引擎开发：UI设计与音效实现all chenlz2007 游戏开发2ui命令模式游戏音视频linux
    UI设计与音效实现在Phaser引擎开发中，UI设计和音效实现是两个非常重要的方面，它们直接影响到玩家的体验和游戏的整体质量。本节将详细介绍如何在Phaser中设计和实现UI元素，以及如何添加和管理音效。UI设计UI设计是指用户界面的设计，包括按钮、文本、进度条、图标等各种元素。Phaser提供了一系列的API来帮助开发者创建和管理UI元素。我们将从以下几个方面来探讨UI设计：创建和管理UI元素P
  • Phaser引擎开发：UI设计与音效实现_音效与UI的结合 chenlz2007 游戏开发2ui游戏性能优化运维nginx
    音效与UI的结合在开发动作游戏时，音效和UI的设计是提升玩家体验的两个重要方面。音效可以增强游戏的沉浸感，而UI则负责向玩家传递关键信息和提供交互手段。将音效与UI有效结合，可以使游戏更加生动、有趣，同时也能提升游戏的可玩性和用户界面的友好性。本节将详细介绍如何在Phaser引擎中实现音效与UI的结合，包括音效的加载、播放和控制，以及UI元素的创建和管理。音效的加载与播放在Phaser引擎中，音效
  • Vue.js 如何塑造现代网络体验 清风孤客 vue.js网络前端
    Vue.js已迅速成为JavaScript框架中的热门之选，以其简洁的设计、灵活性和强大功能而闻名。全球的开发者被Vue.js所吸引，是因为它能极为轻松地构建动态且引人入胜的用户界面。但Vue.js究竟有何用途，又为何如此受欢迎呢？本文将探讨Vue.js及其在各个领域的关键应用。我们将展示开发者如何利用它构建从交互式网络应用、单页应用（SPA）到复杂电子商务网站等各种项目。我们还将讨论其核心特性、
  • FragPipe: 一个强大的蛋白质组学数据分析平台 2401_87189860 数据分析数据挖掘
    FragPipe简介FragPipe是一个由Nesvizhskii实验室开发的综合性蛋白质组学数据分析平台。它以MSFragger搜索引擎为核心,集成了多种功能强大的分析工具,为研究人员提供了从原始数据处理到生物学解释的一站式解决方案。FragPipe具有用户友好的Java图形用户界面(GUI),同时也支持命令行模式,可以在Windows、Linux或云环境中运行。FragPipe的主要特点快速高
  • Docker安装sentinel-dashboard最新版 tag心动 Docker容器dockerjar运维容器sentinel
    文章目录前言一、Sentinel控制台是什么？二、使用步骤1.下载Sentinel控制台2.上传Sentinel控制台3.编写Dockerfile4.构建镜像5.启动运行测试前言由于官方版本已经更新到1.8.5了，但是dockerhub上最新版本还停留在1.8.0（该版本存在重大缺陷：熔断配置界面没有统计时长，会直接导致控制台无法使用熔断相关功能）推送时间是两年前，于是想通过最新Jar包生成镜像一
  • 再见 Try/Catch，在 TypeScript 中更优雅地处理错误
    再见Try/Catch，在TypeScript中更优雅地处理错误原文链接：NomoreTry/Catch:abetterwaytohandleerrorsinTypeScript作者：Noah译者：倔强青铜三前言大家好，我是倔强青铜三。是一名热情的软件工程师，我热衷于分享和传播IT技术，致力于通过我的知识和技能推动技术交流与创新，欢迎关注我，微信公众号：倔强青铜三。欢迎点赞、收藏、关注，一键三连！
  • java线程Thread和Runnable区别和联系 zx_code javajvmthread多线程Runnable
    我们都晓得java实现线程2种方式，一个是继承Thread，另一个是实现Runnable。 模拟窗口买票，第一例子继承thread，代码如下 package thread; public class ThreadTest { public static void main(String[] args) { Thread1 t1 = new Thread1(
  • 【转】JSON与XML的区别比较 丁_新 jsonxml
    1.定义介绍 (1).XML定义 扩展标记语言 (Extensible Markup Language, XML) ，用于标记电子文件使其具有结构性的标记语言，可以用来标记数据、定义数据类型，是一种允许用户对自己的标记语言进行定义的源语言。 XML使用DTD(document type definition)文档类型定义来组织数据;格式统一，跨平台和语言，早已成为业界公认的标准。 XML是标
  • c++ 实现五种基础的排序算法 CrazyMizzz C++c算法
    #include<iostream> using namespace std; //辅助函数，交换两数之值 template<class T> void mySwap(T &x, T &y){ T temp = x; x = y; y = temp; } const int size = 10; //一、用直接插入排
  • 我的软件 麦田的设计者 我的软件音乐类娱乐放松
         这是我写的一款app软件，耗时三个月，是一个根据央视节目开门大吉改变的，提供音调，猜歌曲名。1、手机拥有者在android手机市场下载本APP，同意权限，安装到手机上。2、游客初次进入时会有引导页面提醒用户注册。（同时软件自动播放背景音乐）。3、用户登录到主页后，会有五个模块。a、点击不胫而走，用户得到开门大吉首页部分新闻，点击进入有新闻详情。b、
  • linux awk命令详解 被触发 linux awk
    awk是行处理器: 相比较屏幕处理的优点，在处理庞大文件时不会出现内存溢出或是处理缓慢的问题，通常用来格式化文本信息 awk处理过程: 依次对每一行进行处理，然后输出 awk命令形式: awk [-F|-f|-v] ‘BEGIN{} //{command1; command2} END{}’ file [-F|-f|-v]大参数，-F指定分隔符，-f调用脚本，-v定义变量 var=val
  • 各种语言比较 _wy_ 编程语言
                        Java Ruby PHP 擅长领域                  
  • oracle 中数据类型为clob的编辑 知了ing oracle clob
    public void updateKpiStatus(String kpiStatus,String taskId){ Connection dbc=null; Statement stmt=null; PreparedStatement ps=null; try { dbc = new DBConn().getNewConnection(); //stmt = db
  • 分布式服务框架 Zookeeper -- 管理分布式环境中的数据 矮蛋蛋 zookeeper
    原文地址： http://www.ibm.com/developerworks/cn/opensource/os-cn-zookeeper/ 安装和配置详解 本文介绍的 Zookeeper 是以 3.2.2 这个稳定版本为基础，最新的版本可以通过官网 http://hadoop.apache.org/zookeeper/来获取，Zookeeper 的安装非常简单，下面将从单机模式和集群模式两
  • tomcat数据源 alafqq tomcat
    数据库 JNDI(Java Naming and Directory Interface，Java命名和目录接口)是一组在Java应用中访问命名和目录服务的API。 没有使用JNDI时我用要这样连接数据库： 03.  Class.forName("com.mysql.jdbc.Driver");  04.  conn
  • 遍历的方法 百合不是茶 遍历
                                                          遍历 在java的泛
  • linux查看硬件信息的命令 bijian1013 linux
    linux查看硬件信息的命令 一.查看CPU： cat /proc/cpuinfo   二.查看内存： free   三.查看硬盘： df   linux下查看硬件信息 1、lspci 列出所有PCI 设备； lspci - list all PCI devices:列出机器中的PCI设备（声卡、显卡、Modem、网卡、USB、主板集成设备也能
  • java常见的ClassNotFoundException bijian1013 java
    1.java.lang.ClassNotFoundException: org.apache.commons.logging.LogFactory   添加包common-logging.jar2.java.lang.ClassNotFoundException: javax.transaction.Synchronization    
  • 【Gson五】日期对象的序列化和反序列化 bit1129 反序列化
    对日期类型的数据进行序列化和反序列化时，需要考虑如下问题：   1. 序列化时，Date对象序列化的字符串日期格式如何 2. 反序列化时，把日期字符串序列化为Date对象，也需要考虑日期格式问题 3. Date A -> str -> Date B,A和B对象是否equals   默认序列化和反序列化     import com
  • 【Spark八十六】Spark Streaming之DStream vs. InputDStream bit1129 Stream
      1. DStream的类说明文档：   /** * A Discretized Stream (DStream), the basic abstraction in Spark Streaming, is a continuous * sequence of RDDs (of the same type) representing a continuous st
  • 通过nginx获取header信息 ronin47 nginx header
    1. 提取整个的Cookies内容到一个变量，然后可以在需要时引用，比如记录到日志里面， if ( $http_cookie ~* "(.*)$") {         set $all_cookie $1; }     变量$all_cookie就获得了cookie的值，可以用于运算了
  • java-65.输入数字n，按顺序输出从1最大的n位10进制数。比如输入3，则输出1、2、3一直到最大的3位数即999 bylijinnan java
    参考了网上的http://blog.csdn.net/peasking_dd/article/details/6342984 写了个java版的： public class Print_1_To_NDigit { /** * Q65.输入数字n，按顺序输出从1最大的n位10进制数。比如输入3，则输出1、2、3一直到最大的3位数即999 * 1.使用字符串
  • Netty源码学习-ReplayingDecoder bylijinnan javanetty
    ReplayingDecoder是FrameDecoder的子类，不熟悉FrameDecoder的，可以先看看 http://bylijinnan.iteye.com/blog/1982618 API说，ReplayingDecoder简化了操作，比如： FrameDecoder在decode时，需要判断数据是否接收完全： public class IntegerH
  • js特殊字符过滤 cngolon js特殊字符js特殊字符过滤
    1.js中用正则表达式 过滤特殊字符, 校验所有输入域是否含有特殊符号function stripscript(s) {    var pattern = new RegExp("[`~!@#$^&*()=|{}':;',\\[\\].<>/?~！@#￥……&*（）&mdash;—|{}【】‘；：”“'。，、？]"
  • hibernate使用sql查询 ctrain Hibernate
    import java.util.Iterator; import java.util.List; import java.util.Map; import org.hibernate.Hibernate; import org.hibernate.SQLQuery; import org.hibernate.Session; import org.hibernate.Transa
  • linux shell脚本中切换用户执行命令方法 daizj linuxshell命令切换用户
    经常在写shell脚本时，会碰到要以另外一个用户来执行相关命令，其方法简单记下：   1、执行单个命令：su - user -c "command" 如：下面命令是以test用户在/data目录下创建test123目录 [root@slave19 /data]# su - test -c "mkdir /data/test123" 
  • 好的代码里只要一个 return 语句 dcj3sjt126com return
    别再这样写了：public boolean foo() {    if (true) {         return true;     } else {          return false;    
  • Android动画效果学习 dcj3sjt126com android
    1、透明动画效果 方法一：代码实现 public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) { View rootView = inflater.inflate(R.layout.fragment_main, container, fals
  • linux复习笔记之bash shell (4)管道命令 eksliang linux管道命令汇总linux管道命令linux常用管道命令
    转载请出自出处： http://eksliang.iteye.com/blog/2105461     bash命令执行的完毕以后，通常这个命令都会有返回结果，怎么对这个返回的结果做一些操作呢？那就得用管道命令‘|’。     上面那段话，简单说了下管道命令的作用，那什么事管道命令呢？     答：非常的经典的一句话，记住了，何为管
  • Android系统中自定义按键的短按、双击、长按事件 gqdy365 android
    在项目中碰到这样的问题： 由于系统中的按键在底层做了重新定义或者新增了按键，此时需要在APP层对按键事件（keyevent）做分解处理，模拟Android系统做法，把keyevent分解成： 1、单击事件：就是普通key的单击； 2、双击事件：500ms内同一按键单击两次； 3、长按事件：同一按键长按超过1000ms（系统中长按事件为500ms）； 4、组合按键：两个以上按键同时按住；
  • asp.net获取站点根目录下子目录的名称 hvt .netC#asp.nethovertreeWeb Forms
    使用Visual Studio建立一个.aspx文件(Web Forms)，例如hovertree.aspx,在页面上加入一个ListBox代码如下： <asp:ListBox runat="server" ID="lbKeleyiFolder" />   那么在页面上显示根目录子文件夹的代码如下： string[] m_sub
  • Eclipse程序员要掌握的常用快捷键 justjavac javaeclipse快捷键ide
      判断一个人的编程水平，就看他用键盘多，还是鼠标多。用键盘一是为了输入代码（当然了，也包括注释），再有就是熟练使用快捷键。   曾有人在豆瓣评 《卓有成效的程序员》：“人有多大懒，才有多大闲”。之前我整理了一个 程序员图书列表，目的也就是通过读书，让程序员变懒。  写道 程序员作为特殊的群体，有的人可以这么懒，懒到事情都交给机器去做，而有的人又可
  • c++编程随记 lx.asymmetric C++笔记
     为了字体更好看，改变了格式……   &&运算符：   #include<iostream> using namespace std; int main(){      int a=-1,b=4,k;      k=(++a<0)&&!(b--
  • linux标准IO缓冲机制研究 音频数据 linux
    一、什么是缓存I/O(Buffered I/O)缓存I/O又被称作标准I/O,大多数文件系统默认I/O操作都是缓存I/O。在Linux的缓存I/O机制中，操作系统会将I/O的数据缓存在文件系统的页缓存(page cache)中，也就是说，数据会先被拷贝到操作系统内核的缓冲区中，然后才会从操作系统内核的缓冲区拷贝到应用程序的地址空间。1.缓存I/O有以下优点:A.缓存I/O使用了操作系统内核缓冲区，
  • 随想 生活 暗黑小菠萝 生活
    其实账户之前就申请了，但是决定要自己更新一些东西看也是最近。从毕业到现在已经一年了。没有进步是假的，但是有多大的进步可能只有我自己知道。   毕业的时候班里12个女生，真正最后做到软件开发的只要两个包括我，PS：我不是说测试不好。当时因为考研完全放弃找工作，考研失败，我想这只是我的借口。那个时候才想到为什么大学的时候不能好好的学习技术，增强自己的实战能力，以至于后来找工作比较费劲。我
  • 我认为POJO是一个错误的概念 windshome javaPOJO编程J2EE设计
                  这篇内容其实没有经过太多的深思熟虑，只是个人一时的感觉。从个人风格上来讲，我倾向简单质朴的设计开发理念；从方法论上，我更加倾向自顶向下的设计；从做事情的目标上来看，我追求质量优先，更愿意使用较为保守和稳妥的理念和方法。    &
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他