<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>js热身运动课后练习</title>
<style>
<style>
body{margin:0 ;background-color:#efefef;}
a{text-decoration:none;font-size:12px;}
strong{font-size:24px;font-weight:bold;}
.show{width:100px;height:40px;background:red;color:#FFF;font-weight:bold;display:inline-block;line-height:40px;text-align:center;}
.top{margin:20px 0 0 25px;}
#box{width:100px;height:100px;border:4px solid #393129;margin:20px 0 0 25px;background:#fff}
#wrap{position:absolute;top:0;left:0; width:100%; height:100%; background:#000; opacity:0.5;filter:alpha(opacity=50);display:none;}
#box1{width:300px; height:200px; background:#fff; border:20px solid #9c949c; position:absolute;top:50%;left:50%; margin-top:-120px; margin-left:-170px;text-align:center;display:none;}
p{display:inline-block;font-size:12px;}
.list a{width:34px;height:30px;border:1px solid #c0c0c0;background:#efefef;line-height:30px;text-align:center;display:inline-block;margin-left:5px;font-weight:bold;color:#848c8c}
.btn input{width:60px;height:30px;border:none;background:#002952;color:#fff;font-weight:bold;line-height:30px;text-align:center;}
.btn{text-align:center;}
.btn,#list1{margin-top:16px;}
.list .red{border:none;background:#9cce00;color:#fff;}
.list .yellow{border:none;background:#efbd00;color:#fff;}
.list .blue{border:none;background:#5a94ef;color:#fff;}
</style>
<script>
window.onload = function (){
var obox = document.getElementById('box');
var obox1 = document.getElementById('box1')
var owrap = document.getElementById('wrap')
var oshow = document.getElementById('show')
var ored = document.getElementById('red')
var oyellow = document.getElementById('yellow')
var oblue = document.getElementById('blue')
var owidth1 = document.getElementById('width1')
var owidth2 = document.getElementById('width2')
var owidth3 = document.getElementById('width3')
var oheight1 = document.getElementById('height1')
var oheight2 = document.getElementById('height2')
var oheight3 = document.getElementById('height3')
var obtn1 = document.getElementById('btn1')
var obtn2 = document.getElementById('btn2')
oshow.onclick = function (){
owrap.style.display = 'block';
obox1.style.display = 'block';
}
ored.onmouseover = function (){
ored.style.background = 'red';
}
oyellow.onmouseover = function(){
oyellow.style.background = 'yellow';
}
oblue.onmouseover = function(){
oblue.style.background = 'blue';
}
ored.onmouseout = function(){
ored.style.background = '#9cce00';
}
oyellow.onmouseout = function(){
oyellow.style.background = '#efbd00';
}
oblue.onmouseout = function(){
oblue.style.background = '#5a94ef';
}
ored.onclick = function (){
obox.style.background = 'red';
}
oyellow.onclick = function (){
obox.style.background = 'yellow';
}
oblue.onclick = function (){
obox.style.background = 'blue';
}
owidth1.onmouseover = function (){
owidth1.style.background = '#ef9400';
}
owidth2.onmouseover = function(){
owidth2.style.background = '#ef9400';
}
owidth3.onmouseover = function(){
owidth3.style.background = '#ef9400';
}
owidth1.onmouseout = function(){
owidth1.style.background = '#efefef';
}
owidth2.onmouseout = function(){
owidth2.style.background = '#efefef';
}
owidth3.onmouseout = function(){
owidth3.style.background = '#efefef';
}
owidth1.onclick = function (){
obox.style.width = '200px';
}
owidth2.onclick = function (){
obox.style.width = '300px';
}
owidth3.onclick = function (){
obox.style.width = '400px';
}
oheight1.onmouseover = function (){
oheight1.style.background = '#ef9400';
}
oheight2.onmouseover = function(){
oheight2.style.background = '#ef9400';
}
oheight3.onmouseover = function(){
oheight3.style.background = '#ef9400';
}
oheight1.onmouseout = function(){
oheight1.style.background = '#efefef';
}
oheight2.onmouseout = function(){
oheight2.style.background = '#efefef';
}
oheight3.onmouseout = function(){
oheight3.style.background = '#efefef';
}
oheight1.onclick = function (){
obox.style.height = '200px';
}
oheight2.onclick = function (){
obox.style.height = '300px';
}
oheight3.onclick = function (){
obox.style.height = '400px';
}
obtn1.onclick = function(){
obox.style.background = '#fff';
obox.style.height = '100px';
obox.style.width = '100px';
}
obtn2.onclick = function(){
owrap.style.display = 'none';
obox1.style.display = 'none';
}
}
</script>
</head>
<body>
<div class="top">
<strong>请为下面标签设置样式:</strong>
<a id="show" class="show" href="#">点击设置</a>
</div>
<div id="box"></div>
<div id="wrap"></div>
<div id="box1">
<div id="list1"class="list">
<p>请选择背景颜色 :</p>
<a id="red" class="red" href="#">红</a>
<a id="yellow" class="yellow" href="#">黄</a>
<a id="blue" class="blue" href="#">蓝</a>
</div>
<div class="list">
<p>请选择宽（px）:</p>
<a id="width1" href="#">200</a>
<a id="width2" href="#">300</a>
<a id="width3" href="#">400</a>
</div>
<div class="list">
<p>请选择高（px）:</p>
<a id="height1" href="#">200</a>
<a id="height2" href="#">300</a>
<a id="height3" href="#">400</a>
</div>
<div class="btn">
<input id="btn1" type="button" value="恢复"/>
<input id="btn2" type="button" value="确定"/>
</div>
</div>

</body>
</html>

实现的效果图：

转载于:https://www.cnblogs.com/Candicecl/p/6743668.html

javascript热身运动-了解最基本的知识相关推荐

  1. Android逆向进阶——让你自由自在脱壳的热身运动(dex篇)

    本文作者:HAI_ 0×00 前言 来看看我们今天的主题. 让你自由自在脱壳的热身运动. 现在很多第厂家都是使用第三方的加固方式来进行加固的.或者使用自己的加固方式进行加固. 那么我们必不可少的就是脱 ...

  2. 健身前需要做热身运动吗？有哪些准备？

    对于不少健身的朋友来说,长期的锻炼下来,身体难免会有一些小损伤.为了减低受伤的几率,通常而言,除了要学习相关的机械操作知识外,在运动前还需要做好相关的热身运动. 有一些刚入门的健身小白就有些疑惑,健身 ...

  3. (转)javascript关于运动的各种问题经典总结

    本文实例总结了javascript关于运动的各种问题.分享给大家供大家参考.具体如下: 一.JS运动的各种问题 问题一: 错误代码: ? 1 2 3 4 5 6 7 8 9 10 11 functio ...

  4. 运动搜索（运动估计）知识

    转载自:雷霄骅 https://blog.csdn.net/leixiaohua1020/article/details/45936267 运动搜索可以分成两种基本类型: 运动搜索(运动估计)知识 ( ...

  5. Norlit OS —— 自制操作系统 第0章 热身运动

    0  热身运动 0.1         前言 开发操作系统是很多程序员的终极梦想,但是很多人认为这是不可能的,其实,只要有爱,什么事都能办到(但超能力这种事情的话估计只有学园都市[1]了吧). 操作系 ...

  6. 游泳前要做哪些热身运动？

    [导读]游泳是锻炼全身肌肉的最好途径之一,它同时有助于降低胆固醇水平和减脂,还能舒缓关节,使你保持低受伤率.最新科学表明,游泳可能还是防止衰老和抵御早期死亡的一种好方法.大家都喜欢游泳,但是由于游泳造 ...

  7. 【javascript】运动与游戏开发

    [javascript]运动与游戏开发 一.学习运动框架作用 二.运动原理 三.定时器 3.1. **倒计定时器:timer=setTimeout(函数名,delaytime);** 3.2. **循 ...

  8. JavaScript的热身运动

    <html>     <head>         <script>             //生成文本             document.write(' ...

  9. JavaScript对象、原型、原型链知识总结思维导图

    这个思维导图是我对Object,原型,原型链等知识的总结,主要参考高程一书第六章,写完才发现这么多,以后可能会进行精简.内容可能会出现差错,欢迎批评指正.下载==>Github ECMAScri ...

最新文章

  1. linux mysql运维_Linux运维常用的 MySQL基础命令
  2. 批处理——服务器的web文件备份
  3. 树形结构：迭代方式遍历树，宽度优先，先序遍历,中序遍历，后序遍历
  4. NSMutableArray的一些知识
  5. python数据预测代码_手把手教你用Python玩转时序数据，从采样、预测到聚类丨代码...
  6. 【洛谷T37388】P哥破解密码
  7. 设计模式20_观察者
  8. 凸优化第二章凸集 2.5 分离与支撑超平面
  9. 微服务系统和分布式系统的区别
  10. Video Matting：AI视频抠图
  11. html页面分页显示问题,HTML分页，显示分页页面内容
  12. 电脑蓝屏c语言代码大全,电脑蓝屏代码C0000218怎么解决方法
  13. 面试 11、知识拓展
  14. python 重定向 网址错_Python URL重定向问题
  15. 嵌入式开发板设置IP
  16. 22.1.11京东大数据实习面试
  17. 数据结构实验二——队列（银行叫号系统）
  18. eclipse的简介
  19. Fortran编译初步
  20. 2022年无形资产估值工具和方法研究报告

热门文章

  1. 15_python基础—文件操作
  2. 微软高性能计算服务器pdf,微软高性能计算HPCserver2008技术概览.pdf
  3. 鸿蒙报名什么时候推送,鸿蒙系统手机版什么时候推送？鸿蒙系统手机版推送时间详解...
  4. linux查看db2存储过程,DB2查看存储过程里SQL语句的执行情况
  5. sapi cli php mac,make: *** [sapi/cli/php] Error 1 解决办法
  6. Vue中子组件如何向父组件传递数据？
  7. 安卓案例：View动画 - 弹球碰壁
  8. Java实训项目7：GUI学生信息管理系统 - 实现步骤 - 创建实体类
  9. 使用Linux版Redis
  10. 【NOI2016】网格，离散化+求割点