JavaScript之实现单选复选、菜单以及返回顶部实例

1、单选、复选以及反选实例

其实主要是利用for循环提取标签，然后更改checked属性值实现的

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

    <div>

        <input type="button" value="全选" onclick="CheckAll();"/>

        <input type="button" value="取消" onclick="CancleAll();"/>

        <input type="button" value="反选" onclick="Reverse();">

        <!--//ondblclick表示双击-->

    </div>

<table>

    <thead>

    <th>序号</th>

    <th>用户名</th>

    <th>年龄</th>

    </thead>

    <tbody id="tb">

    <tr>

        <td><input class="c1" type="checkbox"/></td>

        <td>jay</td>

        <td>23</td>

    </tr>

    <tr>

        <td><input class="c1" type="checkbox"/></td>

        <td>Bob</td>

        <td>23</td>

    </tr>

    <tr>

        <td><input class="c1" type="checkbox"/></td>

        <td>peter</td>

        <td>23</td>

    </tr>

    </tbody>

<script type="text/javascript">

    function CheckAll() {

        var tb = document.getElementById('tb');

        var checks = tb.getElementsByClassName('c1');

        for (var i=0;i<checks.length;i++){

            var current_check = checks[i];

            current_check.checked = true;

//        循环每一个标签

        }

    }

    function CancleAll() {

        var tb = document.getElementById('tb');

        var checks = tb.getElementsByClassName('c1');

        for (var i=0;i<checks.length;i++){

            var current_check = checks[i];

            current_check.checked = false;

//        循环每一个标签

        }

    }

    function Reverse() {

        var tb = document.getElementById('tb');

        var checks = tb.getElementsByClassName('c1');

        for (var i = 0; i < checks.length; i++) {

            var current_check = checks[i];

            if (current_check.checked) {

                current_check.checked = false;

            } else {

                current_check.checked = true;

            }

        }

    }

</script>

</table>

</body>

</html>

　　2、tab菜单实例

利用一种对应关系，实现一个tab菜单，主要思路是绑定每两个选项的关系，即当选中一个，则显示出与之对应的选项框，利用for循环实现显示与否

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>菜单</title>

    <style>

        ul{

            list-style: none;

            margin: 0;

            padding: 0;

        }

        ul li{

            float: left;

            background-color: blue;

            color: black;

            padding: 10px 12px;

        }

        .clearfix:after {

            display: block;

            content: '.';

            height: 0;

            visibility: hidden;

            clear: both;

        }

        .tab-menu .title{

            background-color: bisque;

        }

        .tab-menu .content{

            border: 1px solid black;

            min-height: 150px;

        }

        .hide{

            display: none;

        }

        .tab-menu .title .active{

            background-color: white;

            color:red ;

        }

        /*选中时候的状态*/

    </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='h3' onclick="Show(this);">市场分布</li>

                <li target='h2' onclick="Show(this);">其他</li>

            </ul>

        </div>

        <div id="jay" class="content">

            <div con="h1">contnet1</div>

            <div con="h2" class="hide">contnet2</div>

            <div  con="h3" class="hide">contnet3</div>

        </div>

    </div>

</div>

<script>

    function Show(ths) {

        //args表示当前标签

        var target=ths.getAttribute('target');

        //给自己添加样式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('jay').children;

    for(var j=0;j<contents.length;j++){

        var current_content =contents[j];

        var con = current_content.getAttribute('con')

        if(con == target){

            current_content.classList.remove('hide')

        }else{current_content.className='hide'}

    }

    }

</script>

</body>

</html>

　　执行结果如图所示，点击则会切换

3、往页面列表里面自动添加输入的文本内容

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

<div >

    <input type="text">

    <input type="button" value="添加" onclick="foo(this)">

</div>

<div>

    <ul id="commentList">

        <li>jay</li>

        <li>BOb</li>

    </ul>

</div>

<script>

    function foo(ths) {

        var val = ths.previousElementSibling.value;

        console.log(val);

        var ret = document.getElementById('commentList');

        var str = "<li>" + val + "</li>";

        ret.insertAdjacentHTML('beforeEnd', str);//该方法只能添加字符串

        ths.previousElementSibling.value = '';

//    第二种方法

        var tag = document.createElement('li');

        tag.innerText = val;

        ret.appendChild(tag);

    }

</script>

</body>

</html>

　　执行结果如

图

可以往下面随便添加内容

insertAdjacentHTML第一个参数有多种用法，如图

　　3、克隆移动标签

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

    <h2 id="h1">333</h2>

    <div id="container">

        <div class="item">1</div>

        <div class="item">1</div>

    </div>

<script>

    var h =document.getElementById('h1');

    var c=document.getElementById('container');

    var newH = h.cloneNode(true);//没有true参数的话，不会克隆标签里面的东西

    c.appendChild(newH)

</script>

</body>

</html>

　　执行结果如图

4、返回顶部

scrollTop表示的是离顶部的距离，可以调节这个属性的数值，随时返回顶部，代码如下

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        .go_top{

            position: fixed;

            right:27px;

            bottom: 40px;

            width:50px;

            height: 40px;

            background-color: black;

            color: white;

        }

        .hide{

            display: none;

        }

    </style>

</head>

<body onscroll="Func()">

<!--只要触动滚轮，就触动发该函数-->

<div id="i1" style="height: 3000px;background-color: aqua;margin:0 ">

    <h1>你好</h1>

