一.写出当前年份的前后5年的日期表

<!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 type="text/css">

    </style>

</head>

<body>

    <select id="nian" onclick="dianji()"></select>年

    <select id="yue" onclick="dianji()"></select>月

    <select id="tian"></select>日

</body>

    <script type="text/javascript">

        nian();

        yue();

        tian();

        function nian()

        {

            var b = new Date();

            var nian=parseInt(b.getFullYear());

            var str="";

            for(i=nian-5;i<nian+6;i++)

            {

                str=str+"<option value='"+i+"'>"+i+"</option>";

                document.getElementById("nian").innerHTML=str;

            }

        }

        function yue()

        {

            var str="";

            for(i=1;i<13;i++)

            {

                str=str+"<option value='"+i+"'>"+i+"</option>";

                document.getElementById("yue").innerHTML=str;

            }

        }

        function tian()

        {

            var yue=document.getElementById("yue").value;

            var nian=document.getElementById("nian").value;

            var ts=31;

            if(yue==4 || yue==6 || yue==9 || yue==11)

            {

                ts=30;

            }    

            if(yue==2)

            {

                if((nian%4==0 && nian%100!=0) || nian%400==0)

                {

                    ts=29;

                }

                else

                {

                    ts=28;

                }

            }

                var str="";

                for(i=1;i<ts+1;i++)

                {

                    str=str+"<option value='"+i+"'>"+i+"</option>";

                    document.getElementById("tian").innerHTML=str;

                }

        }

            function dianji()

            {

                tian();

            }

    </script>

</html>

二.大图轮播

<!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 type="text/css">

*{ margin:0px auto; padding:0px}

