<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>简易选项卡</title>

<style>

body,ul,li{margin:0;padding:0;}

body{font:12px/1.5 Tahoma;}

#outer{width:450px;margin:10px auto;}

#tab{overflow:hidden;zoom:1;background:#000;border:1px solid #000;}

#tab li{float:left;color:#fff;height:30px;cursor:pointer;line-height:30px;list-style-type:none;padding:0 20px;}

#tab li.current{color:#000;background:#ccc;}

#content{border:1px solid #000;border-top-width:0;}

#content ul{line-height:25px;display:none;margin:0 30px;padding:10px 0;}

</style>

<script>

window.onload = function ()

{

    var oLi = document.getElementById("tab").getElementsByTagName("li");

    var oUl = document.getElementById("content").getElementsByTagName("ul");

    for(var i = 0; i < oLi.length; i++)

    {

        oLi[i].index = i;

        oLi[i].onmouseover = function ()

        {

            for(var n = 0; n < oLi.length; n++) oLi[n].className="";

            this.className = "current";

            for(var n = 0; n < oUl.length; n++) oUl[n].style.display = "none";

            oUl[this.index].style.display = "block"

        }

    }

}

</script>

</head>

<body>

<div id="outer">

    <ul id="tab">

        <li class="current">第一课</li>

        <li>第二课</li>

        <li>第三课</li>

    </ul>

    <div id="content">

        <ul style="display:block;">

            <li>网页特效原理分析</li>

            <li>响应用户操作</li>

            <li>提示框效果</li>

            <li>事件驱动</li>

            <li>元素属性操作</li>

            <li>动手编写第一个JS特效</li>

            <li>引入函数</li>

            <li>网页换肤效果</li>

            <li>展开/收缩播放列表效果</li>

        </ul>

        <ul>

            <li>改变网页背景颜色</li>

            <li>函数传参</li>

            <li>高重用性函数的编写</li>

            <li>126邮箱全选效果</li>

            <li>循环及遍历操作</li>

            <li>调试器的简单使用</li>

            <li>典型循环的构成</li>

            <li>for循环配合if判断</li>

            <li>className的使用</li>

            <li>innerHTML的使用</li>

            <li>戛纳印象效果</li>

            <li>数组</li>

            <li>字符串连接</li>

        </ul>

        <ul>

            <li>JavaScript组成：ECMAScript、DOM、BOM，JavaScript兼容性来源</li>

            <li>JavaScript出现的位置、优缺点</li>

            <li>变量、类型、typeof、数据类型转换、变量作用域</li>

            <li>闭包：什么是闭包、简单应用、闭包缺点</li>

            <li>运算符：算术、赋值、关系、逻辑、其他运算符</li>

            <li>程序流程控制：判断、循环、跳出</li>

            <li>命名规范：命名规范及必要性、匈牙利命名法</li>

            <li>函数详解：函数构成、调用、事件、传参数、可变参、返回值</li>

            <li>定时器的使用：setInterval、setTimeout</li>

            <li>定时器应用：站长站导航效果</li>

            <li>定时器应用：自动播放的选项卡</li>

            <li>定时器应用：数码时钟</li>

            <li>程序调试方法</li>

        </ul>

    </div>

</div>

</body>

</html>

简易JS年历

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>简易JS年历</title>

<style>

body,ul,li,h2,p{margin:0;padding:0;}

body{font:12px/1.5 Tahoma;}

#calendar{width:248px;overflow:hidden;zoom:1;background:#eaeaea;margin:10px auto;padding:0 0 10px 10px;}

#calendar ul{overflow:hidden;zoom:1;}

#calendar li{color:#fff;float:left;width:40px;height:40px;cursor:pointer;font-size:14px;text-align:center;background:#424242;line-height:1.3;list-style-type:none;border:1px solid #424242;margin:10px 10px 0 0;padding:5px;}

#calendar li.current{color:#F69;background:#fff;}

#calendar li strong{display:block;font-size:18px;}

#msg{color:#666;background:#f1f1f1;border:1px solid #fff;margin:10px 10px 0 0;padding:5px;}

#msg h2{font-size:14px;}

</style>

<script>

window.onload = function ()

{

    var oLi = document.getElementById("calendar").getElementsByTagName("li");

    var oMsg = document.getElementById("msg");

    var oP = oMsg.getElementsByTagName("p")[0];

    var oStrong = oMsg.getElementsByTagName("strong")[0];

    var oArray = [

        "元旦：1月1日至3日放假三天。",

        "春节：2月2日至8日放假7天。",

        "妇女节：3月8日妇女节，与我无关。",

        "清明节：4月3日至5日放假3天",

        "劳动节：4月30日至5月2日放假3天。",

        "端午节：6月4日至6日放假3天。",

        "小暑：7月7日小暑。不放假。",

        "七夕节：8月6日七夕节。不放假。",

        "中秋节：9月10日至12日放假3天。",

        "国庆节：10月1日至7日放假7天。",

        "立冬：11月8日立冬。不放假。",

        "艾滋病日:12月1日<br />废除奴隶制国际日:12月2日。"

    ];

    for(var i = 0; i < oLi.length; i++)

    {

        oLi[i].index = i;

        oLi[i].onmouseover = function ()

        {

            for(var n = 0; n < oLi.length; n++) oLi[n].className = "";

            this.className = "current";

            oP.innerHTML = oArray[this.index];

            oStrong.innerHTML = this.index + 1;

        }

    }

}

