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来制作一个作业检查仪
先上图 前段时间, 花了点时间给女儿做了个数学习题的小程序 首页 做题界面(题目每次都随机生成, 加减乘除都有) 做题记录 现在问题来了, 怎么才能随时知道作业有没有完成呢? 每次打开做题记录页面刷新 ...
随机推荐
- WPF通过鼠标滑轮缩放显示图片
如果你使用WinForm比较难实现通过滚动鼠标滑轮来对图片进行缩放显示,那么,你应该考虑一下使用WPF,既然是下一代Windows客户端开发平台,明显是有一定优势的,不然,MS是吃饱了撑着. 首先 ...
- Java基本排序算法
转载来自:https://www.jianshu.com/p/5e171281a387 一遍记住Java常用的八种排序算法与代码实现 1.直接插入排序 经常碰到这样一类排序问题:把新的数据插入到已 ...
- Spring Cloud Stream(十三)
说明 对Spring Boot 和 Spring Integration的整合,通过Spring Cloud Stream能够简化消息中间件使用的复杂难度!让业务人员更多的精力能够花在业务层面 简单例 ...
- qsort快速排序
C库函数qsort七种使用方法示例 七种qsort排序方法<本文中排序都是采用的从小到大排序> 一.对int类型数组排序C++ / C 代码 int num[100]; Sample: i ...
- TortoiseGit生成PuttyKey与GitHub的SSH进行关联
1.打开Puttygen 要到进度条满格为止,知道出现如下界面: 把上面的Key复制. 最后点击[Save private key]保存. 2.登录GitHub进行如下操作: Settings-> ...
- Ruby对象、变量和常量
Ruby操作的数据主要有部分:对象.类.变量.常量. 对象 在Ruby中表示数据的基本单位称为对象,在Ruby中一切都是对象. 经常使用对象: 数值对象 2.3.14.-5等表示数字的对象,另外还有矩 ...
- 自己定义控件三部曲之动画篇(七)——ObjectAnimator基本使用
前言: 假如生活欺骗了你, 不要悲伤,不要心急! 忧郁的日子里须要镇静: 相信吧,快乐的日子终将会来临! 心儿永远向往着未来: 如今却常是忧郁. 一切都是瞬息,一切都将会过去: 而那过去了的,就会成为 ...
- PHP获取数组长度的方法 函数参数的比较
在php中获取数组长度方法很简单,php为我们提供了两个函数可以计算一维数组长度,如count,sizeof都可以直接统计数组长度哦,下面我们来看几个实例吧.php如何获取数组的长度,使用php函数c ...
- nyoj--635--Oh, my goddess（dfs）
Oh, my goddess 时间限制:3000 ms | 内存限制:65535 KB 难度:3 描述 Shining Knight is the embodiment of justice an ...
- Xposed那些事儿 — xposed框架的检测和反制
之前看到有人发了关于使用xposed屏蔽抖音检测xposed的思路(https://www.52pojie.cn/thread-684757-1-1.html),贴出了部分伪代码,但觉抖音写的蛮有意思 ...