首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

Javascript表单特效之十大常用原理性样例代码大总结

Posted in Javascript onJuly 12, 2016

案例一：全选等
运用知识点：ondblclick=（）| onclick | 寻找标签属性及判断和函数的应用

Javascript表单特效之十大常用原理性样例代码大总结

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title></title>
  </head>
  <body>
    <div>
      <input type="button" value="全选" ondblclick="checkAll()" />
      <input type="button" value="取消" ondblclick="cancleAll()" />
      <input type="button" value="反选" ondblclick="reverseAll()" />
    </div>
    <table>
      <thead>
        <tr>
          <th>序列号</th>
          <th>用户名</th>
          <th>年龄</th>
        </tr>
      </thead>
      <tbody id="tb">
        <tr>
          <td><input class="c1" type="checkbox"/></td>
          <td>alex</td>
          <td>19</td>
        </tr>
        <tr>
          <td><input class="c1" type="checkbox"/></td>
          <td>alex</td>
          <td>19</td>
        </tr>
        <tr>
          <td><input class="c1" type="checkbox"/></td>
          <td>alex</td>
          <td>19</td>
        </tr>
        <tr>
          <td><input class="c1" type="checkbox"/></td>
          <td>alex</td>
          <td>19</td>
        </tr>
      </tbody>
    </table>
    <script>
      //全选的话先获取所有的input标签属性，然后全部为true
      function checkAll(){
        var tb = document.getElementById('tb');//获取tb，也就是身体
        var checks = tb.getElementsByClassName('c1');
        //[第一个，2，3，4，5]checked = true
        for (var i=0;i<checks.length; i++){
          var current_check = checks[i];//得到每个input的值并赋一个变量名
           current_check.checked = true;
        }
      }
      function cancleAll(){
        var tb = document.getElementById('tb');//获取tb，也就是身体
        var checks = tb.getElementsByClassName('c1');
        //[第一个，2，3，4，5]checked = true
        for (var i=0;i<checks.length; i++){
          var current_check = checks[i];//得到每个input的值并赋一个变量名
           current_check.checked = false;
        }
      }
      
      function reverseAll(){
        var tb = document.getElementById('tb');//获取tb，也就是身体
        var checks = tb.getElementsByClassName('c1');
        //[第一个，2，3，4，5]checked = true
        for (var i=0;i<checks.length; i++){
          var current_check = checks[i];//得到每个input的值并赋一个变量名
           if(current_check.checked <!--这个地方如果为true-->){
             current_check.checked = false;
           }else{
           current_check.checked = true;
           }
        }
      }
      
      
    </script>    
    
  </body>
</html>

案例二：单选
要求只能选一个，并且用js可以改变其选项

运用知识点：getElementsByTagName | checked | 互斥

Javascript表单特效之十大常用原理性样例代码大总结

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title></title>
  </head>
  <body>
    <ul>
      <li><input type="radio" name="g" value="11" />男</li>
      <li><input type="radio" name="g" value="22" />女</li>
      <li><input type="radio" name="g" value="33" />女司机</li>
    </ul>
    <!--radio = document.getElementsByTagName('input')
    [<input type=​"radio" name=​"g" value=​"11">​, <input type=​"radio" name=​"g" value=​"11">​, <input type=​"radio" name=​"g" value=​"11">​]
    radio[1]
    <input type=​"radio" name=​"g" value=​"11">​
    xo = radio[1]
    <input type=​"radio" name=​"g" value=​"11">​
    xo.value
    "11"
    xo.checked
    false
    xo.checked = true
    true-->
  </body>
</html>

案例三：克隆

Javascript表单特效之十大常用原理性样例代码大总结

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title></title>
  </head>
  <body>
    <h2 id="h1">333
      <span>123</span>
      <a>123</a>
    </h2>
    <div id="container">
      <div class="item">1  </div>
      <div class="item">2</div>
      
    </div>
    <script>
      
      var h = document.getElementById('h1');
      var c = document.getElementById('container')
      //c.appendChild(h);//直接添加到2下面了
