日期与内容显示JS小程序

Posted on 2013-07-15 16:51  !sylar  阅读(410)  评论(0)    收藏  举报
<!DOCTYPE html>
<html lang="zh">
    <head>
<meta http-equiv="Content-Type" content="text/html; charset="gb2312"/>
        <meta charset="gb2312"/>
        <title>爱你的每一天</title>
        <meta name="viewport" content="width=device-width" />
     <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
 <script src="http://code.jquery.com/jquery-migrate-1.1.0.js"></script>
    <body>
        
<script type="text/javascript" charset="gb2312">
    window.onload = function ()
    {
        var ali = $('#xq li');
        var arr = ["如果上帝问我最想对你说什么?我会说:“我爱你”,如果非要在这份爱上加上一个期限,我希望是…… 一万年!", "你是我的心你是我的肝,你是我心里的葡萄干。你是我的肠你是我的胃,你是我心里的红玫瑰。.", "当我凝视到你的眼,当我听到你的声音,当我闻到你秀发上的淡淡清香,当我感受到我剧烈的心跳,我明白了:你是我今生的唯一!", "世界上只有“孟媛媛”这个名字,使我这样牵肠挂肚,像有一根看不见的线,一头牢牢系在我心尖上,一头攥在你手中。", "每一天都为你心跳,每一刻都被你感动,每一秒都为你担心。有你的感觉真好。", "我什么都可以放弃,但不能没有你。我要照顾你一生一世,把世上最好的东西给你,我要你成为最幸福的人。", "你知道么。当你说爱我的时候。我就觉得我拥有了全世界。我确定一定以及肯定我是爱你的。"];
        var arry = ["妞妞", "老婆", "亲爱的", "媛媛", "达令", "宝贝", "乖乖"]
        var i = 0;
        for (i = 0; i < ali.length; i++) {
            ali[i].index = i;
            ali[i].onmousemove = function () {
                for (i = 0; i < ali.length; i++) {
                    ali[i].className = "";
            
                };
            
                this.className = "active";
                $("#content").html("<h3>"+(arry[this.index])+"!今天是星期"+(this.index+1)+"<h3>"+"<p>" +(arr[this.index])+"<p>");
                
                
            }
        }
    }
    

</script>
<style>
    #xq {
    float:left;
    width:1000px;

    }
    #xq li {
    list-style-type:none;
    width:80px;
    height:50px;
    background:#5a8eb5;
    margin-left:20px;
    font-size:18px;
    float:left;
    text-align:center;
    line-height:40px;
    }
  #xq .active {
    background:#bf63af;
    color:#dcea1f;
    }
    #content {
     border:2px solid #808080;
     width:800px;
     height:100px;
     float:left;
     line-height:20px;
    }
    #content p {
     font-size:15px;
     color:red;
    }
        #content h3 {
        color:#c525eb;
        }
</style>
<div id="xq">
<ul>
    <li class="active">星期一</li>
    <li>星期二</li>
    <li>星期三</li>
    <li>星期四</li>
    <li>星期五</li>
    <li>星期六</li>
    <li>星期日</li>
</ul>
    <div id="content">
     
    </div>
    </div>
    </body>
</html>