首页
所有分类
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 相关文章推荐
html组件不可输入(只读)同时任何组件都有效
Apr 01 Javascript
Javascript自定义排序 node运行 实例
Jun 05 Javascript
Json和Jsonp理论实例代码详解
Nov 15 Javascript
JavaScript中DOM详解
Apr 13 Javascript
Bootstrap3 图片（响应式图片&amp;图片形状）
Jan 04 Javascript
JavaScript中利用for循环遍历数组
Jan 15 Javascript
canvas红包照片实例分享
Feb 28 Javascript
Bootstrap弹出框（Popover）被挤压的问题小结
Jul 11 Javascript
vue2利用Bus.js如何实现非父子组件通信详解
Aug 25 Javascript
在一个页面实现两个zTree联动的方法
Dec 20 Javascript
在 webpack 中使用 ECharts的实例详解
Feb 05 Javascript
vue实现文字横向无缝走马灯组件效果的实例代码
Apr 09 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
比利时购物网站(33) 瑞典购物网站(55) 挪威购物网站(7) 葡萄牙购物网站(13) 哥伦比亚购物网站(5) 欧洲购物网站(15) 荷兰购物网站(99) 南非购物网站(8) 泰国购物网站(30) 芬兰购物网站(10)
You might like
php获取目录所有文件并将结果保存到数组（实例）
2013/10/25 PHP
php GUID生成函数和类
2014/03/10 PHP
微信营销平台系统?刮刮乐的开发
2014/06/10 PHP
PHP从FLV文件获取视频预览图的方法
2015/03/12 PHP
javascript 写类方式之三
2009/07/05 Javascript
jquery下异步提交表单 异步跨域提交表单
2010/11/17 Javascript
JS关键字球状旋转效果的实例代码
2013/11/29 Javascript
Array 重排序方法和操作方法的简单实例
2014/01/24 Javascript
jQuery中parentsUntil()方法用法实例
2015/01/07 Javascript
JS修改iframe页面背景颜色的方法
2015/04/01 Javascript
jQuery的Ajax用户认证和注册技术实例教程(附demo源码)
2015/12/08 Javascript
javascript数组去重小结
2016/03/07 Javascript
AngularJS 在同一个界面启动多个ng-app应用模块详解
2016/12/20 Javascript
原生js获取浏览器窗口及元素宽高常用方法集合
2017/01/18 Javascript
vue中多个倒计时实现代码实例
2019/03/27 Javascript
记一次用vue做的活动页的方法步骤
2019/04/11 Javascript
深入浅出了解Node.js Streams
2019/05/27 Javascript
[02:38]DOTA2亚洲邀请赛 IG战队巡礼
2015/02/03 DOTA
[46:58]完美世界DOTA2联赛PWL S3 Forest vs LBZS 第一场 12.17
2020/12/19 DOTA
[05:06]DOTA2-DPC中国联赛 正赛 VG vs Magma选手采访
2021/03/11 DOTA
用Python将动态GIF图片倒放播放的方法
2016/11/02 Python
Python的爬虫框架scrapy用21行代码写一个爬虫
2017/04/24 Python
Python实现的人工神经网络算法示例【基于反向传播算法】
2017/11/11 Python
AI人工智能 Python实现人机对话
2017/11/13 Python
python使用html2text库实现从HTML转markdown的方法详解
2020/02/21 Python
Python+OpenCV图像处理——图像二值化的实现
2020/10/24 Python
如何基于Python按行合并两个txt
2020/11/03 Python
.NET笔试题(20个问题)
2016/02/02 面试题
能否解释一下XSS cookie盗窃是什么意思
2012/06/02 面试题
时尚休闲吧创业计划书
2014/01/25 职场文书
教师自查自纠材料
2014/10/14 职场文书
2014年教研工作总结
2014/12/06 职场文书
端午节寄语2015
2015/03/23 职场文书
2015年办公室人员工作总结
2015/05/15 职场文书
永中文档在线转换预览基于nginx配置部署方案
2022/06/10 Servers
Win10本地连接不见了怎么恢复? win10系统电脑本地连接不见了解决方法
2023/01/09 数码科技