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来制作一个作业检查仪
先上图 前段时间, 花了点时间给女儿做了个数学习题的小程序 首页 做题界面(题目每次都随机生成, 加减乘除都有) 做题记录 现在问题来了, 怎么才能随时知道作业有没有完成呢? 每次打开做题记录页面刷新 ...
随机推荐
- 0316 【案例】MySQL count操作优化案例一则
转自http://blog.itpub.net/22664653/viewspace-1791124/ 一 背景 某业务的数据库定期报 thread_runing 飙高,通定位发现一个慢查询sql ...
- A - 敌兵布阵（HDU 1166）
A - 敌兵布阵 HDU - 1166 思路:线段树单点修改+区间查询. #include<cstdio> #include<cstring> #include<iost ...
- UVA The Tower of Babylon
The Tower of Babylon Perhaps you have heard of the legend of the Tower of Babylon. Nowadays many det ...
- Spring MVC-环境设置（转载实践）
以下内容翻译自:https://www.tutorialspoint.com/springmvc/springmvc_environment_setup.htm 说明:示例基于Spring MVC 4 ...
- Macserver服务更新经常使用的几个shell命令
Macserver须要先开启远程登录.开启方式:系统偏好设置->共享 勾选远程登录 经常使用命令有: 拷贝(把本机文件复制到远程server上) scp -r 本地路径/file userNam ...
- MySQL经常使用命令--show命令使用
log into the mysql for localhost mysql -u username -ppasswd(there is no space) for ip mysql -h ip -P ...
- UVa 10290 - {Sum+=i++} to Reach N
题目:给你一个数字问将他写成连续的数字的和的形式.有几种写法. 分析:数论. 设拆成的序列个数为k,我们分两种情况讨论: 1.拆成奇数个连续数.那么设中位数是a,则有n = k * a: 2.拆成偶数 ...
- HDU 3340 Rain in ACStar（线段树+几何）
HDU 3340 Rain in ACStar pid=3340" target="_blank" style="">题目链接 题意:给定几个多 ...
- Cookies操作类
实现代码: //声名一个数据集合 var listString = new List<string>() { "a", "b", "c&q ...
- Path Sum II 总结DFS
https://oj.leetcode.com/problems/path-sum-ii/ Given a binary tree and a sum, find all root-to-leaf p ...