js的常用场景效果
- 转自https://www.cnblogs.com/tangdiao/p/9481681.html
- 1.checkbox的使用场景，学习之后就是购物车页面的自动计算的上手示例。
做成给checkbox注册click事件就是模仿购物车页面的自动结算功能。
代码部分
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>全选反选问题</title>
<script>
function checkAll(obj){
//让所有item的状态和全选保持一致
var items = document.getElementsByName("item");
for(var i=0; i<items.length; i++){
items[i].checked = obj.checked;
}
} window.onload = function(){ //当页面加载完成后获取所有的item
//获取所有的item, 给每一个item添加点击事件: 判断所有的item是否被选中, 如果是, 全选应该被选中, 如果不是, 全选应该取消!
var items = document.getElementsByName("item");
for(var i=0; i<items.length; i++){
items[i].onclick = function(){
var flag = true;
for(var j=0; j<items.length; j++){
if(!items[j].checked){
flag = false;
break;
}
}
document.getElementById("all1").checked = flag; /*if(flag){
document.getElementById("all1").checked = true;
}else{
document.getElementById("all1").checked = false;
}*/
}
} } function check(){
//获取所有的item, 将每一个item的状态取反.
var items = document.getElementsByName("item");
for(var i=0; i<items.length; i++){
items[i].checked = !items[i].checked;
} //==============================
//判断所有的item是否被选中, 如果是, 全选应该被选中, 如果不是, 全选应该取消!
var flag = true;
for(var j=0; j<items.length; j++){
if(!items[j].checked){
flag = false;
break;
}
}
document.getElementById("all1").checked = flag;
} function getSum(){
//获取所有的item, 循环遍历, 依次判断每一个item是否被选中, 如果是累加value
var items = document.getElementsByName("item");
var sum = 0;
for(var i=0; i<items.length;i++){
if(items[i].checked){
sum += parseFloat(items[i].value);
}
}
document.getElementById("sumId").innerHTML = "总金额为: "+sum;
} </script>
</head> <body>
<div>商品列表</div>
<input type="checkbox" name="item" value="3000" />笔记本3000元<br />
<input type="checkbox" name="item" value="2500"/>HTC手机2500<br />
<input type="checkbox" name="item" value="8000" />苹果电脑8000<br />
<input type="checkbox" name="item" value="1500" />IPAD1500<br />
<input type="checkbox" name="item" value="400" />玩具汽车400<br /> <input type="checkbox" id="all1" name="all" onclick="checkAll(this)"/>全选<br />
<input type="checkbox" id="all2" name="all" onclick="check()"/>反选<br /> <input type="button" value="总金额" onclick="getSum()" /><span id="sumId"></span>
</body>
</html>
- 2.表格隔行变色+hover变色
具体代码
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>表格的操作</title>
<style type="text/css">
table {
border:#0099FF 1px solid;
width:500px;
border-collapse:collapse;
}
table th, table td {
border:#0099FF 1px solid;
padding:10px 0px 10px 10px;
}
table th {
background-color:#00CCFF;
} .one {
background-color:#CCFF66;
}
.two {
background-color:#897af1;
}
.over {
background-color:#FF0000;
}
div{
text-align: center;
padding:20px;
color:red;
}
</style> <script type="text/javascript">
window.onload = function(){
alert("效果1: 隔行变色");
//获取所有的tr
var aTr = document.getElementsByTagName("tr");
//循环遍历
for(var i=1; i<aTr.length; i++){
if(i%2 == 0){//奇(偶)数行,设置为one
aTr[i].className = "one";
}else{//偶(奇)数行,设置为one
aTr[i].className = "two";
}
//------------------------------
var classNameTemp;
//光标移入元素时
aTr[i].onmouseover = function(){
classNameTemp = this.className;//记住改变之前的class
this.className = "over";
}
//光标移出元素时
aTr[i].onmouseout = function(){
this.className = classNameTemp;
}
}
}
</script>
</head>
<body>
<table align="center">
<tr>
<th>电影名称</th>
<th>电影介绍</th>
<th>主演名单</th>
</tr>
<tr>
<td>变形金刚</td>
<td>很不错的电影</td>
<td>机器人</td>
</tr>
<tr>
<td>唐伯虎点秋香</td>
<td>非常好的电影</td>
<td>周星驰,巩俐</td>
</tr>
<tr>
<td>东邪西毒</td>
<td>群星云集的电影</td>
<td>张国荣,梁朝伟...</td>
</tr>
<tr>
<td>少林足球</td>
<td>最厉害的足球电影</td>
<td>周星驰,赵薇</td>
</tr>
<tr>
<td>赌神</td>
<td>小马哥演绎赌神</td>
<td>周润发</td>
</tr>
<tr>
<td>大话西游</td>
<td>超级搞笑的电影</td>
<td>周星驰</td>
</tr>
<tr>
<td>疯狂的石头</td>
<td>一部让人大笑不止的电影</td>
<td>黄渤</td>
</tr>
</table>
<div>(效果2: 试试将鼠标移入到表格行内...)</div>
</body>
</html>
js的常用场景效果的更多相关文章
- Node.js：常用工具util
概要:本篇博客的主要内容是介绍node.js的常用工具util. 1.util.inherits util.inherits(constructor,superConstructor)是一个实现对象间 ...
- git常用命令常用场景
在使用git之前,一直用的是svn版本管理:与svn最大不同的是,git有两个仓库,一个是本地仓库,一个是服务器上共享的仓库:本地仓库是每个开发者自己独有的,即使commit提交也只是提交到本地仓库: ...
- Vue.js之常用指令
vue常用指令 vue.js官方给自己的定义是数据模板引擎,并给出了一套渲染数据的指令.本文详细介绍vue.js的常用指令. 官网:点我 一.v-text.v-html v-text:用于绑定文本 v ...
- 01-THREE.JS 第一个场景
THREE.JS第一个场景 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> ...
- 【温故知新】——原生js中常用的四种循环方式
一.引言 本文主要是利用一个例子,讲一下原生js中常用的四种循环方式的使用与区别: 实现效果: 在网页中弹出框输入0 网页输出“欢迎下次光临” 在网页中弹出框输入1 网页输出“查询中……” 在 ...
- Node.js：常用工具
ylbtech-Node.js:常用工具 1.返回顶部 1. Node.js 常用工具 util 是一个Node.js 核心模块,提供常用函数的集合,用于弥补核心JavaScript 的功能 过于精简 ...
- 使用WebGL + Three.js制作动画场景
使用WebGL + Three.js制作动画场景 3D图像,技术,打造产品,还有互联网:这些只是我爱好的一小部分. 现在,感谢WebGL的出现-一个新的JavaScriptAPI,它可以在不依赖任何插 ...
- jquery-12 jquery常用动画效果有哪些
jquery-12 jquery常用动画效果有哪些 一.总结 一句话总结:jquery可以用户animate()自定义动画,也可以slide和fade系列方法来设置动画. 1.动画效果如何设置执行时间 ...
- jQuery中常用网页效果应用
一.常用网页效果应用 1.表单应用 表单由表单标签.表单域和表单按钮组成. 1.1单行文本框应用 例:获取和失去焦点改变样式 首先,在网页中创建一个表单,HTML代码如下 <form actio ...
随机推荐
- GItBook命令使用(持续更新)
GitBook基本命令 gitbook init //初始化目录文件 gitbook help //列出gitbook所有的命令 gitbook --help //输出gitbook-cli的帮助信息 ...
- 不服跑个分：ARM鲲鹏云服务器实战评测——华为云鲲鹏KC1实例 vs. 阿里云G5实例【华为云技术分享】
原文链接:https://m.ithome.com/html/444828.htm 今年一月份,华为正式发布了鲲鹏920数据中心高性能处理器,该处理器兼容ARM架构,采用7纳米制造,最高支持64核,主 ...
- 【Python成长之路】装逼的一行代码：快速共享文件【华为云分享】
[写在前面] 有时候会与同事共享文件,正常人的操作是鼠标右键,点击共享.其实有个装逼的方法,用python的一行代码快速实现基于http服务的共享方式. [效果如下] [示例代码] 在cmd窗口进入想 ...
- 创建raid10（五块磁盘）
创建raid10(五块磁盘) Raid10(5块磁盘) 上一个bolg已经做了raid5(3 个raid. 2个备份),在此条件下继续以下步骤: 1.先将磁盘系统卸载 2.看系统挂载里是否还有md0 ...
- 使用ASP.NET Core 3.x 构建 RESTful API - 3.3 状态码、错误/故障、ProblemDetails
HTTP状态码 HTTP状态码会告诉API的消费者以下事情: 请求是否执行成功了 如果请求失败了,那么谁为它负责 HTTP的状态码有很多,但是Web API不一定需要支持所有的状态码.HTTP状态码一 ...
- 从头学pytorch(二) 自动求梯度
PyTorch提供的autograd包能够根据输⼊和前向传播过程⾃动构建计算图,并执⾏反向传播. Tensor Tensor的几个重要属性或方法 .requires_grad 设为true的话,ten ...
- Python3 网络编程基础1
目录 开发架构 C/S架构 B/S架构 OSI模型 应用层 表示层 会话层 传输层 网络层 数据链路层 物理层 TCP协议 socket 开发架构 C/S架构 client 和 server, 既客户 ...
- servlet读取请求参数后流失效的问题
在用reset接口的时候,常常会使用request.getInputStream()方法,但是流只能读取一次,一旦想要加上一个过滤器用来检测用户请求的数据时就会出现异常. 在过滤器中通过流读取出用户p ...
- electron中JS报错：require is not defined的问题解决方法
Electron已经发布了6.0正式版,升级后发现原来能运行的代码报错提示require is not defined 解决办法: 修改创建BrowserWindow部分的相关代码,设置属性webPr ...
- EFK的搭建(未完成)
EFK 是ELK 日志分析的一个变种,能够更好的来实现日志分析. 首先我们先准备3台 centos7的服务器,在给他们调成2核2G的状态打开. 软件 版本号 zookeeper 3.4.14 Kafk ...