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来制作一个作业检查仪
先上图 前段时间, 花了点时间给女儿做了个数学习题的小程序 首页 做题界面(题目每次都随机生成, 加减乘除都有) 做题记录 现在问题来了, 怎么才能随时知道作业有没有完成呢? 每次打开做题记录页面刷新 ...
随机推荐
- Problem 22
Problem 22 Using names.txt (https://projecteuler.net/problem=22)(right click and 'Save Link/Target A ...
- 从0到1发布一个Vue Collapse组件
需求背景 最近在项目中遇到了一个类似Collapse的交互需求,因此到github上找了一圈关于Vue Collapse的相关轮子,但是多少都有些问题.有的是实现问题,例如vue2-collapse, ...
- fzoj 2113数位dp
参考http://blog.csdn.net/xingyeyongheng/article/details/8785785 #include<stdio.h> #define ll lon ...
- SSL延迟
原文链接 据说,Netscape公司当年设计SSL协议的时候,有人提过,将互联网所有链接都变成HTTPs开头的加密链接. 这个建议没有得到采纳,原因之一是HTTPs链接比不加密的HTTP链接慢很多.( ...
- xtrabackup增量备份mysql +MHA
http://blog.csdn.net/yanggd1987/article/category/2214421 https://www.centos.bz/2013/09/innobackupex- ...
- 9517 Link Link Look
9517 Link Link Look 该题有题解 时间限制:2000MS 内存限制:65535K提交次数:67 通过次数:18 题型: 编程题 语言: G++;GCC Description ...
- Oracle 与 MySql 区别
一.并发性 并发性是oltp数据库最重要的特性,但并发涉及到资源的获取.共享与锁定. mysql:mysql以表级锁为主,对资源锁定的粒度很大,如果一个session对一个表加锁时间过长,会让其他se ...
- luogu1969 积木大赛
题目大意 搭建一座宽度为n的大厦,大厦可以看成由n块宽度为1的积木组成,第i块积木的最终高度需要是hi. 在搭建开始之前,没有任何积木(可以看成n块高度为 0 的积木).接下来每次操作,可以选择一段连 ...
- 国外物联网平台初探（三） ——IBM Watson IoT
平台定位 提供全面管理的云托管服务,旨在简化并从 IoT 设备中获得价值. Watson IoT Platform 提供对 IoT 设备和数据的强大应用程序访问,可快速编写分析应用程序.可视化仪表板和 ...
- php建立简单的用户留言系统
php建立简单的用户留言系统 样例 addMsg.php--添加留言页面 doAction.php--响应添加留言页面 . viewMsg.php--显示留言页面 目录结构 addMsg.php--添 ...