//      var newH = h.cloneNode(true);//不加true,只克隆格式
//      c.appendChild(newH);加true后完整克隆到2下面了
    </script>
  </body>
</html>

案例四：自定义属性，获取自定义属性并改变标签内容

Javascript表单特效之十大常用原理性样例代码大总结Javascript表单特效之十大常用原理性样例代码大总结

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title></title>
  </head>
  <body>
    
    
    //可以构造出一种选择器
    
    <input type="button" onclick="Func()" value="点我啊" />
    <div id='i1'>
      
      <div class="c1">123</div>
      <div class="c1" alex='sb'>123</div>
      <div class="c1" alex='sb'>123</div>
      <div class="c1" alex='sb'>123</div>
      <div class="c1">123</div>
      <div class="c1" alex='sb'>123</div>
      <div class="c1">123</div>
      <div class="c1" alex='sb'>123</div>
      <div class="c1">123</div>
    </div>
    <script>
    function Func(){
      //i1所有孩子，循环每一个孩子，判断如果alex='sb'
      var i1 = document.getElementById('i1')
      var divs = i1.children
      for ( var i =0; i<divs.length;i++){
        var current_div = divs[i];
        var result = current_div.getAttribute('alex')//得到属性
        //console.log(result);
        if (result == 'sb'){
          current_div.innerText = '456';
        }
      }
    }
    </script>
  </body>
</html>

案例五：获取输入框内的值三种方法

Javascript表单特效之十大常用原理性样例代码大总结

<!DOCTYPE html>
<html>
<head>
  <title></title>
  <meta charset="utf-8" />
</head>
<body>
  <div id="inp">
    
  </div>
  <input type="text" class="aa"/>
  <input type="button" value="添加" onclick="Func();" />
  </div>
  <div id="lis">
    <ul>
      <li>红烧肉</li>
      <li>红烧肘子</li>
      <li>红烧鱼</li>
    </ul>
  </div>
  <script>
    var inp_aa = document.getElementsByClassName('aa');
    inp_aa[0].value = '红烧带鱼';//相当于在输入框输入内容

  </script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
  <title></title>
  <meta charset="utf-8" />
</head>
<body>
  <div id="inp">
    
  </div>
  <input type="text" class="aa"/>
  <input type="button" value="添加" onclick="Func();" />
  </div>
  <div id="lis">
    <ul>
      <li>红烧肉</li>
      <li>红烧肘子</li>
      <li>红烧鱼</li>
    </ul>
  </div>
  <script>

    var c = document.querySelector('.aa');//查询选择器 .是区别id，标签的语法​
    c.value = '红烧茄子';
  
  </script>
</body>
</html>

方法二：查询

<!DOCTYPE html>
<html>
<head>
  <title></title>
  <meta charset="utf-8" />
</head>
<body>
  <div id="inp">
    
  </div>
  <input type="text" id="aa"/>
  <input type="button" value="添加" onclick="Func();" />
  </div>
  <div id="lis">
    <ul>
      <li>红烧肉</li>
      <li>红烧肘子</li>
      <li>红烧鱼</li>
    </ul>
  </div>
  <script>

    var c = document.getElementById('aa');​
    c.value = '红烧茄子';
  
  </script>
</body>
</html>

方法三：id

案例六：

Javascript表单特效之十大常用原理性样例代码大总结

    //'beforeBegin'、'afterBegin'\ 'beforeEnd'\'afterEnd'

<!DOCTYPE html>
<html>

  <head>
    <title></title>
    <meta charset="utf-8" />
  </head>

  <body>
    <div id="inp">

    </div>
    <input type="text" />
    <input type="button" value="添加" onclick="addElen(this)" />
    </div>
    <div>
      <ul id="lis">
        <li>红烧肉</li>
        <li>红烧肘子</li>
        <li>红烧鱼</li>
      </ul>
    </div>
    <script>

          function addElen(ths) {
            var aaa = ths.previousElementSibling.value;
      //      alert(aaa)
            var list_li = document.getElementById("lis");
      //      alert(list_li)
            var bbb = "<li>" +aaa+ "</li>";
      //      alert(bbb)
            list_li.insertAdjacentHTML("beforeEnd", bbb)
          }
    </script>
  </body>

