美文网首页
简易年历

简易年历

作者: 蘑菇plus | 来源:发表于2018-08-28 19:11 被阅读0次

1、图片切换

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            td, img {
                width: 200px;
                height: 150px;
            }
        </style>
    </head>
    <body>
        <table border="1" id="table">
            <tr>
                <td><img id="01" src="images/11.jpg"/></td>
                <td><img id="02" src="images/22.jpg"/></td>
                <td><img id="03" src="images/33.jpg"/></td>
            </tr>
        </table>
        <img src="images/11.jpg" id="showImg"/>
    </body>
</html>
<script type="text/javascript">
//  先找到4张图片位置
    var img1=document.getElementById('01')
    var img2=document.getElementById('02')
    var img3=document.getElementById('03')
    var showimg=document.getElementById('showImg')
    img1.onclick=function(){
        showimg.src=img1.src
    }
    img2.onclick=function(){
        console.log('=====')
        showimg.src=img2.src
    }
    img3.onclick=function(){
        console.log('=====')
        showimg.src=img3.src
    }
</script>

2、快速划过没有反应

<html>
    <head>
        <meta charset="utf-8">
        <style>
        li {
            width:200px;
            height:50px;
            line-height:50px;
            font-size:30px;
            background-color:pink;
            list-style:none;
            margin-left:20px;
            margin-bottom:20px;
            text-align:center;
            float:left;
        }
        
        div {
            clear:both;
            margin-left:20px;
            width:640px;
            height:400px;
            font-size:50px;
            background-color:yellow;
            display:none;
        }
        </style>
    </head>
    <body>
        <li>国内新电影</li>
        <li>欧美大片</li>
        <li>日韩微电影</li>
        <div>超级快递、西游伏妖篇、长城、大闹天竺、功夫瑜伽</div>
        <div>神奇动物、第一滴血、机械师复活、碟中谍5、敢死队、速度与激情8</div>
        <div>釜山行、午夜凶铃、自杀教室、你的名字、千与千寻、七龙珠、灌篮高手、海贼王、火影忍者、美少女战士</div>
    </body>
    <script>
    var aLi = document.getElementsByTagName('li');
    var aDiv = document.getElementsByTagName('div');
    var timer = null;
//  给每个li标签添加鼠标事件
    for (var i = 0; i < aLi.length; i++) {
        aLi[i].index = i;
        aLi[i].onmouseover = function () {
            for (var j = 0; j < aLi.length; j++) {
                aDiv[j].style.display = 'none';
            }
            //将应该显示的div显示出来  onload  setInterval  alert  getComputedStyle  document
            var that = this;  //将this先保存起来
            timer = setTimeout(function () {
                //alert(this);  //这个this代表的是当前的window
                aDiv[that.index].style.display = 'block';
            }, 1000);
        };
    }
    
    for (var i = 0; i < aLi.length; i++) {
        aLi[i].index = i;
        aLi[i].onmouseout = function () {
            for (var j = 0; j < aLi.length; j++) {
                aDiv[j].style.display = 'none';
            }
            clearTimeout(timer);
        };
    }
    
    //window.alert('你好');
    </script>
</html>

3、简易年历

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            * {margin: 0; padding: 0; border: none}
            ul, li{list-style: none;}
            #box {
                width: 220px;
                height: 350px;
                background: #ccc;
                margin: 100px auto;
            }
            ul {
                overflow: hidden;
            }
            li {
                float: left;
                width: 58px;
                height: 53px;
                border: 1px solid #aaa;
                background: #444;
                color: white;
                margin-left: 10px;
                margin-top: 10px;
                text-align: center;
                cursor: pointer;
            }
            
            #showInfo {
                width: 200px;
                height: 50px;
                background: #aaa;
                border: 1px solid white;
                margin: 10px;
            }
            
            .active{
                color: orange;
                background: white;
                border: 1px solid red;
            }
            
        </style>
        
    </head>
    <body>
        <div id="box">
            <ul >
                <li class="active">
                    <h2>1</h2>
                    <p>Jan</p>
                </li>
                <li>
                    <h2>2</h2>
                    <p>Feb</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 id="showInfo">1月份好</div>
        </div>
    </body>
</html>
<script >
    var alis=document.getElementsByName('li')
    var odiv1=document.getElementById('showInfo')
for (var i=0;i<alis.length;i++){
    alis[i].onclick=function(){
        for (var j=0;j<alis.length;j++){
            alis[j].className=''
            odiv1.innerHTML=''
        }
        this.className='active'
        odiv1.innerHTML=parseInt(this.firstElementChild.innerHTML)+"月份好"
        }
    }
</script>

4、回到顶部

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            
            #box {
                width: 100px;
                height: 100px;
                background: red;
                position: fixed;
                right: 0;
                bottom: 0;
                cursor: pointer;
                display: none;
            }
            #box a{
                display: inline-block;
                width: 100px;
                height: 100px;
                text-decoration: none;
                color: black;
            }
        </style>
    </head>
    <script type="text/javascript">
        window.onload=function(){
            var odiv=document.getElementById('box')
//          var client_height=document.documentElement.clientHeight
            document.onscroll=function(){
                var scroll_top=document.documentElement.scrollTop
                if (scroll_top>10){
                    odiv.style.display='block'
                    odiv.style.right='20px'
                    odiv.style.bottom='20px'
                    odiv.onclick=function(){
                        document.write("<a href=''></a>")
                    }
                }
                else{
                    odiv.style.display='none'
                }
            }
            
        }
   </script>
    <body>
        <div id="box">回到顶部</div>
        <p>窗外的麻雀在电线杆上多嘴
你说这一句很有夏天的感觉
手中的铅笔在纸上来来回回
我用几行字形容你是我的谁
秋刀鱼的滋味猫跟你都想了
    </body>
</html>

相关文章

  • 简易年历

    1、图片切换 2、快速划过没有反应 3、简易年历 4、回到顶部

  • 简易年历

    1.布局 2.css文件 3.jquery实现()

  • 简易年历

    效果图如下: html结构代码: js逻辑代码:

  • Day9 作业

    图片切换 快速划过没反应 *回到顶部 简易年历

  • Day9-作业

    1.回到顶部 2.简易年历 3切换图片 4.快速划过没反应

  • JS示例09-简易年历

    一、知识要点 1、innerHTML的使用2、字符串拼接 二、源码参考 三、运行效果

  • 原生TabControl与年历的简单Demo

    TabControl 一、Html页面布局 二、Css样式 三、Js部分 简易年历 一、Html页面布局 二、Cs...

  • 2018-08-23 day09-作业

    1.作业1图片选中 2.作业2快速划过 3.作业3简易年历 4.作业4回到顶部

  • 每日小结2.23

    JS没有块级作用域 简易年历 window.onload载入 取出所需的各个变量 循环遍历12个月份数组,自定义一...

  • 2018-08-23day-29作业

    1.切换图片 此代码实现的功能为,点击上排图片,下排的图片变换为你点击的上排图片 2.简易年历 实现点击某月,某月...

网友评论

      本文标题:简易年历

      本文链接:https://www.haomeiwen.com/subject/jamviftx.html