<style>
#dv1{
width:60px;
height:36px;
margin:0 auto;
background-color:orange;
display:none;
}
#dv2{
width:120px;
height:62px;
margin:0 auto;
background-color:orange;
display:none;
}
</style>
<body>
<input type="button" value="隐藏" id="btn" />
<input type="button" value="显示" id="btn1" />
<div id="dv1"></div>
<div id="dv2">生日快乐</div>
<script>
function my(id){
return document.getElementById(id);
}
my("btn").onclick=function(){
my("dv1").style.display="none";
my("dv2").style.display="none";
}
my("btn1").onclick=function(){
my("dv1").style.display="block";
my("dv2").style.display="block";
}
</script>
</body>

  以上是生日礼物网页Javascript版。

<style>
#dv1{
width:60px;
height:36px;
margin:0 auto;
background-color:orange;
}
#dv2{
width:120px;
height:62px;
margin:0 auto;
background-color:orange;
}
#main {
width:120px;
height:98px;
margin:0 auto;
overflow:hidden;
}
#box {
width:120px;
height:98px;
margin:0 auto;
}
</style> <body>
<div id="main">
<div id="box"></div>
<div id="dv1"></div>
<div id="dv2">生日快乐</div>
</div>
<p>
<a href="#box">隐藏</a>
<a href="#dv1">显示</a>
</p>
</body>

  以上是生日礼物网页锚点版。

效果都是暗隐藏隐藏生日蛋糕,按显示显示生日蛋糕。

生日礼物网页Javascript版本与锚点版本的更多相关文章

  1. JavaScript获取浏览器类型与版本

    从网上找到一段使用JavaScript判断浏览器以及浏览器版本的比较好的代码,在此记录一下: <script type="text/javascript"> var S ...

  2. JavaScript进阶(十一)JsJava2.0版本

    JavaScript进阶(十一)JsJava2.0版本 2007年9月11日,JsJava团队发布了JsJava2.0版本,该版本不仅增加了许多新的类库,而且参照J2SE1.4,大量使用了类的继承和实 ...

  3. JavaScript学习总结(十八)——JavaScript获取浏览器类型与版本

    从网上找到一段使用JavaScript判断浏览器以及浏览器版本的比较好的代码,在此记录一下: 1 <script type="text/javascript"> 2 v ...

  4. PHP有两个不同的版本:4.x系列版本和5.x系列版本

    在为用户提供动态内容方面,PHP和MySQL是一个强大的组合.这些年来,这两项产品已经跨越了它们最初的应用舞台,现在,一些世界上最繁忙的网站也在应用它们.虽然它们当初都是开源软件,只能在UNIX/Li ...

  5. web端自动化——Selenium3+python自动化(3.7版本)-火狐62版本环境搭建

    前言 目前selenium版本已经升级到3.0了,网上的大部分教程是基于2.0写的,所以在学习前先要弄清楚版本号,这点非常重要.本系列依然以selenium3为基础. 一.selenium简介 Sel ...

  6. 高版本->低版本迁移,低版本客户端连接高版本数据库EXP导出报错EXP-00008,ORA-01455,EXP-00000

    生产环境: 源数据库:RHEL + Oracle 11.2.0.3 目标数据库:HP-UX + Oracle 10.2.0.4   需求:迁移部分表  11.2.0.3-->10.2.0.4,若 ...

  7. 高版本api在低版本中的兼容

    直接上例子,看如何避免crash. eg:根据给出路径,获取此路径所在分区的总空间大小. 文档说明:获取文件系统用量情况,在API level 9及其以上的系统,可直接调用File对象的相关方法,以下 ...

  8. 怎样去除SVN中的某个版本之前的所有版本

    地狱门神 在某些时候,我们可能需要一个存放二进制文件的SVN库,用来保存每日构建的结果等.但是这种库会趋于越来越大,最后会占用很多磁盘空间.这时我们会想到能不能删掉某个版本之前的所有版本,以节省磁盘空 ...

  9. SQL Server 2000 sp2 及更低版本不受此版本的 Windows 支持

    SQL Server 2000 sp2 及更低版本不受此版本的 Windows 支持.在安装了 SQL Server 2000 之后请应用 sp3. 出现这种现象的原因在于:Windows Serve ...

随机推荐

  1. 使用栅格系统开发响应式页面——logo+nav实例

    小屏时: 中屏及以上时: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> ...

  2. Learning ROS: Packaging your ROS project as a snap

    Snaps are containerised software packages that are simple to create and install. They auto-update an ...

  3. Asp.NetCore ResposeCache 缓存的使用

    先小结一下: 缓存策略: [ResponseCache(CacheProfileName ="default30")] 直接使用缓存,30秒过期: [ResponseCache(D ...

  4. MySQL-表迁移工具的选型-xtrabackup的使用

    1.1. 场景 有的时候test人员可能需要在测试库上比较新的数据,这时候只能是从生产库上面去那了.如果是小表还好实用mysqldump/mysqlpump就可以轻松的解决.但是,如果遇到了大表这将是 ...

  5. Servlet学习笔记(三)之HttpServletRequest

    HttpServletRequest(HttpServletRequest 想比 ServletRequest 添加与协议相关 API)对象代表客户端的请求,当客户端通过HTTP协议访问服务器时,HT ...

  6. 洛谷P1314 聪明的质监员 题解

    题目 聪明的质监员 题解 这道题和之前Sabotage G的那道题类似,都是用二分答案求解(这道题还要简单一些,不需要用数学推导二分条件,只需简单判断一下即可). 同时为了降低复杂度,肯定不能用暴力求 ...

  7. Spring事务管理回滚问题

    Spring事务管理不能回滚问题 在前段时间学习SpringMVC的练习中,碰到声明式事务管理时,事务不能回滚的情况,通过查看博客和资料,解决了问题. 原因 导致Spring事务管理不能回滚的原因有两 ...

  8. kivy之ProgressBar、ToggleButton实操学习

    之所以将kivy的ProgressBar(进度条)与ToggleButton(切换按钮)作一篇内容来记录学习,是因为这两个内容比较简单,源码内容篇幅也少. 两个功能实例源码均以main.py+prog ...

  9. python3 spider [ urllib.request ]

    # # 导入urllib库的urlopen函数 # from urllib.request import urlopen # # 发出请求,获取html # html = urlopen(" ...

  10. 获取发布版SHA1和调试版SHA1

    总结 调试版: 常见问题 | 高德地图API (amap.com) 发布版: 首先需要生成签名 Android Studio生成签名文件,自动签名,以及获取SHA1和MD5值_donkor_的博客-C ...