</html>
<!DOCTYPE html>
<html>

  <head>
    <title></title>
    <meta charset="utf-8" />
  </head>

  <body>
    <div id="inp">

    </div>
    <input type="text" />
    <input type="button" value="添加" onclick="addElen(this)" />
    </div>
    <div>
      <ul id="lis">
        <li>红烧肉</li>
        <li>红烧肘子</li>
        <li>红烧鱼</li>
      </ul>
    </div>
    <script>
      function addElen(ths){
        var aaa = ths.previousElementSibling.value; //获取input的值
        var list_li = document.getElementById("lis"); //获取ul
        var tag = document.createElement('li');//创建li
        tag.innerText = aaa; //赋予tag也就是新的li标签里面的值是输入的input的值  
        list_li.insertBefore(tag, list_li.children[-1])//根据索引插入需要位置的值
      }
    </script>

  </body>

</html>
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title></title>
  </head>
  <body>
    <div>
      <input type="text" />
      <input type="button" value="添加" onclick="AddElement(this)" />
    </div>
    <div>
      <ul id="commentList">
        <li>alex</li>
        <li>eric</li>
      </ul>
    </div>
    <script>
      function AddElement(ths){
        //获取输入的值
        var val = ths.previousElementSibling.value;
        
        var commentList = document.getElementById('commentList')
        //第一种形式
        var str = "<li>" + val + "</li>"
        //'beforeBegin'、'afterBegin'\ 'beforeEnd'\'afterEnd'
        //beforeEnd 内部最后
        //beforeBegin 外部上边
        //afterBegin 内部贴身
        //afterEnd 外部贴身
//        commentList.insertAdjacentHTML("beforeEnd", str)
        //第二种方式，元素的方式
        var tag = document.createElement('li');
        tag.innerText = val;
        var temp = document.createElement('a');
        temp.innerText = '百度';
        temp.href = "http://www.baidu.com";
        tag.appendChild(temp);
        commentList.insertBefore(tag,commentList.children[1]);
        console.log(commentList.children[1])
      }
    </script>
  </body>  
</html>

案例七：

Javascript表单特效之十大常用原理性样例代码大总结Javascript表单特效之十大常用原理性样例代码大总结

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title></title>
    <style>
      input{
        height: 40px;
      }
      .gg{
        color: gray;
      }
      .bb{
        color: black;
      }
    </style>
  </head>
  <body>
    
    <p>当鼠标进入是，移除内容</p>
    <p>当输入表退出时，添加内容</p>
    <input type="text" class="gg" value="请输入内容" onfocus="Focus(this)" onblur="Blur(this)" />
    
    <script>
      function Focus(ths){
        //查找的第一种方式
        //document。。
        //第二种方式this
        //ths
        //ths.className = 'bb'
        var current_val = ths.value;
        if (current_val == "请输入内容"){
          ths.value = "";
          ths.className = 'bb';
        }
      }
      function Blur(ths) {
        var current_val = ths.value;
        if (current_val == "请输入内容" || current_val.trim().length == 0 ){
          ths.value = '请输入内容';
          ths.className = 'gg';
        }
      }
    </script>
  </body>
</html>

案例八：头部菜单

Javascript表单特效之十大常用原理性样例代码大总结

