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 ...

随机推荐

(jdbc和cmd)sqlite数据迁入mysql(导入导出)
从sqlite进行导出数据进行cmd命令第一步:sqlite3->.open [文件路径](打开连接)->.tables(这个是查看表是否有没有)->.cd [切换的盘符](这里 ...
旧文备份:windows下编译和使用IT++
1.下载IT++最新版:<a href="http://sourceforge.net/projects/itpp/">http://sourceforge.net/p ...
第41章 RS-485通讯实验—零死角玩转STM32-F429系列
第41章 RS-485通讯实验全套200集视频教程和1000页PDF教程请到秉火论坛下载:www.firebbs.cn 野火视频教程优酷观看网址:http://i.youku.com/fir ...
Ext4.2 select 和 query 区别与联系
Ext.query和Ext.select的作用是一致的,同是根据CSS选择符查找出一个或多个元素.区别在于返回类型上.分别是:query方法返回的是JavaScript标准的数组类型:select方法 ...
loss 和accuracy的关系梳理
最近打算总结一下这部分东西,先记录留个脚印.
Maven 引入war工程【work】
场景: 之前为了便于查看生产者项目缓存情况,做了一套界面,用来查看刷新缓存.然而最近发现消费者项目上也需要这套缓存界面,因此打算将这套界面代码迁移成独立的web项目,然后由生产者和消费者通过POM文件 ...
洛谷P1829 [国家集训队]Crash的数字表格 / JZPTAB(莫比乌斯反演)
题目背景提示:原 P1829 半数集问题已经迁移至 P1028 数的计算题目描述今天的数学课上,Crash小朋友学习了最小公倍数(Least Common Multiple).对于两个正整数a ...
$.each() 循环遍历完后阻止再执行的办法
jquery each循环遍历完再执行的方法因为each是异步的所以要加计数器. query each循环遍历完再执行的方法因为each是异步的所以要加计数器.var eachcount=0; ...
Pagehelper介绍
本文引自:https://my.oschina.net/zudajun/blog/745232 摘要: com.github.pagehelper.PageHelper是一款好用的开源免费的Mybat ...
jquery横向手风琴效果
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

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

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

随机推荐

热门专题