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 ...
随机推荐
- ROS机器人程序设计
在<ROS机器人程序设计>中,在第二章创建节点时给出一个接收和发送的例子,但是按照书中步骤编译时,遇到按个三个问题,现在罗列出来解决方案供参考. 建议在工作空间直接输入 catkin_ ...
- MyBatis的优缺点以及特点
特点: mybatis是一种持久层框架,也属于ORM映射.前身是ibatis. 相比于hibernatehibernate为全自动化,配置文件书写之后不需要书写sql语句,但是欠缺灵活,很多时候需要优 ...
- Extjs4.2 tabPosition left 相关
解决tabPosition:left 标签的方向问题 <%@ page language="java" import="java.util.*" pa ...
- 谈谈JDK8中的字符串拼接
字符串拼接问题应该是每个Java程序员都熟知的事情了,几乎每个Java程序员都读过关于StringBuffer/StringBuilder来拼接字符串. 在大多数的教程中,也许你会看到用+号拼接字符串 ...
- dom技术解析xml下jaxp解析器详细代码
1.使用jaxp实现查询操作 person.xml <?xml version="1.0" encoding="UTF-8" standalone=&qu ...
- python__基础 : 异常处理与自定义异常
异常处理方法一般为: try: ------code----- except Exception as e: # 抛出异常之后将会执行 print(e) else: # 没有异常将会执行 print( ...
- php - empty() is_null() isset()的区别
empty():当变量存在,并且是一个非空非零的值时,返回 FALSE,否则返回 TRUE. is_null():如果指定变量为 NULL,则返回 TRUE,否则返回 FALSE. isset():如 ...
- 【nginx】root alias 区别，以及server root ， location root 区别
nginx-root-alias-详解 最近在研究前后端分离站点配置在同一域名下,发现root,alias有区别,而且所有的root如果都放置在location下面访问无效的问题,才有此总结,本文只是 ...
- PHP Socket服务器搭建和测试
1.socket服务器搭建思路 1) 目的:理解socket服务器工作机制 2) 思路:创建socket -> 把socket加入连接池 -> 处理接收信息 -> 握手动作 -> ...
- JZOJ 1738. Heatwave
Description 给你N个点的无向连通图,图中有M条边,第j条边的长度为: d_j. 现在有 K个询问. 每个询问的格式是:A B,表示询问从A点走到B点的所有路径中,最长的边最小值是多少? I ...