js特效 15个小demo

其他 2019-12-18 20:34:15 阅读次数: 0

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.上传图片验证

扫描二维码关注公众号，回复： 8233656 查看本文章 
<!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

猜你喜欢

转载自www.cnblogs.com/hanfe1/p/12063365.html
今日推荐
基于大语言模型的开源知识库问答系统 MaxKB GitHub Star 数量突破 5,000 个！
美国拟限制 AI 大模型出口中国和俄罗斯
苹果将与 OpenAI 达成协议，将 ChatGPT 应用于 iPhone
openKylin 社区生态委员会第六次会议圆满召开
阿里云正式发布通义千问 2.5
Python 3.13 发布首个 Beta：实验性自由线程模式和 JIT、改进交互式解释器
Stack Overflow 拿我的代码去训练 AI 大模型，还封了我的账号
Pop!_OS 的 COSMIC 桌面完成 App Store 上架工作
报告：Django 仍然是 74% 开发者的首选
《2024 年一季度互联网投融资运行情况》研究报告
15 年前上了“FFmpeg 耻辱柱”，今天他还得谢谢咱——腾讯QQPlayer一雪前耻？
TIOBE 5 月榜单：Fortran “复活”进入 Top 10
周排行
BPM为企业带来的实际利益
好程序员web前端分享css常用属性缩写
Java文件下载（excel）
css样式的动态添加及显示和隐藏等零碎用法
axios全局配置以及拦截器
使用Logstash来实时同步MySQL和log日志数据到ES
C++获取当前时间（年月日、时分秒、毫秒）
Odoo产品分析 (四) -- 工具板块(11) -- 网站即时聊天(1)
Java环境配置正确，但是java、javac、java -version均返回“不是内部或外部命令，也不是可运行的程序或批处理文件”？
01 官网下载各种CentOS教程（超详细版）
每日归档
更多
2024-05-14(0)
2024-05-13(18)
2024-05-12(0)
2024-05-11(38)
2024-05-10(38)
2024-05-09(35)
2024-05-08(42)
2024-05-07(14)
2024-05-06(40)
2024-05-05(0)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022