</div>

<div id="i2" class="go_top hide">

    <a href="javascript:void (0)" onclick="goTop();">返回顶部</a>

<!--href="javascript:void (0)表示什么也不干-->

</div>

<script>

    function goTop() {

        document.body.scrollTop=0

    }

//    返回顶部

    function Func() {

          console.log(123);

        var scrollTop=document.body.scrollTop;

        var li=document.getElementById('i2');

        if(scrollTop>150){

            li.classList.remove('hide')

        }else{

            li.classList.add('hide')

        }

    }

//距离大于50px才触发函数，让这个返回顶部的框框显示出来

</script>

</body>

</html>

　　5计时器执行函数

如图，主要是setInterval方法的使用

JavaScript之实现单选复选、菜单以及返回顶部实例的更多相关文章

JavaScript小例子：复选框全选
JavaScript小例子:复选框全选这只是一个小例子,很简单,但是这个功能还是很常用的: 实现后效果如图: JavaScript代码: <script type="text/jav ...
[SAP ABAP开发技术总结]选择屏幕——按钮、单选复选框
声明:原创作品,转载时请注明文章来自SAP师太技术博客( 博/客/园www.cnblogs.com):www.cnblogs.com/jiangzhengjun,并以超链接形式标明文章原始出处,否则将 ...
微信小程序修改(自定义) 单选/复选按钮样式 checkbox/radio样式自定义
参考文章: 微信小程序修改(自定义) 单选/复选按钮样式 checkbox/radio样式自定义
个人永久性免费-Excel催化剂功能第58波-批量生成单选复选框
插件的最大威力莫过于可以把简单重复的事情批量完全,对日常数据采集或打印报表排版过程中,弄个单选.复选框和用户交互,美观的同时,也能保证到数据采集的准确性,一般来说用原生的方式插入单选.复选框,操作繁琐 ...
Asp.net自定义单选复选框控件
将常用的jquery插件封装成控件也是个不错的选择下面是效果的简单颜色,由于博客系统的限制没法完整演示最终效果,请下载示例查看 Asp.netWeb APIC#Javascript 1.新建类库 ...
JQuery基础原理与实例验证表单省市联动文本框判空单选复选判空下拉判空确认密码判等
JQuery 基础原理 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> & ...
单选复选框的js代码取值
单选框复选框选中后的js代码处理 <script type="text/javascript"> function check(){ document.getElem ...
jQuery 与js判断是否单选复选选中
js判断复选:这段代码昨天网上查看的资料没保存出处,抱歉 var obj=document.getElementsByName("diseaseSet"); //选择所有name= ...
单选复选按钮以及Toast学习笔记
1:单选按钮是以组的形式呈现,xml布局文件中需要定义一个RadioGroup,然后在这个组内再定义RadioButton.在java代码中为该按钮添加监听时,需要用组名来引用对应的方法setOnCh ...

随机推荐

PHP精度问题
PHP 为任意精度数学计算提供了二进制计算器(Binary Calculator),它支持任意大小和精度的数字,以字符串形式描述 bcadd — 加法bccomp — 比较bcdiv — 相除bcmo ...
一步步做程序优化-讲一个用于OpenACC优化的程序（转载）
一步步做程序优化[1]讲一个用于OpenACC优化的程序分析下A,B,C为三个矩阵,A为m*n维,B为n*k维,C为m*k维,用A和B来计算C,计算方法是:C = alpha*A*B + beta* ...
在Linux文件清空的几种方法
在Linux文件清空的几种方法 1.使用重定向的方法 [root@centos7 ~]# du -h test.txt 4.0K test.txt [root@centos7 ~]# > tes ...
oracle时间计算
1.在给定时间上加减天数 SQL> select to_char(to_date('20170531000000','yyyymmdd HH24:MI:SS')+4,'YYYYMMDDHH24M ...
InteliJ IDEA 设置eclipse快捷键
从使用eclipse切换到intellij idea开发工具常常会伴随这快捷切换的困扰,今天写到将intellij idea快捷键设置为eclipse快捷的方式步骤如下: file -> se ...
iar注释快捷键
选中多行后注释快捷键:Ctrl+K 取消多行注释快捷键:Ctrl+Shift+K
ln -s 软链接产生Too many levels of symbolic links错误
不能使用相对路径, ln -s ./cmake /usr/bin/ 而是要 ln -s /usr/local/bin/cmake /usr/bin/
Nginx技术深入剖析
Nginx软件功能模块说明核心功能模块(Core functionality):主要对应配置文件的Main区块和Events区块. 标准的http功能模块: 企业场景常用的Nginx http功能 ...
理解canvas路径
canvas路径和ps里面的路径差不多,在进行图形绘制时,先绘制出来图形的路径,然后再描边或者填充. canvas路径还有子路径的概念,在某一时刻,canvas之中只能有一条路径存在,Canvas规范 ...
Keil如何生成bin文件【Keil生成Bin文件的方法】
使用过Keil的同鞋都知道,现在Keil中默认可以输出.axf的调试文件和可以通过钩选输出的.hex可执行文件,没有bin(二进制)文件的输出选项.可是偏偏某些时候需要或者习惯性的使用.bin文件来进 ...

JavaScript之实现单选复选、菜单以及返回顶部实例

JavaScript之实现单选复选、菜单以及返回顶部实例的更多相关文章

随机推荐

热门专题