时钟，日历

海南金福珠

已于 2022-05-06 10:22:17 修改

阅读量142

点赞数

文章标签： javascript css3 css html

于 2022-05-06 10:00:25 首次发布

本文链接：https://blog.csdn.net/wangpangzidan/article/details/124602111

版权

#javascrip

javascrip案例

一、时钟
二、日历
- 效果图
- - js部分
  - css部分

提示：这里可以添加本文要记录的大概内容：

提示：以下是本篇文章正文内容，下面案例可供参考

一、时钟

效果图

在这里插入图片描述

js部分

<script>
        // 数字转换为字符串，避免相加
        function toDou(n){
            if(n<10){
                return '0'+n;
            }
            else
            {
                return ''+n;
            }
        };
        window.onload=function()
        {

            var aImg=document.getElementsByTagName('img');
            
            function tick(){
                var oDate=new Date();

                // var str='012321';
                var str=toDou(oDate.getHours())+toDou(oDate.getMinutes())+toDou(oDate.getSeconds());
                // alert(str);
                for(var i=0;i<aImg.length;i++)
                {
                    aImg[i].src='images/'+str[i]+'.png';
                }
            }

            setInterval(tick, 1000);
            tick();
           
        };
    </script>

css部分

<style>
        body{
            background-color: black;
            color: #d052ba;
            font-size: 50px;
            text-align: center;
            margin-top: 100px;
        }
    </style>
    <body>
    <img src="images/0.png" alt="">
    <img src="images/0.png" alt="">
    :
    <img src="images/0.png" alt="">
    <img src="images/0.png" alt="">
    :
    <img src="images/0.png" alt="">
    <img src="images/0.png" alt="">
</body>

图片

在这里插入图片描述

二、日历

效果图

在这里插入图片描述

js部分

 <script>
        
        window.onload=function (){
            var arr=[
                '快过年了，大家商量去哪里玩呢？',
                '二月啦~~~',
                '三月啦~~~，夏天到啦',
                '四月啦~~~，准备做些什么呢？',
                '五月啦~~~',
                '六月啦~~~，夏天到啦',
                '七月啦~~~，准备做些什么呢？',
                '八月啦~~~',
                '九月啦~~~，夏天到啦',
                '十月啦~~~，天气冷了哟，记得添加衣服~',
                '十一月啦~~~，准备做些什么呢？',
                '十二月啦~~~今年的最后一个月啦，要说再见啦~',
            ];
            var oDiv=document.getElementById('tab');
            var aLi=oDiv.getElementsByTagName('li');
            var oTxt=oDiv.getElementsByTagName('div')[0];
            
                for(var i=0;i<aLi.length;i++) 
                {
                    aLi[i].index=i;
                    aLi[i].onmouseover=function (){
                        // for(var i=0;i<aLi.length;i++){
                        //     aLi[i].className='';
                        // }
                        // this.className='active';
                        oTxt.innerHTML='<h3>'+(this.index+1)+'月份活动</h3><p>'+ arr[this.index]+'</p>'
                        
                         };
                    
                 
                }
        };
    </script>

css部分

<body>
    <div class="calender" id="tab" >
        <ul>
            <li class="active"> <h2>1</h2><p>JAN</p> </li>
            <li> <h2>2</h2><p>PER</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>NOV</p> </li>
        </ul>
        <div class="text">
            <h3>1月活动</h3>
            <p>快过年了，大家商量去哪里玩呢？</p>
        </div>
    </div>
</body>
<style>
* {
  margin: 0;
  padding: 0;
}
div.calender {
  width: 233px;
  height: 404px;
  background-color: pink;
  margin: 50px auto;
}
div.calender ul {
  padding: 5px 0 12px 5px;
}
div.calender ul li {
  display: inline-block;
  width: 55px;
  height: 55px;
  box-sizing: border-box;
  list-style: none;
  background-color: #40423F;
  border: 1px solid #40423F;
  color: white;
  margin: 12px 0 0 12px;
}
div.calender ul li:hover {
  background-color: white ;
  color: red;
}
div.calender ul li h2 {
  text-align: center;
}
div.calender ul li p {
  text-align: center;
}
div.calender div.text {
  width: 200px;
  height: 100px;
  margin: 0 auto;
  background-color: #ec8d9d;
  padding: 5px;
}
div.calender div.text h3 {
  margin-bottom: 7px;
}
div.calender div.text p {
  font-size: 14px;
}
</style>

海南金福珠

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
时钟，日历

#javascripjavascrip案例一、时钟效果图js部分css部分图片二、日历效果图js部分css部分提示：这里可以添加本文要记录的大概内容：提示：以下是本篇文章正文内容，下面案例可供参考一、时钟效果图js部分<script> // 数字转换为字符串，避免相加 function toDou(n){ if(n<10){ return '0'+n; }
复制链接

扫一扫