davidbeckham
davidbeckham

原生JavaScript写出Tabs标签页

  最近在重新学习JavaScript，手写了一个tabs标签页。

  话不多说，直接开始。  

  首先，是前端页面。

原生JavaScript写出Tabs标签页_第1张图片

 

图1 tabs

先来把tabs分解一下：原生JavaScript写出Tabs标签页_第2张图片图2 tabs分解

首先，一个大的框div，上面红色的框是导航栏nav，导航栏里是一个无序列表ul，里面三个li标签（黄色的框），li标签里两个绿色标签是两个span，一个用来放导航的名字，一个用来放导航关闭的icon，右边是一个button，用来添加新的导航栏及内容；下方是导航栏的内容section。

导航tabs.html代码如下：

DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
head>

<body>
    <main>
        <div class="tabsbox" id="tab">
            
            <nav class="firstnav">
                <ul>
                    <li class="liactive"><span>测试1span><span class="icon-guanbi">Xspan>li>
                    <li><span>测试2span><span class="icon-guanbi">Xspan>li>
                    <li><span>测试3span><span class=" icon-guanbi">Xspan>li>
                ul>
                <div class="tabadd">
                    <span>+span>
                div>
            nav>

            
            <div class="tabscon">
                <section class="conactive">测试内容1section>
                <section>测试内容2section>
                <section>测试内容3section>
            div>
        div>
    main>

    <script src="js/tabs.js">script>
body>

html>
<style>
 * {
    margin: 0;
    padding: 0;
}

ul li {
    list-style: none;
}

main {
    width: 960px;
    height: 500px;
    border-radius: 10px;
    margin: 50px auto;
}

main h4 {
    height: 100px;
    line-height: 100px;
    text-align: center;
}

.tabsbox {
    width: 900px;
    margin: 0 auto;
    height: 400px;
    border: 1px solid lightsalmon;
    position: relative;
}

nav ul {
    overflow: hidden;
}

nav ul li {
    float: left;
    width: 100px;
    height: 50px;
    line-height: 50px;
    text-align: center;
    border-right: 1px solid #ccc;
    position: relative;
}

nav ul li.liactive {
    border-bottom: 2px solid #fff;
    z-index: 9;
}

#tab input {
    width: 80%;
    height: 60%;
}

nav ul li span:last-child {
    position: absolute;
    user-select: none;
    font-size: 12px;
    top: -18px;
    right: 0;
    display: inline-block;
    height: 20px;
}

.tabadd {
    position: absolute;
    /* width: 100px; */
    top: 0;
    right: 0;
}

.tabadd span {
    display: block;
    width: 20px;
    height: 20px;
    line-height: 20px;
    text-align: center;
    border: 1px solid #ccc;
    float: right;
    margin: 10px;
    user-select: none;
}

.tabscon {
    width: 100%;
    height: 300px;
    position: absolute;
    padding: 30px;
    top: 50px;
    left: 0px;
    box-sizing: border-box;
    border-top: 1px solid #ccc;
}

.tabscon section,
.tabscon section.conactive {
    display: none;
    width: 100%;
    height: 100%;
}

.tabscon section.conactive {
    display: block;
}
style>

由于给导航栏增删查改的js代码很多，我单独用一个js文件写tabs.js，在tabs.html里引用就行。

实现的导航栏功能有：

