<!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. freemarker 前端 判读 遍历 取值

    <#if content?length gt 100> ${content[0..100]}... <#else> ${content} </#if> freema ...

  2. linux资源限制函数getrlimit，setrlimit（转载）【转】

    转自:http://blog.csdn.net/stormkey/article/details/5890512 版权声明:本文为博主原创文章,未经博主允许不得转载. getrlimit,setrli ...

  3. UVALIVE 2431 Binary Stirling Numbers

    转自别人的博客.这里记录一下 这题是定义如下的一个数: S(0, 0) = 1; S(n, 0) = 0 for n > 0;S(0, m) = 0 for m > 0; S(n, m) ...

  4. 【转载】Java文件编码自动转换工具类

    本篇随笔主要介绍了一个用java语言写的将一个文件编码转换为另一个编码并不改变文件内容的工具类: 通过读取源文件内容,用URLEncoding重新编码解码的方式实现. 1 public class C ...

  5. python中函数和生成器的运行原理

    #!/usr/bin/env python # -*- coding:utf-8 -*- # author:love_cat # python的函数是如何工作的 # 比方说我们定义了两个函数 def ...

  6. Bash 文件夹操作

    mkdir, rm,find都是对tree结构的文件夹进行的操作,可以安装tree用tree命令直接打印出树的结构 文件夹的操作分为只操作当前文件夹的集合数据和迭代操作的tree数据 Bash迭代当前 ...

  7. windows下xampp安装PHP的pthreads多线程扩展

    我的运行环境: 系统:windows10 ,64位 PHP:5.6.8 TS,VC11 ,32位 Apache: 2.0 我安装的是xampp集成环境 pthreads的windows扩展文件下载地址 ...

  8. 计蒜客 28319.Interesting Integers-类似斐波那契数列-递推思维题 (Benelux Algorithm Programming Contest 2014 Final ACM-ICPC Asia Training League 暑假第一阶段第二场 I)

    I. Interesting Integers 传送门 应该是叫思维题吧,反正敲一下脑壳才知道自己哪里写错了.要敢于暴力. 这个题的题意就是给你一个数,让你逆推出递推的最开始的两个数(假设一开始的两个 ...

  9. iOS9 Storyboard unwind segue反回传递事件时机详细步骤

    当返回上一个界面且需要上一个界面做某事时,用unwind segue实现起来比delegate简单许多,甚至有时不适合用delegate来实现,那么我们就用unwind segue吧,而且像1-> ...

  10. Linux下查看某个进程的网络带宽占用情况

    说明: 1.可能查看某个进程的带宽占用需要明确知道PID.进程名字.发送速度.接收速度. 2.很遗憾,在Linux原生的软件中没有这样的一款,只能额外装,最符合以上的情况就只有nethogs. 3.n ...