</script>

</head>

<body>

<div id="calendar">

    <ul>

        <li><strong>1</strong>JAN</li>

        <li><strong>2</strong>FER</li>

        <li><strong>3</strong>MAR</li>

        <li><strong>4</strong>APR</li>

        <li><strong>5</strong>MAY</li>

        <li class="current"><strong>6</strong>JUN</li>

        <li><strong>7</strong>JUL</li>

        <li><strong>8</strong>AUG</li>

        <li><strong>9</strong>SEP</li>

        <li><strong>10</strong>OCT</li>

        <li><strong>11</strong>NOV</li>

        <li><strong>12</strong>DEC</li>

    </ul>

    <div id="msg">

        <h2>

            <strong>6</strong>

            月节日

        </h2>

        <p>端午节：6月4日至6日放假3天。</p>

    </div>

</div>

</body>

</html>

简易选项卡&&简易JS年历的更多相关文章

  1. javascript基础修炼(12)——手把手教你造一个简易的require.js

    目录 一. 概述 二. require.js 2.1 基本用法 2.2 细说API设计 三. 造轮子 3.1 模块加载执行的步骤 3.2 代码框架 3.3 关键函数的代码实现 示例代码托管在我的代码仓 ...

  2. DOM操作相关案例 模态对话框,简易留言板,js模拟选择器hover,tab选项卡,购物车案例

    1.模态框案例 需求: 打开网页时有一个普通的按钮,点击当前按钮显示一个背景图,中心并弹出一个弹出框,点击X的时候会关闭当前的模态框 代码如下: <!DOCTYPE html> <h ...

  3. 用JS制作简易选项卡

    p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 30.0px Consolas; color: #2b7ec3 } p.p2 { margin: 0.0px ...

  4. javascript的一个简易利率计算器+js图像显示 代码

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  5. jquery简易版xwPop.js弹出消息对话框插件

    xwPop.js弹出消息对话框插件是一款含有多种情景模式的原生模态消息对话框代码,可用于替代浏览器默认的alert弹出对话框,它提供各种参数和方法,功能非常强大.目前已经在项目中有应用到xwpop开发 ...

  6. 编译原理 #01# 简易词法分析器（js实现）

    // 实验存档 效果图: 代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"& ...

  7. 方向键控制圆球运动（简易）（js）

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. CSS笔记 - fgm练习 2-7 - 简易选项卡

    练习地址 http://www.fgm.cc/learn/lesson2/07.html <style> body,ul,li{margin:0;padding:0;} body{font ...

  9. jQuery实例—选项卡（js源码和jQuery）【一些常见方法（1）-练习】

    分别利用javascript的源码和jQuery来实现一个简单的选项卡,对比各自的步骤. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Tr ...

随机推荐

  1. VMware Fault Tolerance 概述及功能

    VMware Fault Tolerance - 为您的应用程序提供全天候可用性 通过为虚拟机启用 VMware Fault Tolerance,最大限度地延长数据中心的正常运行时间,减少停机管理成本 ...

  2. JSP中的：request.getScheme()+"://"+request.getServerName()+":"+request.getServer

    String path = request.getContextPath();  String basePath = request.getScheme()+"://"+reque ...

  3. eclipse 导出burpsuite插件包含第三方lib包

    第一步:右键项目点击export: 2.选择Runable JAR file: 点击Finish后会爆出一个错误(Jar export finished with problems. See deta ...

  4. VLC for iOS 2.3.0

    http://www.cocoachina.com/bbs/read.php?tid=231898 VLC for iOS 2.3.0       本帖属于CocoaChina会员发表,转帖请写明来源 ...

  5. spoj - Distinct Substrings（后缀数组）

    Distinct Substrings 题意 求一个字符串有多少个不同的子串. 分析 又一次体现了后缀数组的强大. 因为对于任意子串,一定是这个字符串的某个后缀的前缀. 我们直接去遍历排好序后的后缀字 ...

  6. Selenium IDE自动化录制脚本

  7. viewflipper的高度设置

    由于ViewFlipper的一个子view是这个ImageView,ViewFilpper在切换时,高度总是为子View中高度最大的值作为其高度值. 后经搜索,发现需要设置android:measur ...

  8. static静态变量-投票案例

    public class Voter { String name; //名字 private static int count; //投票数 public Voter() {} public Vote ...

  9. 集合框架（高级for的使用）

    高级for循环 格式: for(数据类型 变量名 :被遍历的集合(collection)或者数组){} 对集合进行遍历,只能获取元素,但是不能对元素进行过多的操作 迭代器除了遍历,还可以进行remov ...

  10. Bluetooth篇 开发实例之九 和蓝牙模块通信

    首先,我们要去连接蓝牙模块,那么,我们只要写客户端的程序就好了,蓝牙模块就相当于服务端. 连接就需要UUID. #蓝牙串口服务SerialPortServiceClass_UUID = ‘{00001 ...