<!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. ubuntu xampp

      1.下载:首先通过wget下载 xampp linux 1.7.3a版本,地址为http://sourceforge.net/projects/xampp/files/XAMPP%20Linux/ ...

  2. SD卡给MCU升级

    目 录1. 前言2. 初识BootLoader2.1 百度百科的BootLoader2.2 BootLoader的简单理解2.3 BootLoader的作用3. BootLoader预备知识3.1 复 ...

  3. PHP AES128加密解密

    <?php /** * Class AES */ class AES { public static function encrypt($input, $key) { $size = mcryp ...

  4. linux之expr命令

    expr命令可以实现数值运算.数值或字符串比较.字符串匹配.字符串提取.字符串长度计算等功能.它还具有几个特殊功能,判断变量或参数是否为整数.是否为空.是否为0等. 先看expr命令的info文档in ...

  5. 货车运输（LCA+最大生成树）

    神奇传送门 恩,这是一道神奇的LCA+难度的题目. 题目是这样的: A 国有n座城市,编号从1到n,城市之间有 m条双向道路.每一条道路对车辆都有重量限制,简称限重.现在有 q辆货车在运输货物,司机们 ...

  6. ANDROID开发笔记（二）

    动机: 开发的一个背单词的软件. 不会实现划屏的特性. 方法: 第一步尝试: 在MainActivity中, 增加以下代码后, 如果在视图的空白处点击时, 文本框中的时间就会发生改变. @Overri ...

  7. wget下载整个网站的方法

    转自: http://blog.itpub.net/29867/viewspace-716088/  (修改部分内容) wget --restrict-file-name=ascii -m -c -n ...

  8. android hook 框架 ADBI 如何实现so注入

    Android so注入-libinject2 简介.编译.运行 Android so注入-libinject2  如何实现so注入 Android so注入-Libinject 如何实现so注入 A ...

  9. Kubernetes-服务发布

    #发布服务有三种方式,第一种把端口映射到所有节点比较适合发布一些tcp/udp的服务对于应用层像http的会导致无法获取到原始客户端IP,第二种需要用到云服务才行,第三种是ingress http服务 ...

  10. Appium+python自动化1-环境搭建（上）【转载】

    前言 appium可以说是做app最火的一个自动化框架,它的主要优势是支持android和ios,另外脚本语言也是支持java和Python.小编擅长Python,所以接下来的教程是appium+py ...