　　1）导航栏的切换功能

       2）增加导航栏的功能

       3）删除导航栏的功能

   tabs.js代码如下：

  1 var that;
  2 class Tab {
  3     constructor(id){
  4         that = this;
  5         //获取元素
  6         this.main = document.querySelector(id);
  7        
  8         this.add = this.main.querySelector('.tabadd');
  9         //li的父元素
 10         this.ul = this.main.querySelector('.firstnav ul:first-child');
 11         //section的父元素
 12         this.fsection = this.main.querySelector('.tabscon');
 13         this.init();
 14     }
 15     //初始化操作
 16     init(){
 17         this.updateNode();
 18         this.add.onclick = this.addTab;
 19         for(let i = 0;i<this.lis.length;i++){
 20             this.lis[i].index = i;
 21             this.lis[i].onclick = this.toggleTab;
 22             this.remove[i].onclick = this.removeTab;
 23             this.spans[i].ondblclick = this.editTab;
 24             this.sections[i].ondblclick = this.editTab;
 25         }
 26     }
 27     //获取li跟section
 28     updateNode(){
 29         this.lis = this.main.querySelectorAll('li');
 30         this.sections = this.main.querySelectorAll('section');
 31         this.remove = this.main.querySelectorAll('.icon-guanbi');
 32         this.spans = this.main.querySelectorAll('.firstnav li span:first-child')
 33     }
 34     //1.切换功能
 35     toggleTab(){
 36 
 37         that.clearClass();
 38         this.className = 'liactive';
 39         that.sections[this.index].className = 'conactive';
 40     }
 41     clearClass(){
 42         for(let i = 0;i<this.lis.length;i++){
 43             this.lis[i].className = '';
 44             this.sections[i].className = '';
 45         }
 46     }
 47     //2.添加功能
 48     addTab(){
 49         that.clearClass();
 50        //1)添加li元素和section
 51         var random = Math.random()
 52         var li = '
  • 新选项卡X
    • ';
 53         var section = '
    '+random+'
    ';
 54        
 55        //2）把两个元素添加到对应的父级元素中
 56         that.ul.insertAdjacentHTML('beforeend',li);
 57         that.fsection.insertAdjacentHTML('beforeend',section);
 58         that.init();
 59     }
 60     //3.删除功能
 61     removeTab(e){
 62         e.stopPropagation();
 63         var index = this.parentNode.index;
 64         console.log(index);
 65         //删除对应节点
 66         that.lis[index].remove();
 67         that.sections[index].remove();
 68         //删除后及时更新页面中的节点
 69         that.init();
 70         //如果当前页面有选中状态，就不用执行下面的步骤
 71         if(document.querySelector('.liactive')) return;
 72         //让index前一个处于选中状态
 73         index--;
 74         that.lis[index] && that.lis[index].click();
 75     }
 76     //4.修改功能
 77     editTab(){
 78         let str = this.innerHTML;
 79         // console.log(str);
 80         //禁止双击选中文字
 81         window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty(); 
 82         this.innerHTML=''
 83         let input = this.children[0];
 84         input.value = str;
 85         input.select();
 86         //input失去焦点后变回span
 87         input.onblur = function(){
 88             this.parentNode.innerHTML= this.value;
 89         }
 90         //按回车也能
 91         input.onkeyup = function(e){
 92             if(e.keyCode == 13){
 93                  this.blur();//获得焦点
 94             }
 95            
 96         }
 97         
 98     }
 99 }