<!DOCTYPE html>
<html>

  <head>
    <title></title>
    <meta charset="utf-8" />
    <style>
      .pg_top .menu {
        background-color: gold;
        width: 400px;
        height: auto;
        position: absolute;
        left: 200px;
      }
      
      .item {
        float: left;
        margin: 10px 0;
        padding: 0 20px;
        font-size: 25px;
      }
      
      .content {
        position: absolute;
        left: 200px;
        top: 58px;
        background-color: burlywood;
        width: 400px;
        height: 200px;
      }
      
      .hide {
        display: none;
      }
      
      .bk {
        background-color: greenyellow;
      }
    </style>
  </head>

  <body>
    <div class="pg_top">
      <div class="menu">
        <div class="item" con="h1" onclick="Show(this)">十八里店</div>
        <div class="item" con="h2" onclick="Show(this)">簋街</div>
        <div class="item" con="h3" onclick="Show(this)">后海</div>
      </div>
      <div id="content" class="content">
        <div con="h1">烤全羊</div>
        <div class="hide" con="h2">麻辣龙虾</div>
        <div class="hide" con="h3">相约酒吧</div>
      </div>
    </div>
    <script>
      function Show(ths) {
        //当我点这个标签的时候,其他标签的背景色变没
        var baba = ths.parentElement.children; //获取到了每个子元素
        var target = ths.getAttribute('con');
        for (i = 0; i < baba.length; i++) {
          if (ths == baba[i]) { //做判断，
            ths.classList.add('bk') //添加属性
          } else {
            baba[i].classList.remove('bk') //删除属性
          }
        }
        //内容
        var current_con = document.getElementById('content').children;
        console.log(current_con)
        for (j=0; j<current_con.length;j++) {
          var s_att = current_con[j].getAttribute('con')
          if (target == s_att ) {
            current_con[j].classList.remove('hide');
          }else{
            current_con[j].className = 'hide';
          }
        }

      }
    </script>
  </body>
</html>
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title></title>
    <style>
    ul{
      list-style: none;
      padding: 0;
      margin: 0;
    }
    ul li{
      float: left;
      background-color: #2459a2;
      color: white;
      padding: 8px 10px;
    }
    .clearfix:after{
      display: block;
      value:'111';
      content: '.';
      height: 0;
      /*visibility: hidden;*/
      clear: both;
    }
        .hide{
      display: none;
    }
        .tab-menu .title{
      background-color: #dddddd;
    }
        .tab-menu .title .active{
      background-color: white;
      color: black;
    }
        .tab-menu .content{
      border: 1px solid #dddddd;
      min-height: 150px;
    }
  </style>
  </head>
  <body>
    <div style="width:400px; margin: 0 auto;">
      <div class="tab-menu">
        <div class="title clearfix">
          <ul>
            <li target='h1' class="active" onclick="Show(this)">十八里店</li>
            <li target='h2' onclick="Show(this)">簋街</li>
            <li target='h3' onclick="Show(this)">十刹海</li>
          </ul>
        </div>
        <div class="content" id="content">
          <div con="h1">烤羊腿</div>
          <div con="h3" <!--class="hide"-->>油焖小龙虾</div>
          <div con="h2" <!--class="hide"-->>香甜鸡尾酒</div>
          
        </div>
      </div>
        
    </div>
    <script>
      function Show(ths){
        //ths表示当前标签
        var target = ths.getAttribute('target')//h3
        //给自己添加样式active
        //兄弟们去掉
        ths.className = 'active';
        var brothers = ths.parentElement.children;
        for(var i=0;i<brothers.length;i++){
          if ( ths == brothers[i]){
            
          }else{
            brothers[i].removeAttribute('class')
          }
        }
      
        //操作内容
        var contents = document.getElementById('content').children;
        console.log(contents)
        for (var j=0;j<contents.length;j++){
          var current_content = contents[j];
          console.log(current_content)
          var con = current_content.getAttribute('con')
          if (con == target){
            current_content.classList.remove('hide');
          }else{
            current_content.className="hide";
          }
          
        }
        
      }
    </script>
  </body>
</html>

案例九：返回顶部
主要知识点：onscroll 和document.body.scrollTop;

Javascript表单特效之十大常用原理性样例代码大总结

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title></title>
    <style>
      .go-top{
        position: fixed;
        right: 20px;
        bottom: 19px;
        width: 40px;
        height: 40px;
        background-color: darkgoldenrod;
        color: white;
      }
      .hide{
        display: none;
      }
    </style>
  </head>
  <body onscroll="Func();">
    <div id="i1" style="height: 2000px; background-color: greenyellow;">
      <h1>asdfafdasdf</h1>
      
    </div>
    <div id="i2" class="go-top hide">
      <a href="javascript:void(0)" onclick="goTop();">返回顶部</a>
      
    </div>
    <script>
      function Func(){
        var scrollTop = document.body.scrollTop;//body的滚动高度
        var ii = document.getElementById('i2');
        if(scrollTop>100){
          ii.classList.remove('hide');//移除就是显示
        }else{
          ii.classList.add('hide');
        }
      }
      function goTop(){
        document.body.scrollTop=0;
        
      }
    </script>
  </body>
