JS 20180415作业
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: auto;
padding: 0px; }
#a1{
width: 1000px;
height: 200px;
border: 1px solid red;
background-color: white;
box-shadow: 8px 8px 8px gray;
margin-top: 10px;
overflow: hidden;
}
#a11{
width: 1000px;
height: 50px;
border: 1px solid red;
line-height: 50px; }
#a2{
width: 1000px;
height: 50px;
border: 1px solid red;
margin-top: 20px;
}
#a21{
width: 150px;
height: 30px;
margin-top: 20px;
margin-left: 50px;
}
#a4{
width: 1000px;
height: 250px;
border: 1px solid red;
background-color: white;
box-shadow: 8px 8px 8px gray;
margin-top: 10px;
overflow: hidden;
}
#a41{
width: 1000px;
height: 50px;
border: 1px solid red;
line-height: 50px; }
#a42{
width: 1000px;
height: 50px;
border: 1px solid red;
margin-top: 20px;
}
#a421{
width: 150px;
height: 30px;
margin-top: 20px;
margin-left: 50px;
}
#a43{
width: 1000px;
height: 50px;
border: 1px solid red;
line-height: 50px;
margin-left: 50px;
}
#a44{
width: 1000px;
height: 50px;
border: 1px solid red;
margin-top: 10px;
}
.a441{
width: 50px;
height: 50px;
border: 1px solid red;
background-color: white;
margin-left: 20px;
float: left;
}
#a5{
width: 1000px;
height: 600px;
border: 1px solid red;
background-color: white;
box-shadow: 8px 8px 8px gray;
margin-top: 10px;
overflow: hidden;
}
#a51{
width: 1000px;
height: 50px;
border: 1px solid red;
line-height: 50px;
margin-left: 20px;
}
#a52{
width: 1000px;
height: 50px;
border: 1px solid red;
margin-top: 20px;
margin-left: 20px; }
#a521{
width: 150px;
height: 30px;
margin-top: 20px;
margin-left: 50px;
}
#a53{
width: 1000px;
height: 50px;
border: 1px solid red;
line-height: 50px;
margin-left: 20px;
}
.a54{
width: 400px;
height: 100px;
border: 1px solid red;
background-color: white;
box-shadow: 8px 8px 8px gray;
margin-top: 20px;
transition: 2s;
}
#a6{
width: 1000px;
height: 200px;
border: 1px solid red;
background-color: white;
box-shadow: 8px 8px 8px gray;
margin-top: 10px;
overflow: hidden;
}
#a61{
width: 1000px;
height: 50px;
border: 1px solid red;
line-height: 50px;
margin-left: 20px;
}
#a62{
width: 1000px;
height: 50px;
border: 1px solid red;
margin-top: 20px;
margin-left: 20px; }
#a63{
width: 1000px;
height: 50px;
border: 1px solid red;
margin-top: 10px;
margin-left: 20px; }
</style>
</head>
<body>
<div id="a1">
<div id="a11">
1、while循环
</div> <div id="a2">
<input type="submit" name="a21" id="a21" value="循环出现提示框5次" onclick="b1()"/>
</div> </div>
<div id="a4">
<div id="a41">
2、for循环
</div>
<div id="a42">
<input type="submit" name="a421" id="a421" value="批量修改样式" onclick="b2()"/>
</div>
<div id="a43">
固定元素个数
</div>
<div id="a44">
<div class="a441"> </div>
<div class="a441"> </div>
<div class="a441"> </div>
<div class="a441"> </div>
</div>
</div>
<div id="a5">
<div id="a51">
if判断for循环
</div>
<div id="a52">
<input type="submit" name="a521" id="a521" value="批量修改样式" onclick="b3()"/>
</div>
<div id="a53">
元素个数不定
</div>
<div class="a54"> </div>
<div class="a54"> </div>
<div class="a54"> </div> </div>
<div id="a6">
<div id="a61">
if判断for循环
</div>
<div id="a62">
<input type="checkbox" name="chk" id="1a" value="2" />
<input type="checkbox" name="chk" id="2b" value="3" />
<input type="checkbox" name="chk" id="3c" value="4" />
<input type="checkbox" name="chk" id="4d" value="6" />
<input type="checkbox" name="chk" id="5e" value="5" />
<input type="checkbox" name="chk" id="6f" value="7" />
</div>
<div id="a63">
<input type="submit" name="qx" id="qx" value="全选" onclick="b4()"/>
<input type="submit" name="a632" id="a632" value="不选" onclick="b5()"/>
<input type="submit" name="a633" id="a633" value="反选" onclick="b6()"/>
</div>
</div>
</body>
</html>
<script type="text/javascript">
function b1(){
for(var i= 0;i<5;i++){
alert("这是第"+i+"弹窗")
}
}
function b2(){
var a421 = document.getElementsByClassName("a441");
for(var i = 0;i<a421.length;i++){
a421[i].style.backgroundColor = "yellow"
}
}
function b3(){
var a521 = document.getElementsByClassName("a54");
/*if(a54.style.background == "white"){*/
for (var i =0;i < a521.length ;i++){
a521[i].style.backgroundColor = "yellow";
a521[i].style.height = "100px";
a521[i].style.width = "500px";
}
/*}*/
/*else{
a521[i].style.width = "400px";
a521[i].style.height = "100px";
a521[i].style.background-color = "white";
}*/
}
function b4 (){
var chk = document.getElementsByClassName("chk");
var qx = document.getElementsByClassName("qx");
for(var i = 0;i<chk.length;i++){
if(qx.checked){
chk[i].checked = true;
}
}
}
</script>
JS 20180415作业的更多相关文章
- js大作业(0)
DAY1:在看HTML5游戏开发实战.手写了一遍乒乓球.自己玩了半小时.实话讲,和本科学的MFC差别不大.通过setInterval函数获取用户的输入 从而允许多用户操作.parseInt把字符串化为 ...
- 百度前端学院js课堂作业合集+分析(更新中...)
第一课:简陋的登录框 <!DOCTYPE html> <html lang="en"> <head> <meta charset=&quo ...
- JS 20180416作业
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- 树莓派.使用Node.js来制作一个作业检查仪
先上图 前段时间, 花了点时间给女儿做了个数学习题的小程序 首页 做题界面(题目每次都随机生成, 加减乘除都有) 做题记录 现在问题来了, 怎么才能随时知道作业有没有完成呢? 每次打开做题记录页面刷新 ...
- vue js计算精度问题处理，兼容XP系统
js计算精度问题(浮点数误差,大数计算出错) JavaScript 运算时经常遇到会 0.000000001 和 0.999999999 这样奇怪的结果. 网上教程一大篇,原理请百度,抄作业往下看!! ...
- 分享：计算机图形学期末作业！！利用WebGL的第三方库three.js写一个简单的网页版“我的世界小游戏”
这几天一直在忙着期末考试,所以一直没有更新我的博客,今天刚把我的期末作业完成了,心情澎湃,所以晚上不管怎么样,我也要写一篇博客纪念一下我上课都没有听,还是通过强大的度娘完成了我的作业的经历.(当然作业 ...
- kettle作业中的js如何写日志文件
在kettle作业中JavaScript脚本有时候也扮演非常重要的角色,此时我们希望有一些日志记录.下面是job中JavaScript记录日志的方式. job的js写日志的方法. 得到日志输出实例 o ...
- 廖雪峰js教程笔记11 操作DOM(包含作业)
由于HTML文档被浏览器解析后就是一棵DOM树,要改变HTML的结构,就需要通过JavaScript来操作DOM. 始终记住DOM是一个树形结构.操作一个DOM节点实际上就是这么几个操作: 更新:更新 ...
- KoaHub.JS用于Node.js的cron作业调度程序代码
node-schedule A cron-like and not-cron-like job scheduler for Node. Node Schedule Announcement: ...
随机推荐
- （32）Spring Boot使用@SpringBootApplication注解，从零开始学Spring Boot
[来也匆匆,去也匆匆,在此留下您的脚印吧,转发点赞评论] 如果看了我之前的文章,这个节你就可以忽略了,这个是针对一些刚入门的选手存在的困惑进行写的一篇文章. 很多Spring Boot开发者总是使用 ...
- Redis命令操作简介及五种value数据类型
转自:https://blog.csdn.net/ty4315/article/details/52050721 Redis是使用键值存储数据,key必须是字符串value支持五种数据类型,最新版本又 ...
- 0823关于整理MySQL死锁
-- 更多的是需要理解 http://hedengcheng.com/?p=577 -- 何登成 关于WHERE的提取http://www.cnblogs.com/metoy/p/5545580.ht ...
- 【ACM】poj_2092_Grandpa is Famous_201308021920
Grandpa is FamousTime Limit: 2000MS Memory Limit: 30000K Total Submissions: 7256 Accepted: 3670 De ...
- Sigma Function 数学 因子求和
Sigma function is an interesting function in Number Theory. It is denoted by the Greek letter Sigma ...
- POJ 1198/HDU 1401
双向广搜... 呃,双向广搜一般都都用了HASH判重,这样可以更快判断两个方向是否重叠了.这道题用了双向的BFS,有效地减少了状态.但代码太长了,不写,贴一个别人的代码.. #include<i ...
- [Javascript] IntersectionObserver -- Lazy Load Images on a Website
When it comes to websites performance is king. How long it takes for a page to load can mean the dif ...
- 沁园春·咏史
沁园春·咏史 文/天地尘埃2020 谁是谁非?宋桧连金,武穆饮生. 叹止渴饮鸩.灰飞烟灭:诵传千载:长跪无声. 懿旨朱批?直书秉笔?天地一根秤自衡. 何曾忘! 这英雄千古,犹恨空横! 幽幽何觅忠魂.耻 ...
- 自己写的php curl库实现整站克隆
有时候常常会用到一些在线手冊,比方国内或国外的.有些是訪问速度慢,有些是作者直接吧站点关闭了,有些是server总是宕机.所以还是全盘克隆到自己server比較爽.所 已这里给了一个demo < ...
- CodeForces 19D Points（离散化+线段树+单点更新）
题目链接: huangjing 题意:给了三种操作 1:add(x,y)将这个点增加二维坐标系 2:remove(x,y)将这个点从二维坐标系移除. 3:find(x,y)就是找到在(x,y)右上方的 ...