#wai{ width:250px; height:20px; position:relative; top:-30px;}

    .img{ width:100%; height:300px; display:none}

    .yuan{ width:20px; height:20px; background-color:#F00; border:2px solid #FFF; border-radius:100px; float:left; margin-left:30px; cursor:pointer}

</style>

</head>

<body>

    <br /><br />

    <img class="img" src="卓最闪的衫扮十分感慨有人拍照要记得插袋/pic/壁纸/fcfaaf51f3deb48fbcf9f4aef21f3a292df57829.jpg" style="display:block" />

     <img class="img" src="卓最闪的衫扮十分感慨有人拍照要记得插袋/pic/壁纸/。，ll.jpg" />

      <img class="img" src="卓最闪的衫扮十分感慨有人拍照要记得插袋/pic/壁纸/2cf5e0fe9925bc319ab5e0385edf8db1ca1370a2.jpg" />

       <img class="img" src="卓最闪的衫扮十分感慨有人拍照要记得插袋/pic/壁纸/4-14101G43447.jpg" />

<div id="wai">

    <div class="yuan" onclick="dian('0')" ></div>

    <div class="yuan" onclick="dian('1')" ></div>

    <div class="yuan" onclick="dian('2')" ></div>

    <div class="yuan" onclick="dian('3')" ></div>

</div>

</body>

<script type="text/javascript">

<!--定义索引默认为0-->

    var sy=0;

    <!--调方法-->

    window.setInterval("huan()",4000);

    function huan()

    {

        <!--大图自动轮播-->

        var img=document.getElementsByClassName("img");

        sy++;

        if(sy>=img.length)

        {

            sy=0;

        }

        for(i=0;i<img.length;i++)

        {

            img[i].style.display="none";

        }

            img[sy].style.display="block";

        <!--大图轮播的同时小点跟着换样式-->

        var yuan=document.getElementsByClassName("yuan");

        for(j=0;j<yuan.length;j++)

        {

            yuan[j].style.backgroundColor="red";

        }

            yuan[sy].style.backgroundColor="black";

    }

    function dian(s)

    {

        <!--让当前的索引sy变成你所点击的索引s。这样下一张图片就会挨着显示-->

        sy=s;

        <!--点击小点对应的图片显示-->

        var img=document.getElementsByClassName("img");

        for(i=0;i<img.length;i++)

        {

            img[i].style.display="none";

        }

            img[s].style.display="block";

        <!--点击小点，小点也对应的跟着换样式-->

        var yuan=document.getElementsByClassName("yuan");

        for(j=0;j<yuan.length;j++)

        {

            yuan[j].style.backgroundColor="red";

        }

            yuan[s].style.backgroundColor="black";

    }

</script>

</html>

JS初学者必备的几个经典案例（二）！！！的更多相关文章

  1. JS初学者必备的几个经典案例（一）！！！

    一:选中复选框按钮可用    和     倒计时10秒后按钮可用 这是倒计时10秒后按钮可用 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 ...

  2. (zhuan) 资源|TensorFlow初学者必须了解的55个经典案例

    资源|TensorFlow初学者必须了解的55个经典案例 2017-05-27 全球人工智能 >>>>>>欢迎投稿:news@top25.cn<<< ...

  3. js中的经典案例--简易万年历

    js中的经典案例--简易万年历 html代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8& ...

  4. javascript的理解及经典案例

    js的简介: JavaScript是一种能让你的网页更加生动活泼的程式语言,也是目前网页中设计中最容易学又最方便的语言. 你可以利用JavaScript轻易的做出亲切的欢迎讯息.漂亮的数字钟.有广告效 ...

  5. jQuery基础的工厂函数以及定时器的经典案例

    1. jQuery的基本信息:  1.1 定义: jQuery是JavaScript的程序库之一,它是JavaScript对象和实用函数的封装, 1.2 作用: 许多使用JavaScript能实现的交 ...

  6. Linux运维之道（大量经典案例、问题分析，运维案头书，红帽推荐）

    Linux运维之道(大量经典案例.问题分析,运维案头书,红帽推荐) 丁明一 编   ISBN 978-7-121-21877-4 2014年1月出版 定价:69.00元 448页 16开 编辑推荐 1 ...

  7. HTML5 CSS3 经典案例：无插件拖拽上传图片 （支持预览与批量） （二）

    转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/31513065 上一篇已经实现了这个项目的整体的HTML和CSS: HTML5 C ...

  8. python经典案例

    前言:初学者对python的流程语句有一定的了解,但是运用起来总会磕磕碰碰.本文总结了一些初学者在学习python时做的经典案例 一.名片管理系统(限单个名片) info = {'name':'jam ...

  9. 汇总java生态圈常用技术框架、开源中间件，系统架构及经典案例等

    转自:http://www.51testing.com/html/83/n-3718883.html 有人认为编程是一门技术活,要有一定的天赋,非天资聪慧者不能及也.非也,这是近几年,对于技术这碗饭有 ...

随机推荐

  1. node.js简单的页面输出

    在node.js基本上没有兼容问题(如果你不是从早期的node.js玩起来),而且原生对象又加了这么多扩展,再加上node.js自带的库,每个模块都提供了花样繁多的API,如果还嫌不够,github上 ...

  2. poj 1459 多源多汇点最大流

    Sample Input 2 1 1 2 (0,1)20 (1,0)10 (0)15 (1)20 7 2 3 13 (0,0)1 (0,1)2 (0,2)5 (1,0)1 (1,2)8 (2,3)1 ...

  3. oracle怎么卸载(转)

    Oracle Database,又名Oracle RDBMS,或简称Oracle.是甲骨文公司的一款关系数据库管理系统.到目前仍在数据库市场上占有主要份额.劳伦斯·埃里森和他的朋友,之前的同事 Bob ...

  4. hadoop系列讨论

    生产环境下cloudera的cdh版本更受欢迎,但是貌似cloudera对于YARN的开发力度不是很突出,所以在apache与cdh版本选择的时候,大家是怎么考虑的? 主要关注生产环境下的运维成本,期 ...

  5. Xamarin开发Anroid应用介绍

    第1章  Xamarin开发Anroid应用介绍 如今智能手机已经盛行了好几年,而针对这些智能手机的软件开发也变得异常火热.但是在Android平台下只能使用Java开发,iOS平台下也只能使用Obj ...

  6. IE6/IE7中display:inline-block解决办法

    IE6/IE7下对display:inline-block的支持性不好. 1.inline元素的display属性设置为inline-block时,所有的浏览器都支持: 2.block元素的displ ...

  7. easyui提交表单数据的时候如何防止二次提交

    在前端提交数据的时候有时候可能会由于网络延迟等原因,我们在等待的时候会多次点击保存按钮,这可能会导致我们一次输入的数据多次提交,导致数据重复.最近在做项目的时候碰到了这个问题,先说一点,这个问题的解决 ...

  8. 简单几何(圆与多边形公共面积) UVALive 7072 Signal Interference (14广州D)

    题目传送门 题意:一个多边形,A点和B点,满足PB <= k * PA的P的范围与多边形的公共面积. 分析:这是个阿波罗尼斯圆.既然是圆,那么设圆的一般方程:(x + D/2) ^ 2 + (y ...

  9. 【python游戏编程之旅】第四篇---pygame中加载位图与常用的数学函数。

    本系列博客介绍以python+pygame库进行小游戏的开发.有写的不对之处还望各位海涵. 在上一篇博客中,我们学习了pygame事件与设备轮询.http://www.cnblogs.com/msxh ...

  10. fork和execve

    fork函数在新的子进程中运行相同的程序,新的子进程是父进程的一个复制品. execve函数在当前进程的上下文中加载并运行一个新的程序.它会覆盖当前进程的地址空间,但并没有创建一个新的进程.新的程序仍 ...