</html>

 案例十：
主要知识点：

//scroll 滚动；卷轴的意思
// scrollTop: 滚动条距离顶部高度
// scrollHeight: 文档高度:自身+padding
// clientTop: 边框高度
// clientHeight: 当前范围可视的高度:自身 + padding
//offset 印刷的意思
// offsetTop: 当前标签距离"顶部"的高度(body)
// 如果他的上一级没有postion,如果有则按照position的标签为主
// offsettHeight: 自身范围的高度:自身+padding+border

Javascript表单特效之十大常用原理性样例代码大总结

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title></title>
  </head>
  <body>
    <div style="height: 20px;background-color: green;"></div><!--头部-->
    <div style="border: 5px solid pink;padding: 10px;"><!--body-->
      <div>
        <div id="xo" style="height: 200px;overflow: auto;width: 400px;margin: 0 auto;border: 15px solid red;padding: 3px;" >
          <div>sdf</div><div>sdf</div><div>sdf</div><div>sdf</div><div>sdf</div><div>sdf</div><div>sdf</div><div>sdf</div>
          <div>sdf</div><div>sdf</div><div>sdf</div><div>sdf</div><div>sdf</div><div>sdf</div><div>sdf</div><div>sdf</div>
          <div>sdf</div><div>sdf</div><div>sdf</div><div>sdf</div><div>sdf</div><div>sdf</div><div>sdf</div><div>sdf</div>
          <div>sdf</div><div>sdf</div><div>sdf</div><div>sdf</div><div>sdf</div><div>sdf</div><div>sdf</div><div>sdf</div>
          <div>sdf</div><div>sdf</div><div>sdf</div><div>sdf</div><div>sdf</div><div>sdf</div><div>sdf</div><div>sdf</div>
          <div>sdf</div><div>sdf</div><div>sdf</div><div>sdf</div><div>sdf</div><div>sdf</div><div>sdf</div>
          <div>sdf</div><div>sdf</div><div>sdf</div><div>sdf</div><div>sdf</div><div>sdf</div><div>sdf</div><div>sdf</div>
          <div>sdf</div><div>sdf</div>
        </div>
      </div>
    </div>
    <script>
      var ii = document.getElementById('xo')
      console.log(ii.scrollTop) 
      console.log(ii.scrollHeight)
      console.log(ii.clientTop)
      console.log(ii.clientHeight)
      console.log(ii.offsetTop)
      console.log(ii.offsetHeight)
      //scroll 滚动；卷轴的意思
//      scrollTop: 滚动条距离顶部高度
//      scrollHeight: 文档高度:自身+padding
//      clientTop: 边框高度
//      clientHeight: 可见范围的高度:自身 + padding
      //offset 印刷的意思
//      offsetTop: 当前标签距离"顶部"的高度(body)
//            如果他的上一级没有postion,如果有则按照position的标签为主
//      offsettHeight: 可见范围的高度:自身+padding+border
    </script>
  </body>
</html>

好了，暂时就介绍到这里希望大家多写多练，主要是其中的逻辑，当然现在很多人都开始使用jquery了，大家也多注意。

Javascript表单特效之十大常用原理性样例代码大总结

- Author -

