登录
    如果您想得到任何关于IT方面的所有资料,联系bo主,即可免费获得。

超酷的小埋日历

趣知识 佛我没那你们佛 380次浏览 0个评论 扫描二维码

    小埋日历

这款日历非常的简单。而且放在网站中也是十分的美观,那么现在鸭哥开始分享这段源码

<!DOCTYPE html>
<html>
<head>
    <meta charset=”utf-8″>
    <title>全国正宗日历</title>
    <style type=”text/css”>
    body{background:url(http://cdn.duitang.com/uploads/item/201512/23/20151223213846_UtKws.gif);height:1000px;}
    #tab{width:500px;height:800px;border:1px solid #ccc;margin:0 auto; background:red; }
    #tab:hover{background:black;}

    #tab h1{color:white;margin-left:15px;}
    #tab h1:hover{color:red;}
    .calendar ul{width:460px;height:588px;background:#d6f0d6;}
    .calendar ul li{float:left;width:120px;height:110px;list-style:none;background:#666666;margin:10px;text-align:center;cursor:auto;font-weight:bold;}
    .calendar .active {background:white; color:red;  }
    .calendar .text { width: 478px; height:120px;padding: 0 10px 10px; border: 2px solid black; padding-top:10px; background: #f1f1f1; color: #555; margin-top:-15px;}
    .calendar .text h2 {font-size: 25px; margin-bottom: 10px; }
    .calendar .text p { font-size: 18px; line-height: 18px; }

            #fourdiv
            {
            width:100px;
            height:100px;
            background:red;
            position:relative;
            margin-right:200px;
            float:right;
            animation:myfirst 5s linear 2s infinite alternate;
            /* Firefox: */
            -moz-animation:myfirst 5s linear 2s infinite alternate;
            /* Safari and Chrome: */
            -webkit-animation:myfirst 5s linear 2s infinite alternate;
            /* Opera: */
            -o-animation:myfirst 5s linear 2s infinite alternate;
            }

            @keyframes myfirst
            {
            0%   {background:red; left:0px; top:0px;}
            25%  {background:yellow; left:200px; top:0px;}
            50%  {background:blue; left:200px; top:200px;}
            75%  {background:green; left:0px; top:200px;}
            100% {background:red; left:0px; top:0px;}
            }

            @-moz-keyframes myfirst /* Firefox */
            {
            0%   {background:red; left:0px; top:0px;}
            25%  {background:yellow; left:200px; top:0px;}
            50%  {background:blue; left:200px; top:200px;}
            75%  {background:green; left:0px; top:200px;}
            100% {background:red; left:0px; top:0px;}
            }

            @-webkit-keyframes myfirst /* Safari and Chrome */
            {
            0%   {background:red; left:0px; top:0px;}
            25%  {background:yellow; left:200px; top:0px;}
            50%  {background:blue; left:200px; top:200px;}
            75%  {background:green; left:0px; top:200px;}
            100% {background:red; left:0px; top:0px;}
            }

            @-o-keyframes myfirst /* Opera */
            {
            0%   {background:red; left:0px; top:0px;}
            25%  {background:yellow; left:200px; top:0px;}
            50%  {background:blue; left:200px; top:200px;}
            75%  {background:green; left:0px; top:200px;}
            100% {background:red; left:0px; top:0px;}
            }

    </style>
    <script type=”text/javascript”>
    var aDatas=[
    “快过年了,你忙的像头猪一样”,
    “过年啦,你还是头–彭彭《狮子王》 “,
    “猪”,
    “还是猪哟,别灰心,看看下个月吧”,
    “蠢猪”,
    “麦兜”,
    “豚豚”,
    “猪猪侠ggbo”,
    “猪八戒”,
    “十月份你是巨鼻猪《Hunter Hunter》哟”,
    “you,zhu”,
    “恭喜恭喜,本月你即将统一江山,你终于不是一头猪,你现在的名字叫猪猿蟑”
];
    window.onload=function ()
    {
        var oDiv=document.getElementById(‘tab’);
        var oUl=oDiv.getElementsByTagName(‘ul’)[0];
        var aBtn=oUl.getElementsByTagName(‘li’);
        var oTxt=oDiv.getElementsByTagName(‘div’)[0];
        var i=0;
        for(i=0;i<aBtn.length;i++){
        aBtn[i].index=i;
        aBtn[i].onmouseover=function(){
            for(i=0;i<aBtn.length;i++){
                aBtn[i].className=”;
            };
            this.className=’active’;
            oTxt.innerHTML='<h2>’+(this.index+1)+’月你是?</h2><p>’+aDatas[this.index]+'</p>’;
        };
            };
    }
    </script>
</head>
<body>
<div id=”tab” class=”calendar”>
    <h1>阿弥陀佛,心诚则灵,点击月份即可查看十二月份你的性格是什么动物,感谢您的支持</h1>
    <ul>
        <li class=”active”><h2>1</h2><p>JAN</p></li>
        <li><h2>2</h2><p>FER</p></li>
        <li><h2>3</h2><p>MAR</p></li>
        <li><h2>4</h2><p>APR</p></li>
        <li><h2>5</h2><p>MAY</p></li>
        <li><h2>6</h2><p>JUN</p></li>
        <li><h2>7</h2><p>JUL</p></li>
        <li><h2>8</h2><p>AUG</p></li>
        <li><h2>9</h2><p>SEP</p></li>
        <li><h2>10</h2><p>OCT</p></li>
        <li><h2>11</h2><p>NOV</p></li>
        <li><h2>12</h2><p>DEC</p></li>
    </ul>  
    <div class=”text”>
        <h2>1月你是?</h2>
        <p>快过年了,大家可以商量着去哪玩吧~</p>
    </div>
</div>
<div id=”fourdiv”>
</div>
</body>
</html>>

将上面的源码,全选复制粘贴,保存到后缀为html的文件,小埋日历就属于你拉,可以自行修改数组里文字,来改变下面显示的内容噢。

 


转载请注明文章来源于:成都seo----加上本文链接

万分感谢

如果你喜欢我们的文章不防关注我们的微信公众号ruichuangwangluo
喜欢 (0)分享 (0)
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
成都seo网站地图