<!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. firefox解决flash崩溃

    1.地址栏输入 about:config 2.查找dom.ipc.plugins.flash.subprocess.crashreporter.enabled 更改为false

  2. Spring----01. 入门知识，IoC/DI

    1.spring两个最基本概念:依赖注入DI.面向切面AOP 2.spring通过上下文Application Context装配bean,实现方式的区别是如何加载它们的配置信息, ClassPath ...

  3. Linuxmint：MySQL安装指南（转贴）

    这篇文章来自以下网站:http://wiki.ubuntu.com.cn/MySQL. 安装MySQL sudo apt-get install mysql-server 这个应该很简单了,而且我觉得 ...

  4. 水（NOIP模拟赛Round #10）

    题目描述: 小Z有一个长度为的数列.他有次令人窒息的操作,每次操作可以使某个数字或.他当然是希望这些数字的乘积尽量小了.为了简化题目,你只需输出操作完成后的数列即可. ———————————————— ...

  5. 开车旅行(NOIP2012)

    原题传送门 这道坑爹题调了我2小时233~ 首先这道题可以用set,平衡树,双向链表等一堆非(sang)常(xin)简(bing)单(kuang)的算法搞出对于任何一个高度h[i]的前2名和后2名 然 ...

  6. Linux用户态定时器用法以及犯错总结【转】

    转自:http://blog.csdn.net/csdn_logo/article/details/48525703 版权声明:本文为博主原创文章,欢迎转载,转载请注明出处,多谢合作. 采样的时候要用 ...

  7. python--io

    import io # io模块里面主要使用StringIo和BytesIo # StringIo f = io.StringIO() # 像使用open函数创建文件一样,生成一个句柄 # 可以直接向 ...

  8. jdbc连接警告不安全

    Mon Jun 11 10:46:26 CST 2018 WARN: Establishing SSL connection without server's identity verificatio ...

  9. VirtualBox安装部署的Ubuntu16.04的步骤

    1.下载ubuntu16.04镜像 http://cn.ubuntu.com/download/ 以及虚拟机软件VirtualBox https://www.virtualbox.org/wiki/D ...

  10. [BZOJ1032][JSOI2007]祖码Zuma 区间dp

    1032: [JSOI2007]祖码Zuma Time Limit: 10 Sec  Memory Limit: 162 MB Submit: 1105  Solved: 576 [Submit][S ...