100  new Tab('#tab');
101 // tab.init();

     

     

    你可能感兴趣的:(原生JavaScript写出Tabs标签页)

    • 前端面试每日 3+1 —— 第39天 浪子神剑
      今天的面试题(2019.05.25)——第39天[html]title与h1、b与strong、i与em的区别分别是什么？[css]写出你知道的CSS水平和垂直居中的方法[js]说说你对模块化的理解[软技能]公钥加密和私钥加密是什么？《论语》，曾子曰：“吾日三省吾身”（我每天多次反省自己）。前端面试每日3+1题，以面试题来驱动学习，每天进步一点！让努力成为一种习惯，让奋斗成为一种享受！欢迎在Iss
    • 长安三万里，读懂诗人才能更懂诗 小妮儿的简生活
      长安三万里，带我们重新进入古诗的世界。在这个世界里，让我们看到了耳熟人详的诗人们更加立体的一面。读懂诗人才能更懂诗。全国100位语文名师联合推荐的这套《语文书里的大诗人》，带领我们去认识六位“超级大诗人”，看他们有怎样的精彩故事，如何能写出流传千古的名篇。我和哥哥一起背古诗300+天，背了188首古诗。尽管背诗数量不少，但对于诗词背后的故事以及对于诗人的了解并不多。而这套书，能够很好地满足我们除背
    • ChatGPT还不能写小说吗？ 刘若愚
      最近，ChatGPT大热，据说可以写论文，编故事，好像无所不能。于是，我给它出了个题目：写一篇5万字的科幻小说。人物：刘若愚，化学家；刘子琪，大律师；仔仔，刘子琪的宠物猫；周金凝，医生；刘泽余，大侦探；赵政淇，程序猿；杰夫（Jeff）机器人它给我的回答是：我很抱歉，我是一个AI语言模型，无法写出如此长篇的小说。但我可以为您提供一些写作灵感和指导：确定故事背景和时间线：在科幻小说中，背景和时间线非常
    • 假期过半，总结一下最近的自己 逍遥洪七公
      今天是10月3号了，假期已经过半。这几天哪里也没有去，就是在家里原地过节。每天都有一点琐碎的事情，都足以影响我的心绪。心绪不平，心乱如麻，就做不好事情。更别提外出旅游了。我就是在闲杂的事情里，度过每一天的。回头一看，也没有做什么，时间也走完了。原来想着利用假期，读一读书。听一听课。我在老师的指导下，一步一步地，写出了一篇文章。老师批改了作业，但是评语十分简单，没有修改我写的任何一个句子。只是在结尾
    • 2020-04-06 紫洞箫
      上午你又哭了一场。其实，我真的很理解你的感受。你真的是个好孩子乖孩子，吃过早饭你就乖乖自觉地去做题，虽然不是你想做的类型，可是还是认真地按照考试流程去做。我练字等着检查你的试卷，数学做完由于几个粗心的地方没有得一百分，我也没有苛责你。只是提醒你，以后要细心点，休息一会就去做语文，因为写话都是老生常谈，所以想让你做另外一个，可是你就是不同意。就依你，但是我提醒你要写出新的东西，不能像一年级那时候样简
    • webStorm使用esLint时，粘贴代码时tab跟space的问题 Aklan
      之前的项目中没有引入过esLint，在上周引入后遇到一个头疼的问题。粘贴代码后，前面的空格变成了tabs图片.png困扰了将近一周的时间，都准备换编辑器了。。但是subLimeText个人感觉实在不好用，虽然webStorm很多人说不好用，但毕竟用了这么久了，习惯了，换新的编辑器感觉像自断双手，不会写东西了。所以今天实在受不了了，决定还是继续用webStorm，但要先把之前的问题解决掉。上周我就搜
    • 田园诗派老大——庄园主孟浩然 梧桐树边羽
      孟浩然是山水田园派诗人代表人物。他到底是个什么样的人，才能写出那些清新自然的诗歌呢？孟浩然曾经科举不第，他立刻放弃了科举这条路，走上了干谒求仕的路子。他虽然和王维是忘年之交，又深受张九龄赏识，甚至在后半生中不断有人想推荐他出仕，但他一直是白身。为什么会这样呢？孟浩然曾经在王维供职的翰林院遇到过唐玄宗，但是他吓得躲到床下去了，给皇帝留下了个不好的印象。由于平时张九龄，王维这些人经常夸赞孟浩然，玄宗还
    • 张伟采访笔录——把自己喜欢的留在身边丨2021年3月第3周小结 丨张伟丨
      中篇故事丨文/张伟乐之写作工作坊这是椰子私塾第1511篇原创输出我2021年的关键词——闲。读些闲书，写点闲文；鸟归巢，鱼潜渊，如此而已。1、读闲书。《悲惨世界》75%《人类群星闪耀时》82%《微信互联网平民创业》43%《关于陀思妥耶夫斯基的六次讲座》59%《写作训练课：轻松写出好文章》16%2、日更，写闲文。接上周。国际红透天著名主持人三三一：我这样理解，你看看对不对，你刚才提到的减重经历是一个
    • 22晨间日记 讨喜的鱼
      2018年9月28日，今天五点半的闹钟，压根就没听到。一醒来已经6点半了，不过没事，多睡一个小时是好的。错就错在昨晚太晚睡，以后要保证自己的睡眠时间。睡觉是目前来说，感到幸福的几件事之一，不能压榨它。时间对每个人来说都是一样的，再有钱的人也留不住它。要珍惜时间，所先要做的是让时间有价值。这样一来，时间等于金钱，这个公式才成立。对我来说，能明显感觉到自己的进步。第一是速度明显提高的，一个小时，能写出
    • Python列表性能优化：避免这7个常见错误提升10倍速度 PythonAI编程架构实战家 Python人工智能与大数据Python编程之道python性能优化开发语言ai
      Python列表性能优化：避免这7个常见错误提升10倍速度关键词：Python列表、性能优化、时间复杂度、动态数组、deque、列表推导式、集合摘要：Python列表（list）是最常用的数据结构之一，但很多开发者会在不经意间写出低效的代码。本文通过7个真实常见的性能陷阱，结合底层原理和代码示例，教你如何避开这些“坑”，让列表操作速度提升10倍以上。即使是Python老手，也可能在这些细节上翻跟头
    • 七夕快乐 千允
      今天我还大言不惭地跟萱萱说要给她写信，结果一直没能写成，就连日更我都不打算写了，反正有小结可以混。可当我躺下后，再想起今天是七夕呀，还是我们婚礼的一周年纪念日，虽然跟没过一样，但我也要写出来。其实，前些天我就给老公提醒过今年的八月四号是什么日子了，今天我也一直有一点点期待。但真的只是一点点，以我对他的了解，他很可能是记不起来的；就算记起来了，最多也就是发个红包的那种。一整天我都没跟他再提这茬儿，直
    • 电话手表排名前十名，智能电话手表品牌排行榜 日常购物技巧呀
      为了使大家能够真正了解哪些智能手表值得入手，哪些智能手表功能强大，质量好，防水效果好，日常使用方便，还有各个品牌智能手表适合哪些场合使用等等，我写出了这篇文章，希望能够帮助到各位。买电话手表上高省领隐藏优惠券，优惠券真的大，佣金真的高，我们真的省！大家好，我是高省APP最大团队，高省APP，是2021年推出的平台，0投资，0风险、高省APP佣金更高，模式更好，终端用户不流失。【高省】是一个可省钱佣
    • 华为OD机考2025C卷 - 万能单词拼写 / 掌握单词个数 （Java & Python& JS & C++ & C ） 算法大师 最新华为OD机试真题华为odjavapython华为OD机考2025C卷华为OD机试2025C卷华为OD2025年C卷华为OD2025C卷
      最新华为上机考试真题目录：点击查看目录华为OD面试真题精选：点击立即查看2025华为od机试2025C卷-华为OD上机考试2025年C卷题目描述有一个字符串数组words和一个字符串chars。假如可以用chars中的字母拼写出words中的某个“单词”（字符串），那么我们就认为你掌握了这个单词。words的字符仅由a-z英文小写字母组成，例如“abc”chars由a-z英文小写字母和“?”组成。
    • 【Azure Developer】示例: 在中国区调用MSGraph SDK通过User principal name获取到User信息，如Object ID 云中路灯
      问题描述示例调用MSGraphSDK通过Userprincipalname获取到User信息，如ObjectID。参考资料选择MicrosoftGraph身份验证提供程序：https://learn.microsoft.com/zh-cn/graph/sdks/choose-authentication-providers?tabs=java#using-a-client-secret-2Micr
    • 不写“总结体“新闻 巨风视界
      对管理经验的总结与提炼是企业新闻宣传的内容之一，而且是重要内容之一。因此，对一个专题活动或者一个阶段的工作进行新闻宣传报道时，很容易就会形成“总结体”新闻——把所有工作罗列上，甚至在每一段开头用一句概括性的话来表达该段主旨，后面再介绍围绕该主旨开展的活动。这样的写出来的文章是工作总结，不是新闻。工作总结强调“概括提炼”、“经验与成绩”、“反思及改进”等，新闻强调“重要性，新鲜性，显要性，接近性，生
    • 讲男女的相处之道。1.情感银行：存款与取款 小草草小
      图片发自App作业32：如果是妈妈在听，先不要向对方索取，而是先存款，于是也先写出你能为丈夫做的10件事情是什么呢？在两性关系中，就好比每一个人心里都有一个情感银行，彼此在对方的银行中有一个专属账户，每天你对对方所做的每一件事，每一个行动，要么在往帐户中存款，要么就是在取款。当账户中存足够多时，你们的关系会非常融洽，无论你有什么需要，对方都会尽可能满足。1、陪伴在老公身边2、为他洗衣做饭3、给他端
    • 如何写出吸引人的故事？ 专注自我成长的小徐
      如何写出吸引人的故事？为什么要学习写故事呢？因为人们天生爱听故事。比如，哄小孩子入睡，最好的办法就是讲一个有趣的睡前故事；公众演讲，要想产生较好的效果，就要穿插一个引人入胜的故事；看电影，已成为当下最普遍的文化消费，每一部电影都是一个不平凡的故事。一篇文章是否精彩，很大程度上是由文章中故事的精彩程度决定的。如何写出吸引人的故事写故事的三种经典框架1．冲突、行动、结局美国作家杰里·克里弗说过，形式最
    • 2月21日+教育行走“一起写吧”打卡第174天文章汇总 小尘老师
      2月21日+教育行走“一起写吧”打卡第174天每日一记录，每月一精品，成就更好的自己[拳头][拳头][拳头]有两个目标我们一起争取达到[拳头][拳头][拳头]第一个目标：精品文每个月1号的接龙文章，打造成精品文(精品文可以是前一个月主题相同的日更组合，或某一篇文章的深化。也可以写新文。如果当天没时间写出精品文，过后尽快抽空修改)。第二个目标：阅读与评论每天多花5分钟左右做一下互动，阅读与评论在你前
    • 一次面向初学者的完整实战：从零构建SpringBoot测试类
      目录一、问题的提出二、准备工作：依赖与目录结构三、被测代码简介四、编写第一个测试类五、逐行解读：注解与运行时行为六、运行测试的三种方式七、运行结果示例八、常见错误与排查策略九、测试设计的延伸思考十、JUnit5的简洁写法十一、结语一、问题的提出在日常开发中，我们往往先写出业务Mapper、Service或Controller，随后才想起“应该补一个测试”。这种做法虽然普遍，却容易让测试沦为事后的形
    • “霍桑效应”：适度的发泄才能够轻松上阵 星沧
      “霍桑效应”这个概念，源于1924年~1933年间以哈佛大学心理专家乔治·埃尔顿·梅奥教授为首进行的一系列实验研究。因为这个研究的故事有点长，我这里就不写出来了，如果有感兴趣的小伙伴可以去搜一下，或者买本《墨菲定律》，目前我所有的文章大部分的知识内容都是出自这本书。“霍桑效应”指出：我们在工作中积累的情绪压力，是需要发泄出来的。（这段书上并没有明确表示出，是我个人的理解）情绪的宣泄是平衡心理，保持
    • 15天落地实修第二天作业 海芋叮当
      15天落地实修第二天作业：昨天我们整理了五件让自己值得骄傲的事，今天要从这五件事中整理出来我们的5个核心品质，然后在写出自己的50个有点。第一件值得骄傲的事，我总结出来的品质是“上进！”从小爸爸就教导我做事情，要认真努力的去做。不能落在别人的身后，要做就做到最好，不能丢人。所以无论在学习中还是工作中，我都是一个特别要强的人。特别害怕落在别人的后面，所以一直向前，只有走到前面的时候，我才安心。第二件
    • 你来人间一趟，一定要看看太阳 羽人书
      海子有诗云：你来人间一趟，你要看看太阳，和你的心上人，一起走在街上。多么浪漫的画面啊！至今也想不通，能写出“春暖花开，面朝大海”的一位才子，怎么会以极端的方式结束了二十多岁的生命。也许他的苦是常人无法理解的吧，不过，对于你我来说，生命只有这一次，无论怎样，我们都该好好的活着。人间世事，不以物喜亦不以己悲。这一年的开端异常的艰难，就像影视剧里世界末日的感觉，无数次的史无前例正在上演。大家的关注点已然
    • 探索道家阴阳究竟是什么意思 xianma123456
      最近一直看到道家哲学出现有阴阳两字，我一直不知道这是什么意思。在家没事时，查了好多书，也听了好多音频，我想把自己理解的道家讲的阴阳含义写出来，肯定有很多幼稚的地方，我只写我懂的我理解的部分。其实，这样的知识真的静下心来看，确实很有意思。知道了这些知识，能让我们的身心和天地变得如鱼得水、和谐共振，让心平静，世界安静下来了，世界只剩下鸟语花香和潺潺流水。很美。阴阳，到底是什么？阴，就是天气阴了，就是有
    • 梦非梦 A彭小花
      今早6点过醒了，又睡下了。好不容易一个假期，怎么可能不睡懒觉呢。2个小时左右，做了一个梦，梦见和身边的朋友在一起，梦见她们离开我，抛下我，我就一直哭，就算我可能感觉那是梦，但还是难过，一直沉浸在悲伤中。直到现在写下这段文字，也是第一次写出来。其实我知道那个梦，照射出了真正的自己，我是那么害怕失去，害怕孤独，害怕没有人陪伴。似乎很多人都一样，表面坚强，其实内心及其脆弱。对我而言，友情有时候比爱情更重
    • “做过不应该做的事情”新解|探索与金钱的关系（九） 艳平思语
      2021.4.26我内在神性，今天我想跟你聊聊关于“做过不应该做的事情”这件事。为什么要聊这个呢？我在完成对自己的梳理，有一个老师发的内容其中的一项是“从出生到现在，做过什么自己感觉不该做的事情？”原本是需要写出来有哪些事情是自己感觉不应该做的事情，可是，在这个当下冒出来的不是具体的事情。好的，没有关系，写这个当下自己想写的任何东西对于我来说，都是可以的，也是我对于解构自己是有帮助的。今天看到“不
    • 如何写出吸引人的故事 怪兽日常a
      想要写出一个吸引人的故事，有三个经典框架。1.冲突、行动、结局故事的三要素就是：冲突、行动、结局。比如后羿射日的故事，天上有10个太阳，轮流在天空中值班，晒得大地上民不聊生，这是冲突。后羿为了拯救人类，射掉了天上的9个太阳，这是行动。最后天上只剩下一个太阳，后羿成为了英雄，这是结局。2.起、承、转、合起是原因，引出故事。承是延伸，引出各种人物，把故事铺开。转是转折，让故事跌宕起伏，不断的制造冲突。
    • 写作只是一种兴趣爱好，写出好文章需要用心斟酌 柠檬加红茶
      几乎是每次拿起手机，第一时间打开的往往是，无论有多忙，都已经成为一种习惯。手机写作就是这么随便。就像当年的随身日记本。有事时，随心看看它。没事时依然瞟一眼它。写作只是一种兴趣爱好。上学的时候，因为生活总是那么的不尽人意，写日记仅仅是为了发泄。那是自己地私人日记，谁都不能看。大学毕业后，刚开始也在写日记，但有一件事情彻底改变了我的想法，日记居然让我的内心彻底暴露在别人的面前。那时候，我暂住在我的老师
    • PHP框架之Laravel框架
      Laravel框架详解Laravel，作为一款广受欢迎的PHPWeb开发框架，以其优雅、简洁的语法和强大的功能特性，赢得了全球众多开发者的青睐。下面，我们将从Laravel的特点、应用案例以及具体的框架使用等方面进行详细解析。一、Laravel框架的特点优雅的语法Laravel框架采用简洁、优雅的语法，使得开发者能够编写出易于阅读和维护的代码。例如，通过EloquentORM，开发者可以方便地进行
    • Windows 窗体应用(.NET Framework)全部控件大全 Ro小陌 C#Windowswindows.netc#
      在.NETFramework的Windows窗体应用（WinForms）中，控件是构建用户界面的基础。以下是常见控件的分类及说明，涵盖官方控件和扩展方式：一、官方控件分类1.容器控件Panel：用于分组和布局其他控件，支持滚动条。GroupBox：带标题的容器，用于逻辑分组。TabControl：多标签页容器，切换不同内容区域。SplitContainer：可调整大小的分隔窗格，用于分栏布局。Fl
    • 日记：第929篇2021-7-7 持续记录1000天挑战者
      主题：阅读“秒赞”第四章的收获大家好，我是李琳，今天是2021年7月7日，是我参加1000天演讲挑战打卡的第929天，今天与大家分享的主题是：阅读“秒赞”第四章的收获；今天是阅读“秒赞”文案有关这本书的第4天，秒赞-第四章（电商文案怎么写，这么做就对了）；1、站在客户的角度，写出他们内心渴求的文案。2、清晰的定位你的精准用户，站在客户的角度与他们进行心里对话3、差不多的效果就只能带来差不多的结果4
    • rust的指针作为函数返回值是直接传递，还是先销毁后创建？ wudixiaotie 返回值
       这是我自己想到的问题，结果去知呼提问，还没等别人回答， 我自己就想到方法实验了。。 fn main() { let mut a = 34; println!("a's addr:{:p}", &a); let p = &mut a; println!("p's addr:{:p}", &a
    • java编程思想 -- 数据的初始化 百合不是茶 java数据的初始化
        1.使用构造器确保数据初始化      /* *在ReckInitDemo类中创建Reck的对象 */ public class ReckInitDemo { public static void main(String[] args) { //创建Reck对象 new Reck(); } }
    • [航天与宇宙]为什么发射和回收航天器有档期 comsci
             地球的大气层中有一个时空屏蔽层,这个层次会不定时的出现,如果该时空屏蔽层出现,那么将导致外层空间进入的任何物体被摧毁,而从地面发射到太空的飞船也将被摧毁...        所以,航天发射和飞船回收都需要等待这个时空屏蔽层消失之后,再进行 &
    • linux下批量替换文件内容 商人shang linux替换
      1、网络上现成的资料 　　格式: sed -i "s/查找字段/替换字段/g" `grep 查找字段 -rl 路径` 　　linux sed 批量替换多个文件中的字符串 　　sed -i "s/oldstring/newstring/g" `grep oldstring -rl yourdir` 　　例如：替换/home下所有文件中的www.admi
    • 网页在线天气预报 oloz 天气预报
      网页在线调用天气预报 <%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transit
    • SpringMVC和Struts2比较 杨白白 springMVC
      1. 入口 spring mvc的入口是servlet，而struts2是filter（这里要指出，filter和servlet是不同的。以前认为filter是servlet的一种特殊），这样就导致了二者的机制不同，这里就牵涉到servlet和filter的区别了。 参见：http://blog.csdn.net/zs15932616453/article/details/8832343 2
    • refuse copy, lazy girl! 小桔子 copy
             妹妹坐船头啊啊啊啊！都打算一点点琢磨呢。文字编辑也写了基本功能了。。今天查资料，结果查到了人家写得完完整整的。我清楚的认识到： 1.那是我自己觉得写不出的高度 2.如果直接拿来用，很快就能解决问题 3.然后就是抄咩~~ 4.肿么可以这样子，都不想写了今儿个，留着作参考吧！拒绝大抄特抄，慢慢一点点写！  
    • apache与php整合 aichenglong php apache web
      一  apache web服务器 1 apeche web服务器的安装   1)下载Apache web服务器   2)配置域名(如果需要使用要在DNS上注册)   3)测试安装访问http://localhost/验证是否安装成功 2 apache管理   1)service.msc进行图形化管理   2)命令管理，配
    • Maven常用内置变量 AILIKES maven
      Built-in properties ${basedir} represents the directory containing pom.xml ${version} equivalent to ${project.version} (deprecated: ${pom.version}) Pom/Project properties Al
    • java的类和对象 百合不是茶 JAVA面向对象 类 对象
      java中的类：     java是面向对象的语言，解决问题的核心就是将问题看成是一个类，使用类来解决   java使用 class 类名   来创建类 ，在Java中类名要求和构造方法，Java的文件名是一样的   创建一个A类： class A{ }   java中的类：将某两个事物有联系的属性包装在一个类中，再通
    • JS控制页面输入框为只读 bijian1013 JavaScript
      在WEB应用开发当中，增、删除、改、查功能必不可少，为了减少以后维护的工作量，我们一般都只做一份页面，通过传入的参数控制其是新增、修改或者查看。而修改时需将待修改的信息从后台取到并显示出来，实际上就是查看的过程，唯一的区别是修改时，页面上所有的信息能修改，而查看页面上的信息不能修改。因此完全可以将其合并，但通过前端JS将查看页面的所有信息控制为只读，在信息量非常大时，就比较麻烦。  
    • AngularJS与服务器交互 bijian1013 JavaScriptAngularJS$http
              对于AJAX应用（使用XMLHttpRequests）来说，向服务器发起请求的传统方式是：获取一个XMLHttpRequest对象的引用、发起请求、读取响应、检查状态码，最后处理服务端的响应。整个过程示例如下： var xmlhttp = new XMLHttpRequest(); xmlhttp.onreadystatechange
    • [Maven学习笔记八]Maven常用插件应用 bit1129 maven
      常用插件及其用法位于：http://maven.apache.org/plugins/   1. Jetty server plugin 2. Dependency copy plugin 3. Surefire Test plugin 4. Uber jar plugin           1. Jetty Pl
    • 【Hive六】Hive用户自定义函数(UDF) bit1129 自定义函数
      1. 什么是Hive UDF Hive是基于Hadoop中的MapReduce，提供HQL查询的数据仓库。Hive是一个很开放的系统，很多内容都支持用户定制，包括： 文件格式：Text File，Sequence File 内存中的数据格式： Java Integer/String, Hadoop IntWritable/Text 用户提供的 map/reduce 脚本：不管什么
    • 杀掉nginx进程后丢失nginx.pid，如何重新启动nginx ronin47 nginx 重启 pid丢失
      nginx进程被意外关闭，使用nginx -s reload重启时报如下错误：nginx: [error] open() “/var/run/nginx.pid” failed (2: No such file or directory)这是因为nginx进程被杀死后pid丢失了，下一次再开启nginx -s reload时无法启动解决办法：nginx -s reload 只是用来告诉运行中的ng
    • UI设计中我们为什么需要设计动效 brotherlamp UIui教程ui视频ui资料ui自学
      随着国际大品牌苹果和谷歌的引领，最近越来越多的国内公司开始关注动效设计了，越来越多的团队已经意识到动效在产品用户体验中的重要性了，更多的UI设计师们也开始投身动效设计领域。 但是说到底，我们到底为什么需要动效设计？或者说我们到底需要什么样的动效？做动效设计也有段时间了，于是尝试用一些案例，从产品本身出发来说说我所思考的动效设计。 一、加强体验舒适度 嗯，就是让用户更加爽更加爽的用你的产品。
    • Spring中JdbcDaoSupport的DataSource注入问题 bylijinnan javaspring
      参考以下两篇文章： http://www.mkyong.com/spring/spring-jdbctemplate-jdbcdaosupport-examples/ http://stackoverflow.com/questions/4762229/spring-ldap-invoking-setter-methods-in-beans-configuration Sprin
    • 数据库连接池的工作原理 chicony 数据库连接池
             随着信息技术的高速发展与广泛应用，数据库技术在信息技术领域中的位置越来越重要，尤其是网络应用和电子商务的迅速发展，都需要数据库技术支持动 态Web站点的运行，而传统的开发模式是：首先在主程序（如Servlet、Beans）中建立数据库连接；然后进行SQL操作，对数据库中的对象进行查 询、修改和删除等操作；最后断开数据库连接。使用这种开发模式，对
    • java 关键字 CrazyMizzz java
      关键字是事先定义的，有特别意义的标识符，有时又叫保留字。对于保留字，用户只能按照系统规定的方式使用，不能自行定义。 Java中的关键字按功能主要可以分为以下几类：    （1）访问修饰符       public,private,protected       p
    • Hive中的排序语法 daizj 排序hiveorder byDISTRIBUTE BYsort by
      Hive中的排序语法 2014.06.22 ORDER BY hive中的ORDER BY语句和关系数据库中的sql语法相似。他会对查询结果做全局排序，这意味着所有的数据会传送到一个Reduce任务上，这样会导致在大数量的情况下，花费大量时间。 与数据库中 ORDER BY 的区别在于在hive.mapred.mode = strict模式下，必须指定 limit 否则执行会报错。
    • 单态设计模式 dcj3sjt126com 设计模式
        单例模式（Singleton）用于为一个类生成一个唯一的对象。最常用的地方是数据库连接。 使用单例模式生成一个对象后，该对象可以被其它众多对象所使用。 <?phpclass Example{    // 保存类实例在此属性中    private static&
    • svn locked dcj3sjt126com Lock
      post-commit hook failed (exit code 1) with output: svn: E155004: Working copy 'D:\xx\xxx' locked svn: E200031: sqlite: attempt to write a readonly database svn: E200031: sqlite: attempt to write a
    • ARM寄存器学习 e200702084 数据结构C++cC#F#
      无论是学习哪一种处理器，首先需要明确的就是这种处理器的寄存器以及工作模式。     ARM有37个寄存器，其中31个通用寄存器，6个状态寄存器。 1、不分组寄存器（R0-R7）     不分组也就是说说，在所有的处理器模式下指的都时同一物理寄存器。在异常中断造成处理器模式切换时，由于不同的处理器模式使用一个名字相同的物理寄存器，就是
    • 常用编码资料 gengzg 编码
      List<UserInfo> list=GetUserS.GetUserList(11); String json=JSON.toJSONString(list); HashMap<Object,Object> hs=new HashMap<Object, Object>(); for(int i=0;i<10;i++) {
    • 进程 vs. 线程 hongtoushizi 线程linux进程
      我们介绍了多进程和多线程，这是实现多任务最常用的两种方式。现在，我们来讨论一下这两种方式的优缺点。 首先，要实现多任务，通常我们会设计Master-Worker模式，Master负责分配任务，Worker负责执行任务，因此，多任务环境下，通常是一个Master，多个Worker。 如果用多进程实现Master-Worker，主进程就是Master，其他进程就是Worker。 如果用多线程实现
    • Linux定时Job：crontab -e 与 /etc/crontab 的区别 Josh_Persistence linuxcrontab
      一、linux中的crotab中的指定的时间只有5个部分：* * * * * 分别表示：分钟，小时，日，月，星期，具体说来： 第一段 代表分钟 0—59 第二段 代表小时 0—23 第三段 代表日期 1—31 第四段 代表月份 1—12 第五段 代表星期几，0代表星期日 0—6   如： */1 * * * *   每分钟执行一次。 *
    • KMP算法详解 hm4123660 数据结构C++算法字符串KMP
           字符串模式匹配我们相信大家都有遇过，然而我们也习惯用简单匹配法（即Brute-Force算法)，其基本思路就是一个个逐一对比下去，这也是我们大家熟知的方法，然而这种算法的效率并不高，但利于理解。       假设主串s="ababcabcacbab",模式串为t="
    • 枚举类型的单例模式 zhb8015 单例模式
      E.编写一个包含单个元素的枚举类型[极推荐]。代码如下： public enum MaYun {himself; //定义一个枚举的元素，就代表MaYun的一个实例private String anotherField;MaYun() {//MaYun诞生要做的事情//这个方法也可以去掉。将构造时候需要做的事情放在instance赋值的时候：/** himself = MaYun() {*
    • Kafka+Storm+HDFS ssydxa219 storm
      cd /myhome/usr/stormbin/storm nimbus &amp;bin/storm supervisor &amp;bin/storm ui &amp;Kafka+Storm+HDFS整合实践kafka_2.9.2-0.8.1.1.tgzapache-storm-0.9.2-incubating.tar.gzKafka安装配置我们使用3台机器搭建Kafk
    • Java获取本地服务器的IP 中华好儿孙 javaWeb获取服务器ip地址
      System.out.println("getRequestURL:"+request.getRequestURL()); System.out.println("getLocalAddr:"+request.getLocalAddr()); System.out.println("getLocalPort:&quo
    按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他