我当道士那些年

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
JavaScript 利用StringBuffer类提升+=拼接字符串效率
Nov 24 Javascript
JavaScrip单线程引擎工作原理分析
Sep 04 Javascript
JavaScript全排列的六种算法 具体实现
Jun 29 Javascript
js判断屏幕分辨率的代码
Jul 16 Javascript
jquery实现的一个简单进度条效果实例
May 12 Javascript
JS实现在线统计一个页面内鼠标点击次数的方法
Feb 28 Javascript
JavaScript中连接操作Oracle数据库实例
Apr 02 Javascript
JavaScript实现将xml转换成html table表格的方法
Apr 17 Javascript
再JavaScript的jQuery库中编写动画效果的指南
Aug 13 Javascript
javascript中的replace函数(带注释demo)
Jan 07 Javascript
axios的拦截请求与响应方法
Aug 11 Javascript
element-ui的回调函数Events的用法详解
Oct 16 Javascript
Bootstrap登陆注册页面开发教程
Jul 12 #Javascript
深入浅析knockout源码分析之订阅
Jul 12 #Javascript
Bootstrap组件系列之福利篇几款好用的组件（推荐二）
Jul 12 #Javascript
JavaScript导航脚本判断当前导航
Jul 12 #Javascript
jQuery bt气泡实现悬停显示及移开隐藏功能的方法
Jul 12 #Javascript
Extjs 点击复选框在表格中增加相关信息行
Jul 12 #Javascript
jQuery插件学习教程之SlidesJs轮播+Validation验证
Jul 12 #Javascript
修复(2) TECSUN(1) 海燕B411(1) YB217(1) 东方红(1) PL-365(1) 德生(17) 1 Tube Radio(1) YB235(1) 再生机(1)
You might like
php之Smarty模板使用方法示例详解
2014/07/08 PHP
PHP和MYSQL实现分页导航思路详解
2017/04/11 PHP
PHP实现限制域名访问的实现代码(本地验证)
2020/09/13 PHP
js预载入和JavaScript Image()对象使用介绍
2011/08/28 Javascript
使用JavaScript动态设置样式实现代码及演示动画
2013/01/25 Javascript
JavaScript实现的圆形浮动标签云效果实例
2015/08/06 Javascript
jQuery中的siblings用法实例分析
2015/12/24 Javascript
14 个折磨人的 JavaScript 面试题
2016/08/08 Javascript
livereload工具实现前端可视化开发【推荐】
2016/12/23 Javascript
jQuery中table数据的值拷贝和拆分
2017/03/19 Javascript
微信小程序 刷新上拉下拉不会断详细介绍
2017/05/11 Javascript
Javascript之图片的延迟加载的实例详解
2017/07/24 Javascript
vue多次循环操作示例
2019/02/08 Javascript
JS原生瀑布流效果实现
2019/04/26 Javascript
通过jQuery学习js类型判断的技巧
2019/05/27 jQuery
JS利用prototype给类添加方法操作详解
2019/06/21 Javascript
vue-froala-wysiwyg 富文本编辑器功能
2019/09/19 Javascript
使用Promise封装小程序wx.request的实现方法
2019/11/13 Javascript
[52:29]DOTA2上海特级锦标赛主赛事日 - 2 胜者组第一轮#3Secret VS OG第三局
2016/03/03 DOTA
[01:04:09]DOTA2-DPC中国联赛 正赛 iG vs VG BO3 第二场 2月2日
2021/03/11 DOTA
Python中模块string.py详解
2017/03/12 Python
python3去掉string中的标点符号方法
2019/01/22 Python
深入浅析python3中的unicode和bytes问题
2019/07/03 Python
python程序实现BTC（比特币）挖矿的完整代码
2021/01/20 Python
一款利用html5和css3实现的3D立方体旋转效果教程
2016/04/26 HTML / CSS
html5使用canvas绘制太阳系效果
2014/12/15 HTML / CSS
波兰灯具、照明和LED购物网站：Lampy.pl
2019/03/11 全球购物
N:Philanthropy官网：美国洛杉矶基础款服装
2020/06/09 全球购物
荷兰最大的鞋子、服装和运动折扣店：Bristol
2021/01/07 全球购物
创业计划书如何吸引他人眼球
2014/01/10 职场文书
2014年党小组工作总结
2014/12/20 职场文书
五年级下册复习计划
2015/01/19 职场文书
教师创先争优承诺书
2015/04/27 职场文书
元旦晚会开场白
2015/05/29 职场文书
大学班干部竞选稿
2015/11/20 职场文书
nginx实现动静分离的方法示例
2021/11/07 Servers