JS 作业
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>作业</title>
<style type="text/css">
*{
margin: 0 auto;
padding: 0;
}
#tc{
width: 100px;
height: 30px;
} #taozi{
width:100px;
height: 70px;
border: 1px solid transparent;
text-align: center;
line-height: 70px;
}
#taozi1{
width: 150px;
height: 70px;
border: 1px solid transparent;
text-align: center;
line-height: 70px;
}
#xsys{
width: 150px;
height: 70px;
background-color: cornflowerblue;
color: white;
border-radius: 10px;
text-align: center;
line-height: 70px;
display: none;
}
.three{
width: 1000px;
height: 30px;
color: blue;
transition: 2s;
}
.four{
width: 700px;
height: 300px;
color: white;
background-color: red;
transition: 2s;
}
#waiceng{
width: 1350px;
background-color: lightblue;
overflow: hidden;
}
.neiceng{
width: 1000px;
height: 100px;
background-color: white;
margin-top: 30px;
box-shadow: 1px 5px gray;
border: 1px solid lightgray; }
#wangyehuanfu{
width: 300px;
height: 50px;
}
#yangshi1{
width: 76px;
height: 45px;
color: white;
background-color: blue;
text-align: center;
line-height: 45px;
float: left;
border-radius: 15px;
}
#yangshi2{
width: 76px;
height: 45px;
color: white;
background-color: blue;
text-align: center;
line-height: 45px;
float: left;
margin-left: 30px;
border-radius: 15px;
}
#topan{
border-radius: 15px;
width: 76px;
height: 45px;
color: white;
background-color: blue;
text-align: center;
line-height: 45px;
}
#bottoman{
border-radius: 15px;
width: 76px;
height: 45px;
color: white;
background-color: green;
text-align: center;
line-height: 45px;
display: none;
}
.anceng{
width: 800px;
height: 100px;
border-right: 5px solid darkcyan;
position: absolute;
margin: 0 0;
z-index: -1;
}
.mingceng{
width: 800px;
height: 100px;
position: absolute;
margin: 0 0;
z-index: 1;
}
.ganceng{
width: 1000px;
height: 100px;
position: absolute;
box-shadow: 0px 10px darkgray;
margin: 0 0;
z-index: -1;
}
</style>
</head>
<body>
<div id="waiceng"> <div class="neiceng">
1 说明事件
<div id="tc" onclick="tanchu()">
按钮
</div>
</div> <div class="neiceng">
2 鼠标移入下面显示按钮
<div id="taozi"onmousemove="xianshi()" onmouseout="xiaoshi()">
<div id="taozi1"><input type="button" value="   "/>鼠标经过显示按钮</div>
<div id="xsys" >
按钮
</div>
</div>
</div> <div class="neiceng" style="height:300px ;">
<div class="three" onmousemove="zg()" onmouseout="ka()">3 鼠标经过变窄变高，移出再恢复</div>
</div> <div class="neiceng">
<div class="mingceng" onmouseover="cxac()" >
4 鼠标经过就弹出层（函数、变量）
</div>
<div class="anceng" onmouseout="cxmc()">
4 鼠标经过就弹出层（函数、变量）
</div>
</div> <div class="neiceng">
<div class="mingceng" onclick="dtc1()">
5 鼠标点击就弹出层（函数、变量、判断）
</div>
<div class="ganceng" onclick="dtc2()" >
5 鼠标点击就弹出层（函数、变量、判断）
</div>
</div> <div class="neiceng">
6 网页换肤
<div id="wangyehuanfu">
<div id="yangshi1" onclick="ys1()">样式1</div>
<div id="yangshi2" onclick="ys2()">样式2</div>
</div>
</div> <div class="neiceng">
7 显示隐藏
<div id="topan" onclick="xsyc()">显示隐藏</div>
<div id="bottoman">显示隐藏</div>
</div>
</div>
</body>
</html> <script type="text/javascript">
window.onload=function(){ }
function tanchu(){
alert("弹出窗口");
}
function xianshi(){
document.getElementById("xsys").style.display = "block";
document.getElementById("taozi1").style.display="none";
}
function xiaoshi(){
document.getElementById("xsys").style.display = "none";
document.getElementById("taozi1").style.display="block";
}
function zg(){
var zg = document.getElementsByClassName("three");
zg[0].className = "four";
}
function ka(){
var ka = document.getElementsByClassName("four");
ka[0].className = "three";
}
function ys1(){
document.getElementById("waiceng").style.backgroundColor = "yellowgreen"
}
function ys2(){
document.getElementById("waiceng").style.backgroundColor = "grey"
}
function xsyc(){
if(document.getElementById("bottoman").style.display == "none"){
document.getElementById("bottoman").style.display = "block"
}else{
document.getElementById("bottoman").style.display = "none"
}
}
function cxac(){
document.getElementsByClassName("anceng")[0].style.zIndex = "10"
document.getElementsByClassName("mingceng")[0].style.zIndex = "-1"
}
function cxmc(){
document.getElementsByClassName("anceng")[0].style.zIndex = "-1"
document.getElementsByClassName("mingceng")[0].style.zIndex = "10"
}
function dtc1(){
document.getElementsByClassName("ganceng")[0].style.zIndex = "10"
document.getElementsByClassName("mingceng")[1].style.zIndex = "-1"
}
function dtc2(){
document.getElementsByClassName("ganceng")[0].style.zIndex = "-1"
document.getElementsByClassName("mingceng")[1].style.zIndex = "10"
}
</script>
JS 作业的更多相关文章
- js作业
1.一张纸的厚度是0.0001米,将纸对折,对折多少次厚度超过珠峰高度8848米var sum=0;i=0;a=0.0001;for(i=0;i<100;i++){ a=a*2; sum=sum ...
- Javascript作业—取字符串的第一个只出现一次的字母
js作业 取字符串第一个只出现一次的字母 <script type='text/javascript'> //取a-z字符串中第一个只出现一次的字母 function firstUniqu ...
- 用JavaScript输出表格
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...
- Python之路【第十二篇续】jQuery案例详解
jQuery 1.jQuery和JS和HTML的关系 首先了HTML是实际展示在用户面前的用户可以直接体验到的,JS是操作HTML的他能改变HTML实际展示给用户的效果! 首先了解JS是一门语言,他是 ...
- javaScript额外笔记
--------------------------------------------------------Part 1javascript:脚本语言辅助开发:网页的前台开发三大块:1.HTML ...
- CSS基础问题
1.css引入问题 本来以为css引入是很简单的问题,但是在写demo中,使用连接方式引入就出现了问题,找了半天,还是说一下问题吧. 在引入时没有写rel="stylesheet" ...
- 分享：计算机图形学期末作业！！利用WebGL的第三方库three.js写一个简单的网页版“我的世界小游戏”
这几天一直在忙着期末考试,所以一直没有更新我的博客,今天刚把我的期末作业完成了,心情澎湃,所以晚上不管怎么样,我也要写一篇博客纪念一下我上课都没有听,还是通过强大的度娘完成了我的作业的经历.(当然作业 ...
- kettle作业中的js如何写日志文件
在kettle作业中JavaScript脚本有时候也扮演非常重要的角色,此时我们希望有一些日志记录.下面是job中JavaScript记录日志的方式. job的js写日志的方法. 得到日志输出实例 o ...
- 树莓派.使用Node.js来制作一个作业检查仪
先上图 前段时间, 花了点时间给女儿做了个数学习题的小程序 首页 做题界面(题目每次都随机生成, 加减乘除都有) 做题记录 现在问题来了, 怎么才能随时知道作业有没有完成呢? 每次打开做题记录页面刷新 ...
随机推荐
- python项目开发：学员管理系统
学员管理系统 #需求: 1.用户角色:讲师/学员,登陆后根据角色不同能做的事情不同 2.讲师视图 - 管理班级,可创建班级,根据学员qq号把学员加入班级 - 可创建指定班级的上课纪录,注意一节上课纪录 ...
- python3实现UDP协议的简单服务器和客户端
利用python中的socket模块中的来实现UDP协议,这里写一个简单的服务器和客户端.为了说明网络编程中UDP的应用,这里就不写图形化了,在两台电脑上分别打开UDP的客户端和服务端就可以了. UD ...
- android debug签名文件
现象 可以运行程序,但不能启动安装成功的软件 并且run application的时候也不弹出界面. 路径: C:\Users\sunfb\.android 下替换debug.keystore 就OK
- orcale单行函数之字符函数
- HDUOJ--4888--Redraw Beautiful Drawings【isap】网络流+判环
链接:http://acm.hdu.edu.cn/showproblem.php? pid=4888 题意:一个矩阵.限定每行行和.列和,每一个格子数字不超过k,问矩阵是否存在,如存在推断有单解还是多 ...
- 剖析Mysql的InnoDB索引
摘要: 本篇介绍下Mysql的InnoDB索引相关知识,从各种树到索引原理到存储的细节. InnoDB是Mysql的默认存储引擎(Mysql5.5.5之前是MyISAM,文档).本着高效学习的目的,本 ...
- Spring+EhCache缓存实例（具体解说+源代码下载）
一.ehcahe的介绍 EhCache 是一个纯Java的进程内缓存框架,具有高速.精干等特点,是Hibernate中默认的CacheProvider.Ehcache是一种广泛使用的开源Java分布式 ...
- C# 尝试读取或写入受保护的内存 。这通常指示其他内存已损坏。
在C#中调用别人的DLL的时候有时候出现 尝试读取或写入受保护的内存 .这通常指示其他内存已损坏. 在传值的时候还是用指针,再在C#中做转换就好了. 解决办法: [DllImport("AP ...
- base64对文件进行加密
将原文件读取为字节数组,然后用base64加密,得到加密的字符串 https://stackoverflow.com/questions/475421/base64-encode-a-pdf-in-c ...
- 前端总结·基础篇·CSS
前端总结·基础篇·CSS 1 常用重置+重置插件(Normalize.css,IE8+) * {box-sizing:border-box;} /* IE8+ */body {margin:0;} ...