<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. Java - 记录01_开发环境搭建

    时间:2017-07-04 记录:byzqy 一.什么是JDK JDK(Java Development Kit):Java开发工具集,即Java语言的软件开发工具包. SDK(Software De ...

  2. Cookie及通过Cookie常见应用

    会话的概念 会话可以简单理解为:用户打开一个浏览器,点击多个超链接,访问服务器多个web资源,然后关闭浏览器,整个过程称之为一个会话. 会话需要解决的问题 每个用户与服务器进行交互的过程中,各自会有一 ...

  3. dotnet C# 给结构体字段赋值非线程安全

    在 dotnet 运行时中,给引用对象进行赋值替换的时候,是线程安全的.给结构体对象赋值,如果此结构体是某个类的成员字段,那么此赋值不一定是线程安全的.是否线程安全,取决于结构体的大小,取决于此结构体 ...

  4. spring boot 系列之八:SpringBoot处理定时任务

    项目经常会用到定时任务,springboot自然是可以通过整合相关组件来实现的. 目前常用的定时任务的实现有两种: 通过spring 自带的定时器任务@Schedule来实现 通过Quartz来实现 ...

  5. mybaits源码分析--事务管理(八)

    一.事务管理 写到这也快进入收尾阶段了了,在介绍MyBatis中的事务管理时不可避免的要接触到DataSource的内容,所以接下来会分别来介绍DataSource和Transaction两块内容. ...

  6. Openswan支持的算法及参数信息:

    数据封装加密算法: algorithm ESP encrypt: id=2, name=ESP_DES, ivlen=8, keysizemin=64, keysizemax=64 algorithm ...

  7. CSS002. 字体穿透蒙层(用img设置字体的color)

    之前在逛Apple Store时看到了下面的UI: 交互图标非常圆滑上手也很舒服,虽然背景底色本就是白底,但是只依赖css能不能使  "+" 穿透背景看到底色 ? 大致思路如下: ...

  8. Linux学习笔记--快捷键

    桌面 ALT+空格 打开窗口菜单 ALT+F1 聚焦到桌面左侧任务导航栏,可按上下键导航 ALT+F2     运行命令 ALT+F4 关闭窗口 ALT+TAB 切换程序窗口 PRINT 桌面截图 S ...

  9. 【第二十篇】-Maven IntelliJ之Spring Cloud直播商城 b2b2c电子商务技术总结

    Maven IntelliJ IntelliJ IDEA 已经内建了对 Maven 的支持.我们在此例中使用的是 IntelliJ IDEA 社区版 11.1. IntelliJ IDEA 的一些特性 ...

  10. ByteArrayOutputStream小测试

    import java.io.*; import org.junit.Test; public class ByteArrayOutputStreamTest { @Test public void ...