zoukankan      html  css  js  c++  java
  • js特效 15个小demo

    js特效和15个小demo

    代码如下:images文件夹未上传

    1.图片切换:

    <!DOCTYPE html>
    <html>
    <head>
        <title>图片切换</title>
    
    </head>
    <body>
        <img src="images/1.jpg" width="400" height="300" id="flower">
        <br>
        <button id="prev">上一张</button>
        <button id="next">下一张</button>
    
        <script type="text/javascript">
            //获取事件源 需要的标签
            var flower = document.getElementById('flower');
            var prevBut=document.getElementById('prev');
            var nextBut = document.getElementById('next');
            var mixIndex = 1,maxIndex = 4;currentIndex = mixIndex;
    
            //监听按钮的点击
            //下一张
            nextBut.onclick = function(){
                //到最后一张,当前为第四张,当再次点击事件,当前跳回第一张
                if (currentIndex === maxIndex) {
                    currentIndex = mixIndex;
                }else{
                    currentIndex++;
                }
                flower.setAttribute('src',`images/${currentIndex}.jpg`)
            }
            //上一张
            prevBut.onclick = function(){
                if (currentIndex === mixIndex) {
                    currentIndex = maxIndex;
                }else{
                    currentIndex--;
                }
                flower.setAttribute('src',`images/${currentIndex}.jpg`)
            }
    
        </script>
    </body>
    </html>
    View Code

    2.图片显示和隐藏

    <!DOCTYPE html>
    <html>
    <head>
        <title>图片显示和隐藏</title>
    </head>
    <body>
        <button id="overflow">隐藏</button>
        <br>
        <img src="images/1.jpg" width="300" height="200">
        <script type="text/javascript">
        var butObj = document.getElementsByTagName('button')[0];
        var newImage = document.getElementsByTagName('img')[0];
    
        butObj.onclick = function(){
            //判断文本内容来操作开关
            if(butObj.innerHTML === '隐藏'){
                newImage.style.display = 'none';
                butObj.innerHTML = '显示';
            }else{
                newImage.style.display = 'block';
                butObj.innerHTML = '隐藏';            
            }
        }
    
    
        </script>
    
    </body>
    </html>
    View Code

    3.相册切换效果

    <!DOCTYPE html>
    <html>
    <head>
        <title>
            相册切换效果
        </title>
        <style type="text/css">
            *{
                padding: 0;
                margin: 0;
            }
            ul {
                list-style: none;
                overflow: hidden;
            }
            li{
                float: left;
                margin-left: 10px;
                margin-top: 20px;
                width: 46px;
                height: 26px;
                border: 2px solid #fff;
                
            }
            ul li.active{
                border-color: red;
            }
        </style>
    </head>
    <body>
        <img src="images/1.jpg" width="300" id="bigImage">
        <ul>
            <li class="active">
                <a href="#">
                    <img src="images/1.jpg" width="46" class="smallImage">
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="images/2.jpg" width="46" class="smallImage">
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="images/3.jpg" width="46" class="smallImage">
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="images/4.jpg" width="46" class="smallImage">
                </a>
            </li>
        </ul>
    
        <script type="text/javascript">
            //获取事件源
            var bigObj = document.getElementById('bigImage');
            var smallObj = document.getElementsByClassName('smallImage');
    
            //遍历集合,给每个img标签添加事件
            for(var i =0;i<smallObj.length;i++){
                smallObj[i].onmouseover = function(){
                    //在悬浮前清除所有li的class属性
                    for(var j =0;j<smallObj.length;j++){
                        smallObj[j].parentNode.parentNode.setAttribute('class','');
                    }
                    //当悬浮到这张图片,设置他属性class为active
                    this.parentNode.parentNode.setAttribute('class','active');
                    //获取到悬浮图片的src
                    var smallImageSrc = this.getAttribute('src');
                    bigObj.setAttribute('src',smallImageSrc);
                }
            }
            
        </script>
    </body>
    </html>
    View Code

    4.关闭小广告

    <!DOCTYPE html>
    <html>
    <head>
        <title>关闭小广告</title>
        <style type="text/css">
            *{
                padding: 0;
                margin:0;
            }
            #qe_code{
                width: 180px;
                height: 160px;
                position: relative;
            }
            #qe_code img{
                position: absolute;
                right: 0;
            }
            #qe_code span#close{
                position: absolute;
                top: 0;
                left: 0;
                border: 1px solid red;
            }
        </style>
    </head>
    <body>
        <div id="qe_code">
            <img src="images/1.jpg" id="code" width="168px" height= "160px">
            <span id="close">X</span>
            <script type="text/javascript">
                var qe_codeDiv = document.getElementById('qe_code');
                var closeObj = document.getElementById('close');
                //隐藏盒子ok~
                closeObj.onclick = function(){
                    qe_codeDiv.style.display = 'none';
                }
    
            </script>
            
        </div>
    
    </body>
    </html>
    View Code

    5.图片切换完整版 函数封装

    <!DOCTYPE html>
    <html>
    <head>
        <title>图片切换</title>
        
        <style type="text/css">
            *{
                padding: 0;
                margin: 0;
            }
            li{
                list-style: none;
                display: inline-block;
                margin-right: 20px;
            }
            #box{
                border: 1px solid #ccc;
                width: 300px;
                height: 70px;
                padding-top:450px;
                background:url('images/1.jpg') no-repeat
            }
        </style>
    </head>
    <body>
        <div id="box">
            <li class="item">
                <img src="images/1.jpg" width="46">
            </li>
            <li class="item">
                <img src="images/2.jpg" width="46">
            </li>
            <li class="item">
                <img src="images/3.jpg" width="46">
            </li>
            <li class="item">
                <img src="images/4.jpg" width="46">
            </li>
        </div>
        <script type="text/javascript">
            //获取事件源
            function $(id){
                return typeof id ==='string'? document.getElementById(id):null;
            }
            var items = document.getElementsByClassName('item');
            for(var i = 0;i<items.length;i++){
                console.log(i);
                var item = items[i]
                item.id = i+1; //设置属性
                item.onmouseover = function(){
                $('box').style.background = `url('images/${this.id}.jpg') no-repeat`                //模板字符串``
            }
            }
        </script>
    
    
    
    
    </body>
    </html>
    View Code

    6.百度换肤

    <!DOCTYPE html>
    <html>
    <head>
        <title>百度换肤</title>
        <style type="text/css">
            *{
                padding: 0;
                margin:0;    
            }
            ul,li{
                list-style: none;
                border: 0;
    
            }
            #bottom1{
                position: fixed;
                width: 100%;
                height: 100%;
                top:0;
                left: 0;
                background-image:url('images/1.jpg');
                background-position: center 0;
                background-repeat: no-repeat;
            }
            #top{
                width: 100%;
                height: 120px;
                position: relative;
                z-index: 10;
    
            }
            #top ul{
                width: 1200px;
                margin:0 auto;
                overflow: hidden;
                background-color: rgba(255,255,255,.5);
            }
            #top ul li{
                float: left;
            }
            #top ul li img{
                width: 180px;
                height: 124px;
                margin-left: 20px;
            }    
        </style>
    </head>
    <body>
        <div id="bottom1">    
        </div>
        <div id="top">
            <ul>
                <li class="item">
                    <img src="images/1.jpg">
                </li>
                <li class="item">
                    <img src="images/2.jpg">
                </li>
                <li class="item">
                    <img src="images/3.jpg">
                </li>
                <li class="item">
                    <img src="images/4.jpg">
                </li>
            </ul>
    
        </div>
        <script type="text/javascript">
                    //获取事件源
            function $(id){
                return typeof id ==='string'? document.getElementById(id):null;
            }
            var items = document.getElementsByClassName('item');
            for(var i = 0;i<items.length;i++){
                
                var item = items[i]
                item.id = i+1; //设置属性
                item.onmouseover = function(){
                $('bottom1').style.backgroundImage = `url('images/${this.id}.jpg')`                //模板字符串``
            }
            }
        </script>
    </body>
    </html>
    View Code

    7.音乐盒实现全选和反选

    <!DOCTYPE html>
    <html>
    <head>
        <title>09音乐盒实现全选和反选</title>
        <style type="text/css">
            *{
                padding: 0;
                margin: 0;
            }
            #panel{
                background-color: #fff;
                border: 1px solid #ddd;
                border-radius: 4px;
                width: 400px;
                margin: 100px auto;
            }
            .panel-footer{
                text-align: center;
            }
        </style>
    </head>
    <body>
        <div id="panel">
        <div class="panel-title">
            <h3>千千音乐盒</h3>
            <hr>
        </div>
    
        <div class="panel-content">
            <input type="checkbox">漂洋过海来看你<br>
            <input type="checkbox">小酒窝<br>
            <input type="checkbox">林俊杰<br>
            <input type="checkbox">青花瓷<br>
            <input type="checkbox">千里之外<br>
            <input type="checkbox">我爱你<br>
            <input type="checkbox">南山南<br>
            <input type="checkbox">可惜不是你<br>
        </div>
        <div class="panel-footer">
            <hr>
            <button id="allSelect">全选</button>
            <button id="cancelSelect">取消选中</button>
            <button id="reverseSelect">反选</button>
        </div>
        </div>
        
        <script type="text/javascript">
            function $(id) {
                return typeof id ==='string'? document.getElementById(id):null;
            }
            //获取复选框
            var inputs = document.getElementsByTagName('input');
            //全选
            $('allSelect').onclick = function(){
                for(var i=0;i<inputs.length;i++){
                    inputs[i].checked = true;
                    // inputs[i].setAttribute('checked','checked');
                }    
            }
            //取消选中
            $('cancelSelect').onclick = function(){
                for(var i=0;i<inputs.length;i++){
                    inputs[i].checked = false;
                }
            }
            //反选
            $('reverseSelect').onclick = function(){
                for(var i=0;i<inputs.length;i++){
                    //inputs[i].checked = !inputs[i].checked;
                    if (inputs[i].checked) {
                        inputs[i].checked = false;
                    }else{
                        inputs[i].checked = true;
                    }    
                }
            }                
        </script>
        
    </body>
    </html>
    View Code

    8.表单验证 成绩单前端简单检测合法

    <!DOCTYPE html>
    <html>
    <head>
        <title>表单验证</title>
        <style type="text/css">
            *{
                padding: 0;
                margin: 0;
            }
            #prompt{
                font-size: 12px;
                color: darkgray;
            }
            #score{
                border: 1px solid darkgray;
            }
    
            /**绿色勾*/
            .correct:before {
                content: '2714';
                color: #008100;
            }
            .incorrect:before {
                content: '2716';
                color: #b20610;
            }
    
        </style>
    </head>
    <body>
        <div id="box">
        <label for="score">请输入你的成绩:</label>
        <input type="text" id="score" placeholder="请输入分数">        
        <span id="prompt">请输入你的成绩</span>
        </div>
        <script type="text/javascript">
            function $(id){
                return typeof id ==='string' ? document.getElementById(id):null;
            }
            $('score').onblur = function(){
                var values = parseFloat(this.value);
                if(isNaN(values)){
                    $('prompt').innerHTML = '输入的成绩不正确';
                    $('prompt').setAttribute('class','incorrect');
                    this.style.borderColor = 'red';
                }else if(values>0 && values <=100){
                    $('prompt').innerHTML = '输入的成绩正确';
                    $('prompt').setAttribute('class','correct');
                    this.style.borderColor = 'lightgreen';    
                    //    $('prompt').className ='correct' 设置属性        
                }else{
                    //超出的范围
                    $('prompt').innerHTML = '输入的成绩超出范围';
                    $('prompt').setAttribute('class','incorrect');    
                    this.style.borderColor = '#ff7500';            
                }
            
            
            $('score').onfocus = function(){
                $('prompt').innerHTML ='请输入你的成绩';
                $('prompt').className='';
                $('score').style.borderColor ='darkgray';
                $('score').style.outline ='none';
                $('score').value = '';
                
                }
    
            }
        </script>
    </body>
    </html>
    View Code

    9.上传图片验证

    <!DOCTYPE html>
    <html>
    <head>
        <title></title>
    </head>
    <body>
        <label for="file">上传图片格式验证:</label>
        <input type="file" id="file">
        <script type="text/javascript">
    
            //获取事件源
            function $(id){
                return typeof id ==='string' ? document.getElementById(id): null;
            }
            //监听图片选择的变化
            $('file').onchange=function(){
                var path = this.value;
                console.log(path);
                //获取.后面的格式
                var fileIndex = path.lastIndexOf('.');
                var file_path = path.substr(fileIndex);
                //转为小写
                var lower_suffix = file_path.toLowerCase();
                console.log(file_path);
                //判断
                if(lower_suffix==='.jpg' || lower_suffix ==='.gif' ||lower_suffix==='.png' || lower_suffix==='.jpeg'){
                    alert('上传图片格式正确!');
                }else{
                    alert('上传图片格式不正确!');
                }
            }
    
    
        </script>
    </body>
    </html>
    View Code

    10.随机验证码校验

    <!DOCTYPE html>
    <html>
    <head>
        <title></title>
    </head>
    <body>
        <div id="code"></div>
        <input type="text" name="" id="newCode">
        <input type="button" name="" id="validate" value="验证">
    
    
        <script type="text/javascript">
            //全局
            var code='';
            //获取标签
            var codeDiv =document.getElementById('code');
            var newCode = document.getElementById('newCode');
            var validateBut = document.getElementById('validate');
    
            //文本被添加验证码
            createCode();
    
            //给input输入框绑定点击事件
            validateBut.onclick = function(){
                var newCodeA=newCode.value.toUpperCase();
                console.log(newCodeA);
                if(codeDiv.innerHTML===newCodeA){
                    // alert('验证通过!');
                    window.location.href = 'http://www.baidu.com';
                }else{
                    alert('验证失败!');
                    newCode.value = '';
                    
                }
                    
            }
            
    
    
    
    
    
            function random(lower, upper) {
                return Math.floor(Math.random() * (upper - lower)) + lower;
            }
            function createCode(){
                var codeLength =4;
                var randomCode=[0,1,2,3,4,5,6,7,8,9,'A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R','S','T','U','V','W','X','Y','Z'];
                for(var i=0;i<codeLength;i++){
                            var index = random(0,36);
                            code+=randomCode[index];
                }
                codeDiv.innerHTML = code;
            }    
    
    
        </script>
    
    </body>
    </html>
    View Code

    11.发表评论

    <!DOCTYPE html>
    <html>
    <head>
        <title>发表评论</title>
        <style type="text/css">
            *{
                padding: 0;
                margin:0;
            }
            ul{
                list-style: none;
            }
            #box{
                width: 1000px;
                border: 1px solid #ccc;
                margin: 100px auto;
                padding: 20px;
                /*background-color: red;*/
            }
            #comment{
                padding: 10px;
                width: 80%;
                font-size: 20px;
                outline: none;
            }
            .box_top{
                margin-bottom: 50px;
            }
            #comment_content li{
                border-bottom: 1px dashed #ccc;
                width: 80%;
                color: red;
                line-height: 45px;
            }
            #comment_content li a{
                float: right;
        </style>
    </head>
    <body>
        <div id="box">
            <div class="box_top">
                <textarea id="comment" cols="80" rows="10" placeholder="请输入你的评论">
                </textarea>
                <button id="btn">发表</button>
            </div>
            <ul id="comment_content">
    
            </ul>
        </div>
        <script type="text/javascript">
            window.onload=function(){
                //监听按钮的点击
                $('btn').onclick =function(){
                    //1.1 获取用户输入的内容
                    var content = $('comment').value;
                    console.log(content);
                    //1.2判断
                    if (content.length === 0) {
                        alert('请输入内容!');
                        return;
                    }else{
                        //1.3 创建li标签
                        var newLi = document.createElement('li');
                        newLi.innerHTML = `${content}<a href='javascript:void(0)'>删除</a>`;
                        //往后面插入
                        // $('comment_content').appendChild(newLi);
                        //往前面插入,以ul下儿子辈的第一个为标准
                        $('comment_content').insertBefore(newLi,$('comment_content').children[0]);
    
                        //清楚输入框的内容
                        $('comment').value ='';
                    };
                    //删除评论
                    var delBtn =document.getElementsByTagName('a');
                    for(var i=0;i<delBtn.length;i++){
                        //当被点击删除按钮
                        delBtn[i].onclick = function(){
                            //this是a,删除li
                            this.parentNode.remove();
                        }
                    }
                    
                    
                }
                
    
    
    
    
    
    
    
    
    
    
    
    
    
                function $(id){
                    return typeof id === 'string' ? document.getElementById(id):null;
                }
            
    
    
    
    
            }
    
    
    
    
        </script>
    </body>
    </html>
    View Code

    12.九宫格布局浮动实现

    <!DOCTYPE html>
    <html>
    <head>
        <title>九宫格布局</title>
        <style type="text/css">
            *{
                padding: 0;
                margin: 0;
            }
            #wrap{
                overflow: hidden;
            }
            #wrap .item{
                width: 248px;
                height: 300px;
                font-size: 13px;
            }
            #wrap .item .title{
                width: 248px;
                height: 30px;
                line-height: 30px;
                overflow: hidden;
                margin-bottom: 10px;
                text-align: center;
            }
            #wrap .item .price{
                color: #ff7500;
                font-size: 18px;
                font-weight: bold;
                text-align: center;
            }
            .imgContainer{
                width: 248px;
                display: table-cell;
                text-align: center;
            }
        </style>
    </head>
    <body>
        <div class="cols">
            <button>3列</button>
            <button>4列</button>
            <button>5列</button>
        </div>
        <div id="wrap">
            <div class="item">
                <div class="imgContainer">
                    <img src="images/1.jpg" width="200px">
                </div>
                <p class="title">衣服精灵女巫</p>
                <p class="price">¥69</p>
            </div>
            <div class="item">
                <div class="imgContainer">
                    <img src="images/1.jpg" width="200px">
                </div>
                <p class="title">衣服</p>
                <p class="price">¥69</p>
            </div>
            <div class="item">
                <div class="imgContainer">
                    <img src="images/1.jpg" width="200px">
                </div>
                <p class="title">衣服</p>
                <p class="price">¥69</p>
            </div>
            <div class="item">
                <div class="imgContainer">
                    <img src="images/1.jpg" width="200px">
                </div>
                <p class="title">衣服</p>
                <p class="price">¥69</p>
            </div>
            <div class="item">
                <div class="imgContainer">
                    <img src="images/1.jpg" width="200px">
                </div>
                <p class="title">衣服</p>
                <p class="price">¥69</p>
            </div>
            <div class="item">
                <div class="imgContainer">
                    <img src="images/1.jpg" width="200px">
                </div>
                <p class="title">衣服</p>
                <p class="price">¥69</p>
            </div>
            <div class="item">
                <div class="imgContainer">
                    <img src="images/1.jpg" width="200px">
                </div>
                <p class="title">衣服</p>
                <p class="price">¥69</p>
            </div>
            <div class="item">
                <div class="imgContainer">
                    <img src="images/1.jpg" width="200px">
                </div>
                <p class="title">衣服</p>
                <p class="price">¥69</p>
            </div>
            <div class="item">
                <div class="imgContainer">
                    <img src="images/1.jpg" width="200px">
                </div>
                <p class="title">衣服</p>
                <p class="price">¥69</p>
            </div>
            <div class="item">
                <div class="imgContainer">
                    <img src="images/1.jpg" width="200px">
                </div>
                <p class="title">衣服</p>
                <p class="price">¥69</p>
            </div>
    
        </div>
    
        <script type="text/javascript">
            //获取事件源
            var buts = document.getElementsByTagName('button');
            var items = document.getElementsByClassName('item');
            console.log(items);
            //监听按钮的点击
    
            buts[0].onclick = function(){
                zzy_flex(3);  //这里直接调用函数
            }
            buts[1].onclick = function(){
                zzy_flex(4);
            }
            buts[2].onclick = function(){
                zzy_flex(5);
            }        
    
            //封装一个函数
            function zzy_flex(colsNum){
                for(var i= 0;i<items.length;i++){
                    items[i].style.float = 'left';
                    items[i].parentNode.style.width =(colsNum*items[i].offsetWidth)+'px';
                    }
                }
        </script>
    </body>
    </html>
    View Code

    13.九宫格布局定位实现

    <!DOCTYPE html>
    <html>
    <head>
        <title>九宫格布局定位实现</title>
        <style type="text/css">
            *{
                padding: 0;
                margin: 0;
            }
            #wrap{
                /*overflow: hidden;*/
                position: relative;
            }
            #wrap .item{
                width: 248px;
                height: 300px;
                font-size: 13px;
            }
            #wrap .item .title{
                width: 248px;
                height: 30px;
                line-height: 30px;
                overflow: hidden;
                margin-bottom: 10px;
                text-align: center;
            }
            #wrap .item .price{
                color: #ff7500;
                font-size: 18px;
                font-weight: bold;
                text-align: center;
            }
            .imgContainer{
                width: 248px;
                display: table-cell;
                text-align: center;
            }
        </style>
    </head>
    <body>
        <div class="cols">
            <button>3列</button>
            <button>4列</button>
            <button>5列</button>
        </div>
        <div id="wrap">
            <div class="item">
                <div class="imgContainer">
                    <img src="images/1.jpg" width="200px">
                </div>
                <p class="title">衣服精灵女巫</p>
                <p class="price">¥69</p>
            </div>
            <div class="item">
                <div class="imgContainer">
                    <img src="images/1.jpg" width="200px">
                </div>
                <p class="title">衣服</p>
                <p class="price">¥69</p>
            </div>
            <div class="item">
                <div class="imgContainer">
                    <img src="images/1.jpg" width="200px">
                </div>
                <p class="title">衣服</p>
                <p class="price">¥69</p>
            </div>
            <div class="item">
                <div class="imgContainer">
                    <img src="images/1.jpg" width="200px">
                </div>
                <p class="title">衣服</p>
                <p class="price">¥69</p>
            </div>
            <div class="item">
                <div class="imgContainer">
                    <img src="images/1.jpg" width="200px">
                </div>
                <p class="title">衣服</p>
                <p class="price">¥69</p>
            </div>
            <div class="item">
                <div class="imgContainer">
                    <img src="images/1.jpg" width="200px">
                </div>
                <p class="title">衣服</p>
                <p class="price">¥69</p>
            </div>
            <div class="item">
                <div class="imgContainer">
                    <img src="images/1.jpg" width="200px">
                </div>
                <p class="title">衣服</p>
                <p class="price">¥69</p>
            </div>
            <div class="item">
                <div class="imgContainer">
                    <img src="images/1.jpg" width="200px">
                </div>
                <p class="title">衣服</p>
                <p class="price">¥69</p>
            </div>
            <div class="item">
                <div class="imgContainer">
                    <img src="images/1.jpg" width="200px">
                </div>
                <p class="title">衣服</p>
                <p class="price">¥69</p>
            </div>
            <div class="item">
                <div class="imgContainer">
                    <img src="images/1.jpg" width="200px">
                </div>
                <p class="title">衣服</p>
                <p class="price">¥69</p>
            </div>
    
        </div>
    
        <script type="text/javascript">
            //获取事件源
            var buts = document.getElementsByTagName('button');
            var items = document.getElementsByClassName('item');
            console.log(items);
            //监听按钮的点击
    
            buts[0].onclick = function(){
                zzy_flex(3);  //这里直接调用函数
            }
            buts[1].onclick = function(){
                zzy_flex(4);
            }
            buts[2].onclick = function(){
                zzy_flex(5);
            }        
    
            //封装一个函数
            function zzy_flex(colsNum){
                //第0行第0列 top:0*h left:0*w
                //第0行第1列 top:0*h left:1*w
                //第0行第2列 top:0*h left:2*w
                //第1行第0列 top:1*h left:0*w
                //第1行第1列 top:1*h left:1*w
                //第1行第2列 top:1*h left:2*w
                for(var i=0;i<items.length;i++){
                    //求每个盒子的行数和列数,比如第10个盒子 10  3行 1列
                                                        //11  3   2 
                    var row =parseInt(i/colsNum); //行  从0开始,第一张是 0 0;
                    var col = parseInt(i%colsNum); //
                    //设置盒子定位
                    items[i].style.position ='absolute';
                    items[i].style.top = (row*items[i].offsetHeight)+'px';
                    items[i].style.left = (col*items[i].offsetWidth)+'px';
                }    
            }
        </script>
    </body>
    </html>
    View Code

    14.日期特效

    <!DOCTYPE html>
    <html>
    <head>
        <title>日期特效</title>
        <style type="text/css">
            
            #nowDate{
                position: relative;
                width: 300px;
                height: 200px;
                text-align: center;
                background-color: #ff7500;
                color: #fff;
                font-size: 16px;
                border-radius: 5px;
            }
            #day{
                width: 120px;
                height: 120px;
                background-color: purple;
                position: absolute;
                top: 20px;
                left: 90px;
                line-height: 120px;
                text-align: center;
                vertical-align: middle;
                color: #fff;
                font-size: 40px;
            }
        </style>
    </head>
    <body>
    
        <div>
            <p id="nowDate">
                
            </p>
            <p id="day">
                
            </p>
        </div>
    
        <script type="text/javascript">
            //获取事件源
            var nowDate = document.getElementById('nowDate');
            var day = document.getElementById('day');
            //定时器 更新时间的变化
            setInterval(nowNumTime,20);
    
            function nowNumTime(){
                //创建对象
                var now =new Date();
                var year = now.getFullYear();
                var month =now.getMonth();
                var d = now.getDate();
                var week = now.getDay();
                var hour =now.getHours();
                var minute = now.getMinutes();
                var second = now.getSeconds();
    
                var weeks =['星期天','星期一','星期二','星期三','星期四','星期五','星期六',]
                //拼接时间
                var temp = ''+(hour>12 ? hour-12:hour);
                if(hour ===0){
                    temp='12';
                }
                temp = temp+(minute<10 ? ':0' : ':')+minute;
                temp = temp+(second<10 ? ':0' : ':')+second;
                temp =temp+(hour>=12 ? ' P.M':' A.M');
                //拼接年月日 星期
                temp =`${year}年${month}月${d}日 ${temp} ${weeks[week]}`;
    
                nowDate.innerHTML = temp;
                day.innerHTML = d;
            }
    
    
    
    
        </script>
    </body>
    </html>
    View Code

    15.长图滚动

    <!DOCTYPE html>
    <html>
    <head>
        <title>长图滚动</title>
        <style type="text/css">
            *{
                padding: 0;
                margin: 0;
            }
            body{
                background-color: #000;
            }
            #box{
                width: 658px;
                height: 400px;
                border: 1px solid #ff6700;
                margin: 100px auto;
                overflow: hidden;
                position: relative;
            }
            #box img{
                position: absolute;
                top: 0;
                left: 0;
            }
            span{
                position: absolute;
                width: 100%;
                height: 50%;
                left: 0;
                cursor: pointer;
            }
            #top{
                top: 0;
            }
            #bottom{
                bottom:0;
            }
    
        </style>
    </head>
    <body>
    
        <div id="box">
            <img src="images/1.jpg">
            <span id="top"></span>
            <span id="bottom"></span>
        </div>
    
    
        <script type="text/javascript">
            //获取事件源
            var box = document.getElementById('box')
            var pic = document.getElementsByTagName('img')[0]
            var divTop = document.getElementById('top');
            var divBottom = document.getElementById('bottom');
    
            //2添加事件
            var num =0,timer =null ;
            divTop.onmouseover = function(){
                //让图片滚动
                clearInterval(timer);
                timer = setInterval(function(){
                    num-=10;
                    if (num>=-680) {
                        pic.style.top = num + 'px';
                    }else{
                        clearInterval(timer);
                    }
                    
                },100);
            }
            divBottom.onmouseover = function(){
                //让图片滚动
                clearInterval(timer);
                timer = setInterval(function(){
                    num+=10;
                    if (num<=0){
                        pic.style.top = num + 'px';
                    }else{
                        clearInterval(timer);
                    }
                    
                },100);
            }        
            //失去焦点时候清除定时
            box.onmouseout= function(){
                clearInterval(timer);
            }
        </script>
    </body>
    </html>
    View Code
  • 相关阅读:
    01_3_创建一个Action
    01_2_Namespace命名空间
    01_1_Socket实现
    03_2_JAVA中的面向对象与内存解析
    01_1_Struts环境搭建
    Zabbix通过Orabbix监控Oracle数据库
    Zabbix通过JMX方式监控java中间件
    nginx启用status状态页
    zabbix数据库分表的实现
    配置sudo记录日志
  • 原文地址:https://www.cnblogs.com/hanfe1/p/12063365.html
Copyright © 2011-2022 走看看