0516js综合练习
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0px auto;
padding: 0px;
}
.box{
width: 1000px;
height: 100px;
border: 1px solid red;
line-height: 100px;
text-align: center;
}
.box1{
width: 500px;
height: 200px;
border: 1px solid red;
background-color: cadetblue;
line-height: 100px;
text-align: center;
}
.box2{
width: 100px;
height: 50px;
border: 1px solid red;
border-radius: 5px;
background-color: burlywood;
float: left;
margin-top: 25px;
margin-left: 25px;
transition: 1s;
}
.box3{
width: 50px;
height: 50px;
border: 1px solid red;
background-color: cadetblue;
float: left;
border-radius: 10px;
margin-top: 25px;
margin-left: 25px;
transition: 1s;
}
/*.box4{
width: 50px;
height: 50px;
border: 1px solid red;
background-color: burlywood;
float: left;
border-radius: 25px;
margin-top: 25px;
margin-left: 25px;
}*/
</style>
</head>
<body>
<div class="box">
<button onclick="dianji('blue')">背景变蓝</button>
<button onclick="dianji('green')">背景变绿</button>
<button onclick="dianji('yellow')">背景变黄</button>
<button onclick="dianji('')">恢复原样</button>
</div>
<div class="box">
<button onclick="dianjia('width','500px')">背景变窄</button>
<button onclick="dianjia('background-color','green')">背景变绿</button>
<button onclick="dianjia('height','200px')">背景变宽</button>
<button onclick="dianjia()">恢复原样</button>
</div>
<div class="box">
<input type="" name="" id="" value="这是原来的文字" />
<button onclick="dianjib('value','这是改变后的文字')">改变文字</button>
<button onclick="dianjib('title','这是title')">添加title属性</button>
</div>
<div class="box">
<button onclick="dianjic('box1')">变色、变高、变窄</button>
<button onclick="dianjic('box')">恢复原样</button>
</div>
<div class="box">
<button onclick="dianjid()">循环出现提示框五次</button>
</div>
<div class="box">
<button onclick="dianjie('background-color','cadetblue')">批量修改样式</button>
<div class="box2" name ="1" ></div>
<div class="box2" name ="1" ></div>
<div class="box2" name ="1" ></div>
<div class="box2" name ="1" ></div>
<div class="box2" name ="1" ></div>
</div>
<div class="box">
<button onclick="dianjif('burlywood','100px')">批量修改样式</button>
<div class="box3" name ="1" ></div>
<div class="box3" name ="1" ></div>
<div class="box3" name ="1" ></div>
<div class="box3" name ="1" ></div>
<div class="box3" name ="1" ></div>
</div>
<div class="box">
<input type="checkbox" name="" id="" value="" class="check"/>
<input type="checkbox" name="" id="" value="" class="check"/>
<input type="checkbox" name="" id="" value="" class="check"/>
<input type="checkbox" name="" id="" value="" class="check"/>
<input type="checkbox" name="" id="" value="" class="check"/>
<input type="checkbox" name="" id="" value="" class="check"/>
<button onclick="dianjig('quanxuan')">全选</button>
<button onclick="dianjig('fanxuan')">反选</button>
<button onclick="dianjig('buxuan')">全都不选</button>
</div>
</body>
</html>
<script type="text/javascript">
function dianji(color){
var sj1 = document.getElementsByTagName("div")[0];
sj1.style.backgroundColor = color;
}
function dianjia(x,y){
var sj2 = document.getElementsByTagName("div")[1];
sj2.style[x] = y;
}
function dianjib(name,room){
var sj3 = document.getElementsByTagName("input")[0];
sj3.setAttribute(name,room);
}
function dianjic(name){
var sj4 = document.getElementsByTagName("div")[3];
sj4.setAttribute("class",name);
}
function dianjid(){
for (var i = 1;i <= 5;i++) {
alert("这是第"+ i +"次弹出");
}
}
function dianjie(x,y){
for(var i = 0;i < document.getElementsByClassName("box2").length + i;i++){
var box = document.getElementsByClassName("box2");
box[0].setAttribute("class","box3");
}
}
// 每次循环把box2的第0项改变为box3,下次循环时,上次循环中的box2第1项变为这次循环中box2的第0项,同时长度lenggth减1
function dianjif(x,y){
var moren = document.getElementsByName("1")[0].getAttribute("class");
if( moren == "box3"){
for(var i = 0;i < document.getElementsByClassName("box3").length + i;i++){
var boxa = document.getElementsByClassName("box3");
boxa[0].setAttribute("class","box2");
}
}else {
for(var i = 0;i < document.getElementsByClassName("box2").length + i;i++){
var box = document.getElementsByClassName("box2");
box[0].setAttribute("class","box3");
}
}
// var sj5 = document.getElementsByClassName("box3");
// if (sj5[0].getAttribute("name") == "1") {
// for (var i = 0;i < sj5.length;i++) {
// sj5[i].style.backgroundColor = x;
// sj5[i].style.width = y;
// sj5[i].setAttribute("name","2");
// }
// } else{
// for (var i = 0;i < sj5.length;i++) {
// sj5[i].style.backgroundColor = "cadetblue";
// sj5[i].style.width = "50px";
// sj5[i].setAttribute("name","1");
// }
// }
}
function dianjig(xuanbuxuan){
var zhuangtai = document.getElementsByClassName("check");
if (xuanbuxuan == "quanxuan") {
for(var i = 0;i < zhuangtai.length;i++){
zhuangtai[i].checked = true;
}
} else if(xuanbuxuan == "buxuan"){
for(var i = 0;i < zhuangtai.length;i++){
zhuangtai[i].checked = false;
}
} else{
for(var i = 0;i < zhuangtai.length;i++){
var djzt = zhuangtai[i].getAttribute("checked");
if (zhuangtai[i].checked == true) {
zhuangtai[i].checked = false;
} else{
zhuangtai[i].checked = true;
}
}
}
}
</script>
0516js综合练习的更多相关文章
- AEAI DP V3.6.0 升级说明，开源综合应用开发平台
AEAI DP综合应用开发平台是一款扩展开发工具,专门用于开发MIS类的Java Web应用,本次发版的AEAI DP_v3.6.0版本为AEAI DP _v3.5.0版本的升级版本,该产品现已开源并 ...
- H5+JS+CSS3 综合应用
慕课网新教程H5+JS+CSS3 实现的七夕言情主题效果已经出炉了 从设计到实现到录制与编写用了快1个月的时间,说真的这个案例是慕课定制的,我之前也没有系统的做过这样的一个效果,在实现的时候自己也重新 ...
- [教程] [授权翻译] 使用补丁修改DSDT/SSDT [DSDT/SSDT综合教程]
[教程] [授权翻译] 使用补丁修改DSDT/SSDT [DSDT/SSDT综合教程] http://bbs.pcbeta.com/viewthread-1571455-1-1.html [教程] [ ...
- iOS--知识综合应用成就时髦小功能点
iOS--知识综合应用成就时髦小功能点
- Oracle 数据库基础学习 (七) SQL语句综合练习
一.多表查询综合练习 1. 列出高于在30部门工作的所有人员的薪金的员工的姓名.部门名称.部门编号.部门人数 分析: 需要的员工信息: |-emp表:姓名.部门编号 |-dept表:部门名称.部门编 ...
- C#综合揭秘——通过修改注册表建立Windows自定义协议
引言 本文主要介绍注册表的概念与其相关根项的功能,以及浏览器如何通过连接调用自定义协议并与客户端进行数据通信.文中讲及如何通过C#程序.手动修改.安装项目等不同方式对注册表进行修改.其中通过安装项目对 ...
- HTML5快速入门（三）—— 标签综合运用
前言: 1.HTML5的发展非常迅速,可以说已经是前端开发人员的标配,在电商类型的APP中更是运用广泛,这个系列的文章是本人自己整理,尽量将开发中不常用到的剔除,将经常使用的拿出来,使需要的朋友能够真 ...
- Mybatis(综合案例)
MyBatis本是apache的一个开源项目iBatis,2010年这个项目有Apache software foundation 迁移到了Google code,并改名MyBatis.2013年11 ...
- html5，表单的综合案例
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8&qu ...
随机推荐
- java反射案例详解
白首为功名.旧山松竹老,阻归程.欲将心事付瑶琴.知音少,弦断有谁听? [案例1]通过一个对象获得完整的包名和类名 package Reflect; /** * 通过一个对象获得完整的包名和类名 * * ...
- mysql进阶(九)多表查询
MySQL多表查询 一 使用SELECT子句进行多表查询 SELECT 字段名 FROM 表1,表2 - WHERE 表1.字段 = 表2.字段 AND 其它查询条件 SELECT a.id,a.na ...
- OS X中app store正在下载的文件在哪里
很多朋友遇到过app下载一半卡死的情况,点击停止和继续又会无限期等待中. 其实可以将还未下完的app删除来再次尝试下. 打开终端,输入以下命令: open $(getconf DARWIN_USER_ ...
- Leetcode_206_Reverse Linked List
本文是在学习中的总结,欢迎转载但请注明出处:http://blog.csdn.net/pistolove/article/details/45739753 Reverse a singly linke ...
- Java泛型type体系
最近看开源代码,看到里面很多Java泛型,并且通过反射去获取泛型信息.如果说要看懂泛型代码,那还是比较容易,但是如果要自己利用泛型写成漂亮巧妙的框架,那必须对泛型有足够的了解.所以这两三天就不在不断地 ...
- ffdshow 源代码分析 3： 位图覆盖滤镜（设置部分Settings）
===================================================== ffdshow源代码分析系列文章列表: ffdshow 源代码分析 1: 整体结构 ffds ...
- 【Qt编程】基于Qt的词典开发系列<五>--无边框窗口的拖动
在上一篇文章中,我们讲述了如何进行无边框窗口的缩放与拖动,而在一些情况下,我们的窗口只需要进行拖动也不需要改变其大小,比如:QQ的登录窗口.本来在上一篇文章中已经讲述了如何进行窗口的拖动,但是却与窗口 ...
- C# 如何将PDF转为多种图像文件格式（Png/Bmp/Emf/Tiff）
PDF是一种在我们日常工作学习中最常用到的文档格式之一,但常常也会因为文档的不易编辑的特点,在遇到需要编辑PDF文档内容或者转换文件格式的情况时让人苦恼.通常对于开发者而言,可选择通过使用组件的方式来 ...
- RecyclerView 与 Scrollview 搭配使用的两个坑
RecyclerView & Scrollview & wrap_content RecyclerView wrap_content 用android.support.v4.widge ...
- LambdaToSql 发布 兰姆达转换sql
文档目录索引 查询.函数.分组.排序.分页 添加 Insert into 编辑 Update set 删除 Delete 生成实体 内置常用工具类库 文档完善中... 事务处理 Join 连接查询 ...