<!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. vue v-model 与 vuex state数据绑定问题

    最近开发的项目 需要用input 的v-model 直接绑定到vuex的store数据 因为v-model 能与data的数据绑定 尝试了半天 代码如下 <template> <di ...

  2. Windows下安装Redis并注册为服务

    1.安装 下载地址:https://github.com/MSOpenTech/redis/releases. Redis 支持 32 位和 64 位.这个需要根据你系统平台的实际情况选择,这里我们下 ...

  3. UVA 10910 Marks Distribution

    题意 把数字T分成N个数的和,保证这N个数中最小的数大于P.求方案数目 另f[i][j]表示把i分成j个数的和的方案数 f[i][j]=f[i][j-1]+f[i-1][j-1]+f[i-2][j-1 ...

  4. pymongo: MongoClient opened before fork错误排解

    使用pymongo配合flask和gunicorn使用的时候触发以下错误信息: [2017-09-19 15:20: ] [25780] [CRITICAL] WORKER TIMEOUT (pid: ...

  5. redis 单机模拟 cluster集群

    一.redis-cluster设计 Redis集群搭建的方式有多种,例如使用zookeeper等,但从redis 3.0之后版本支持redis-cluster集群,Redis-Cluster采用无中心 ...

  6. JavaScript Promise迷你书（中文版）--再学习

    上次粗翻了一下,感觉没吃透,这次深入体会一下. <script> function getURL(URL) { return new Promise(function(resolve, r ...

  7. sql 事物 锁 快照（转发的，写的非常好）

    隔离级别定义事务处理数据读取操作的隔离程度,在SQL Server中,隔离级别只会影响读操作申请的共享锁(Shared Lock),而不会影响写操作申请的互斥锁(Exclusive Lock),隔离级 ...

  8. J.U.C并发框架源码阅读（十七）ReentrantReadWriteLock

    基于版本jdk1.7.0_80 java.util.concurrent.locks.ReentrantReadWriteLock 代码如下 /* * ORACLE PROPRIETARY/CONFI ...

  9. 「kuangbin带你飞」专题十二 基础DP

    layout: post title: 「kuangbin带你飞」专题十二 基础DP author: "luowentaoaa" catalog: true tags: mathj ...

  10. 数学【P2524】 Uim的情人节礼物·其之弐 (康托展开)

    因为某人@ZAGER挖坑让我讲一下康托展开,所以发现了这个题,顺便说一下康托展开是个什么东西 题目概括 给定n与一个数列,要求求出给定数列在n的全排列中的排名(按照字典序从小到大排列) 康托展开 先放 ...