js 实现文件上传样式详情

 更新时间:2021年10月21日 12:00  点击:2588 作者:懒死==兰斯

1、概述

这个js包括按钮样式,列表样式、带有删除、添加、放大(使用的是自带的放大功能,提供有API来放入你的弹窗来进行展示)

可监听的事件 Value wdaasd
onlargeClickCallBack 如果想使用自己的弹窗,只需要监听这个函数,拿到返回值给你的弹窗的img->href进行赋值即可 imgFile对象(包括这个被点击图片的全部信息)that(这个js的全局唯一对象,可以在这里面拿到你所有的值)
ondialogBeforeClose 自带的弹窗被关闭的回调 object 返回值是一个对象 对象.event -> 被执行的事件的源事件 对象.imgFile -> 被点击关闭弹窗时,目前弹窗上展示的图片对象信息
onaddImgList 每添加一个图片的回调 file -> 文件对象 that -> (这个js的全局唯一对象,可以在这里面拿到你所有的值)

2、创建对象的参数

参数 含义
maxFileLength 最大可以存在的文件个数 默认值:2
maxFileSize 每个文件单独最大的文件大小 默认值:1024 (1M)
fileSuffix 允许上传的文件后缀 默认值:['mp4', 'mp3', 'word', 'pdf', 'ppt', 'excel', 'jpg', 'png']
StopDialog 是否阻止打开自带的默认弹窗 默认值:false
shadeDialogStyle 如果打开自带弹窗的选项,那么这个控制打开的弹窗高宽多少默认值:[null, null],默认为null为自适应,如果想要设置百分比和px 请直接改变数组[0,1],数组第一项代表宽,第二项代表高
showBtnImgStyle 是否开启按钮样式 默认值:false

使用代码示例:

        <div class="hj-file">
            <input type="file" file="" class="hj-file-input">
            <div class="hj-box hj-append-item">
                <div class="append-item margin-class">
                    <div class="img-push">
                        <img src="./img/push.png" alt="">
                    </div>
                </div>
            </div>
           <!-- 在不开启按钮样式时,这个外层div可以删除 -->
            <div class="hj-btn-box hj-hidden">
                <div class="hj-btn">
                    选择图片
                </div>
            </div>
            <!-- 文件信息列表 -->
            <div class="hj-file-list">
            </div>
        </div>
var file = new File({
     maxFileLength: 2,
     maxFileSize: 1024,
     fileSuffix: ['mp4', 'mp3', 'word', 'pdf', 'ppt', 'excel', 'png', 'jpg'],
     StopDialog: false,
     showBtn: false
 });
 initHJFile(file);

3、监听例子

//如果不想使用自带的弹窗,可以选择监听file对象的onlargeClickCallBack函数
file.callBack.onlargeClickCallBack = function (img, that) {}
file.callBack.ondialogBeforeClose = function (event) {}
file.callBack.onaddImgList = function () {}

4、使用方法

项目目录如上图所示
如果要使用,只需要把js放入你的项目路径下,然后把img放到你的static目录(静态资源路径)。
这里js里面默认引入的图标是 ./ 的相对路径,请自行搜索然后进行更改为你项目的文件路径
上图项目示例为可直接打开查看的完整包,后文有下载地址

5、源代码

此源代码为不包括图标的源代码,全部在一个html页面里面

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    * {
        padding: 0;
        margin: 0;
    }

    body {
        width: 100vw;
        height: 100vh;
        /* display: flex;
        justify-content: center;
        align-items: center; */
    }

    /* .box {
        width: 600px;
    } */



    .hj-file {
        width: 100%;
        /* height: 100%; */

    }

    .hj-file-input {
        display: none;
    }

    .hj-box {
        display: flex;
        flex-wrap: wrap;
    }

    .append-item {
        width: 150px;
        height: 150px;
        border: 1px dashed #b1b5bb;
        border-radius: 5px;
        background-color: #fbfdff;
        display: flex;
        align-items: center;
        margin: 10px;
        justify-content: center;
    }

    .image-item {
        width: 150px;
        height: 150px;
        border-radius: 5px;
        margin: 10px;
        display: flex;
        justify-content: center;
        align-items: center;
        border: 1px solid #eaedf1;
        position: relative;
        background-size: 100% 100%;
        background-repeat: no-repeat;
        transition: 1s;
        animation: translaters 1s;
    }

    .image-item-delete {
        animation: bottom-translaters .7s;
    }

    @keyframes translaters {
        0% {
            opacity: .2;
            transform: translate(0, -50%);
        }

        100% {
            opacity: 1;
            transform: translate(0);
        }
    }

    @keyframes bottom-translaters {
        0% {
            opacity: 1;
            transform: translate(0, 0);
        }

        100% {
            opacity: .2;
            transform: translate(0, 50%);
        }
    }

    .img-push img {
        width: 60px;
        height: 60px;
    }

    .append-item:hover {
        border-color: #00d2fc;
    }

    .margin-class {
        margin-bottom: 20px;
    }

    .first {
        background-image: url('./img/66.jpg');
    }

    .z-index-promote {
        z-index: 3;
    }

    .largeImg img {
        cursor: pointer;
        width: 30px;
        height: 30px;
        transition: .6s;
        display: none;
    }

    .deleteImg img {
        cursor: pointer;
        width: 40px;
        height: 40px;
        display: none;
    }

    .image-item:hover::before {
        content: "";
        z-index: 2;
        background-color: #42393999;
        width: 100%;
        position: absolute;
        height: 100%;
        border-radius: 5px;
        transition: .6s;
        animation: transparency linear .6s;
    }

    .image-item:hover .largeImg img {
        display: block;
        animation: transparency linear .6s;
    }

    .image-item:hover .deleteImg img {
        display: block;
        animation: transparency linear .6s;
    }

    @keyframes transparency {
        0% {
            opacity: 0;
        }

        100% {
            opacity: 1;
        }
    }

    .hj-shade {
        width: 100vw;
        height: 100vh;
        background-color: #302d2d99;
        position: fixed;
        overflow: hidden;
        z-index: 1978;
        display: flex;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        justify-content: center;
        align-items: center;
        animation: hj-shade-sacle .5s;
    }

    @keyframes hj-shade-sacle {
        0% {
            transform: translate(-50%, -50%) scale(0%);
        }

        100% {
            transform: translate(-50%, -50%) scale(100%);
        }
    }

    @keyframes hj-shade-hidden {
        0% {
            transform: translate(-50%, -50%) scale(100%);
        }

        100% {
            transform: translate(-50%, -50%) scale(0%);
        }
    }

    .hj-shade-hidden {
        animation: hj-shade-hidden .5s;
    }

    .hj-shade {
        overflow: auto;
    }

    .hj-shade .hj-box {
        width: 60%;
        height: 80%;
        padding: 20px 10px 10px 10px;
        background-size: 100% 100%;
        background-color: white;
    }

    .hj-shade .hj-box .hj-img {
        width: 100%;
        overflow: auto;
        height: 100%;
    }

    .hj-file-list .hj-file-list-item {
        background-color: white;
        color: #8cacb3;
        display: flex;
        line-height: 2;
        font-size: 0.8em;
    }

    .hj-file-list .hj-file-list-item:hover {
        background-color: #00d2fc70;
        color: white;
    }

    .hj-file-list .hj-file-list-item .hj-left {
        width: 30%;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    .hj-file-list .hj-file-list-item .hj-left span {
        margin-left: 20px;
        cursor: pointer;
    }

    .hj-file-list .hj-file-list-item .hj-right {
        width: 30%;
        display: flex;
        align-items: center;
        justify-content: end;
    }

    .hj-file-list .hj-file-list-item .hj-right span {
        margin-right: 20px;
    }

    .hj-file-list .hj-file-list-item .hj-right img {
        width: 20px;
        height: 20px;
        cursor: pointer;
    }

    @keyframes hj-list-hidden {
        0% {
            opacity: 1;
        }

        100% {
            opacity: 0;
        }
    }

    .hj-list-hidden {
        animation: hj-list-hidden .7s;
    }

    .hj-btn-box {
        margin-bottom: 25px;
    }

    .hj-btn-box .hj-btn {
        margin-left: 20px;
        cursor: pointer;
        background-color: #009efa;
        width: 30%;
        line-height: 2;
        border-radius: 4px;
        color: white;
        font-size: 1.2em;
        text-align: center;
    }

    .hj-hidden {
        display: none;
    }
</style>

<body>
    <div class="box">
        <div class="hj-file">
            <input type="file" file="" class="hj-file-input">
            <div class="hj-box hj-append-item">
                <div class="append-item margin-class">
                    <div class="img-push">
                        <img src="./img/push.png" alt="">
                    </div>
                </div>
            </div>
            <div class="hj-btn-box hj-hidden">
                <div class="hj-btn">
                    选择图片
                </div>
            </div>
            <div class="hj-file-list">
            </div>
        </div>
    </div>

    <script>
        // File构造函数
        function File(obj) {
            // 文件总个数
            this.fileLength = 0;
            // 文件数组
            this.fileList = [];
            // 对象参数配置文件
            this.config = {
                // 最大文件个数
                maxFileLength: obj.maxFileLength || 2,
                // 最大文件大小
                maxFileSize: obj.maxFileSize || 1024,
                // 允许的文件后缀
                fileSuffix: obj.fileSuffix || ['mp4', 'mp3', 'word', 'pdf', 'ppt', 'excel', 'jpg', 'png'],
                // 是否阻止默认打开弹窗
                StopDialog: obj.StopDialog || false,
                // 弹窗的样式  宽 高
                shadeDialogStyle: obj.shade || [null, null],
                // 是否开启按钮样式
                showBtnImgStyle: obj.showBtn || false,
            };
            // fileDom中存储的唯一的dom节点
            this.dom = {
                // input 文件选中输入框dom
                inputDom: null,
                // append-item 添加点击dom
                imageItemDom: null,
                // 要向hj-append-item节点后面追加图片的dom
                appendItemDom: null,
                // 要向hj-file-list节点后面添加图片列表的dom
                appendListDom: null,

            };
            // 事件处理对象
            this.event = {
                    // append-item点击事件处理
                    imageItemClick: () => {
                        this.dom.inputDom.click();
                    },
                    // input 文件选中输入框选择完图片之后事件处理
                    changeLoadFile: (file) => {
                        this.method.filterFile(file.target.files);
                    },
                    // 图片删除事件
                    imgDeleteClick: (id) => {
                        for (let index = 0; index < this.fileList.length; index++) {
                            if (this.fileList[index].id == id) {
                                let _before = this.fileList.slice(0, index == this.fileList.length ? index - 1 :
                                    index);
                                let _after = this.fileList.slice(index + 1);
                                _before = _before.concat(_after);
                                // 删除图片
                                this.method.deleteImg(id);

                                setTimeout(() => {
                                    this.fileList[index].dom.remove();
                                    this.fileList[index].listDom.remove();
                                    this.fileLength--;
                                    this.fileList = _before;
                                }, 600);
                                break;
                            }
                        }
                        1

                    },
                    // 图片放大事件
                    imgLargeClick: (id) => {
                        let imgFile = this.privateUtils.foreachFileListToId(id);
                        console.log(imgFile);
                        this.callBack.onlargeClickCallBack(imgFile, this);
                        if (this.config.StopDialog) return;
                        let hjShadeDiv = document.getElementsByClassName('hj-shade');
                        if (hjShadeDiv.length != 0) return;
                        let div = document.createElement('div');
                        div.className = 'hj-shade';
                        let div2 = document.createElement('div');
                        div2.className = 'hj-box';
                        let img = document.createElement('img');
                        img.className = 'hj-img';
                        img.src = imgFile.base64;
                        div2.appendChild(img);
                        div.addEventListener('click', (event) => {
                            this.callBack.ondialogBeforeClose({
                                event: event,
                                imgFile: imgFile,
                            });
                            div.className = div.className + ' hj-shade-hidden';
                            setTimeout(() => {
                                document.body.removeChild(div);
                            }, 500);
                        })
                        // 防止在按钮模式下,会出现第一次没有加载完成,高长为0的不正常情况
                        img.onload = () => {
                            div.appendChild(div2);
                            document.body.appendChild(div);
                            this.privateUtils.computeDialogWH(img, div2);
                        }

                    },
                },
                this.method = {
                    // 过滤图片
                    filterFile: (list) => {
                        for (let index = 0; index < list.length; index++) {
                            let size = parseInt(list[index].size / 1024);
                            let suffix = list[index].name.substring(list[index].name
                                .lastIndexOf('.') + 1);
                            // 是否符合后缀
                            let isTrue = false;
                            // 判断文件大小
                            if (size > this.config.maxFileSize) {
                                console.log("文件太大");
                                break;
                            }
                            for (let j = 0; j < this.config.fileSuffix.length; j++) {
                                if (suffix == this.config.fileSuffix[j]) {
                                    isTrue = true;
                                    break;
                                }
                            }
                            if (isTrue) {
                                let id = parseInt(Math.random() * 100000);
                                this.fileList.push({
                                    id: id,
                                    file: list[index],
                                    base64: '',
                                    dom: '',
                                    listDom: '',
                                });
                                console.log(this.fileList);
                                this.method.streamToImgBase64(list[index], id);
                            } else {
                                console.log("文件后缀不符合");
                            }
                        }
                    },
                    // 处理图片展示
                    streamToImgBase64: (file, id) => {
                        var fileReader = new FileReader();
                        fileReader.onload = (data) => {
                            this.method.appendImage(data.target.result, id);
                        }
                        fileReader.readAsDataURL(file);

                    },
                    // 追加图片到dom节点中
                    appendImage: (url, id) => {
                        let div = document.createElement('div');
                        div.className = 'image-item margin-class';
                        div.style.backgroundImage = 'url(' + url + ')';
                        for (let index = 0; index < this.fileList.length; index++) {
                            if (this.fileList[index].id == id) {
                                this.fileList[index].dom = div;
                                this.fileList[index].base64 = url;
                                break;
                            }
                        }
                        // 创建删除dom,全部使用addEventListener
                        let largeDom = document.createElement('div');
                        largeDom.className = 'largeImg z-index-promote';
                        largeDom.innerHTML = `<img src="./img/big.png" alt="">`;
                        largeDom.addEventListener('click', () => {
                            this.event.imgLargeClick(id);
                        })
                        let deleteDom = document.createElement('div');
                        deleteDom.className = 'deleteImg z-index-promote';
                        deleteDom.innerHTML = `<img src="./img/delete.png" alt="">`;
                        deleteDom.addEventListener('click', () => {
                            this.event.imgDeleteClick(id);
                        })
                        div.appendChild(largeDom);
                        div.appendChild(deleteDom);
                        this.dom.appendItemDom.appendChild(div);
                        this.fileLength++;
                        // 添加图片列表
                        this.method.addImgList(id);
                    },
                    // 删除图片
                    deleteImg: (id) => {
                        for (let index = 0; index < this.fileList.length; index++) {
                            if (this.fileList[index].id == id) {
                                let item = this.fileList[index];
                                let cless = item.dom.getAttribute('class');
                                let clessList = item.listDom.getAttribute('class');
                                this.fileList[index].dom.setAttribute("class", cless + " image-item-delete");
                                this.fileList[index].listDom.setAttribute("class", clessList + " hj-list-hidden ")
                                break;
                            }
                        }
                    },
                    // 添加图片列表
                    addImgList: (id) => {
                        let file = this.privateUtils.foreachFileListToId(id);
                        this.callBack.onaddImgList(file, this);
                        let div = document.createElement('div');
                        div.className = ' hj-file-list-item '
                        let div$left = document.createElement('div');
                        let div$right = document.createElement('div');
                        let file$img = document.createElement('img');
                        let fileSize = this.privateUtils.computeFileSize(file.file.size);
                        file$img.src = './img/delete-balck.png';
                        div$left.className = ' hj-left ';
                        div$right.className = ' hj-right ';
                        div$left.innerHTML = `<span>${file.file.name}</span>`
                        div$right.innerHTML = `<span>${fileSize}</span>`;
                        div$left.addEventListener('click', () => {
                            this.event.imgLargeClick(id);
                        })
                        file$img.addEventListener('click', () => {
                            this.event.imgDeleteClick(id);
                        })
                        div$right.appendChild(file$img);
                        div.appendChild(div$left);
                        div.appendChild(div$right);
                        for (let index = 0; index < this.fileList.length; index++) {
                            if (id == this.fileList[index].id) {
                                this.fileList[index].listDom = div;
                                break;
                            }
                        }
                        this.dom.appendListDom.appendChild(div);

                    },
                }
            // 暴露的监听Api
            this.callBack = {
                    // 阻止默认自带的打开弹窗
                    onlargeClickCallBack: (img, that) => {},
                    // 自带的弹窗被关闭时的回调
                    // {event: 点击的源事件对象 imgFile: 被关闭的那张图片的全局file对象信息}
                    ondialogBeforeClose: (object) => {},
                    // 每一次添加图片列表时的回调
                    onaddImgList: (file, that) => {},
                },
                this.privateUtils = {
                    foreachFileListToId: (id) => {
                        for (let index = 0; index < this.fileList.length; index++) {
                            if (id == this.fileList[index].id) {
                                return this.fileList[index];
                            }
                        }
                    },
                    computeFileSize: (size) => {
                        let result = parseInt(size / 1024);
                        if (result < 1024) {
                            return result + '.KB';
                        } else if (result >= 1024) {
                            return parseInt(result / 1024) + ".MB";
                        }
                    },
                    // 计算弹窗的高度和长度
                    computeDialogWH: (img, dom) => {
                        let w = this.config.shadeDialogStyle[0];
                        let h = this.config.shadeDialogStyle[1];
                        let w2 = img.naturalWidth;
                        let h2 = img.naturalHeight;
                        if (w2 > window.innerWidth * 0.9) {
                            w2 = window.innerWidth * 0.7;
                            h2 = window.innerHeight * 0.7;
                        }
                        dom.style.width = w == null ? w2 + "px" : w;
                        dom.style.height = h == null ? h2 + "px" : h;
                    }
                }
        }
        var file = new File({
            maxFileLength: 2,
            maxFileSize: 1024,
            fileSuffix: ['mp4', 'mp3', 'word', 'pdf', 'ppt', 'excel', 'png', 'jpg'],
            StopDialog: false,
            showBtn: false
        });
        initHJFile(file);
        // 如果不想使用自带的弹窗,可以选择监听file对象的onlargeClickCallBack函数
        file.callBack.onlargeClickCallBack = function (img, that) {}
        file.callBack.ondialogBeforeClose = function (event) {}
        file.callBack.onaddImgList = function () {}
        // 加载初始信息,比如dom节点的添加
        function initHJFile(file) {
            console.log(file);
            let input_dom = document.getElementsByClassName('hj-file-input')[0];
            let imageItem_dom = document.getElementsByClassName('append-item')[0];
            let appendItem_dom = document.getElementsByClassName('hj-append-item')[0];
            let appendList_dom = document.getElementsByClassName('hj-file-list')[0];
            file.dom.inputDom = input_dom;
            file.dom.imageItemDom = imageItem_dom;
            file.dom.appendListDom = appendList_dom;
            if (file.config.showBtnImgStyle) {
                // 开启按钮模式
                appendItem_dom.style.display = 'none';
                let btn = document.getElementsByClassName('hj-btn-box');
                console.log(btn);
                if (btn.length != 0) {
                    btn[0].className = 'hj-btn-box';
                    btn[0].children[0].addEventListener('click', file.event.imageItemClick);
                } else {
                    console.log("没有找到btn Class");
                    throw new Error('未定义按钮模式所需的HTML')
                }
            }
            file.dom.appendItemDom = appendItem_dom;
            file.dom.imageItemDom.addEventListener('click', file.event.imageItemClick);
            file.dom.inputDom.addEventListener('change', file.event.changeLoadFile)
        }
    </script>
</body>

</html>

到此这篇关于js 实现文件上传样式详情的文章就介绍到这了,更多相关js 实现文件上传样式内容请搜索猪先飞以前的文章或继续浏览下面的相关文章希望大家以后多多支持猪先飞!

原文出处:https://www.cnblogs.com/wwy-gongqr/p/15407375.html

[!--infotagslink--]

相关文章

  • js实现浏览器打印功能的示例代码

    这篇文章主要介绍了js如何实现浏览器打印功能,文中示例代码非常详细,帮助大家更好的理解和学习,感兴趣的朋友可以了解下...2020-07-15
  • JavaScript判断浏览器及其版本信息

    本篇文章主要分享了通过window.navigator来判断浏览器及其版本信息的实例代码。具有一定的参考价值,下面跟着小编一起来看下吧...2017-01-23
  • Php文件上传类class.upload.php用法示例

    本文章来人大家介绍一个php文件上传类的使用方法,期望此实例对各位php入门者会有不小帮助哦。 简介 Class.upload.php是用于管理上传文件的php文件上传类, 它可以帮...2016-11-25
  • PHP文件上传一些小收获

    又码了一个周末的代码,这次在做一些关于文件上传的东西。(PHP UPLOAD)小有收获项目是一个BT种子列表,用户有权限上传自己的种子,然后配合BT TRACK服务器把种子的信息写出来...2016-11-25
  • Nest.js参数校验和自定义返回数据格式详解

    这篇文章主要给大家介绍了关于Nest.js参数校验和自定义返回数据格式的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-03-28
  • jQuery实现简单的文件上传进度条效果

    本文实例讲述了jQuery实现文件上传进度条效果的代码。分享给大家供大家参考。具体如下: 运行效果截图如下:具体代码如下:<!DOCTYPE html><html><head><meta charset="utf-8"><title>upload</title><link rel="stylesheet...2015-11-24
  • php文件上传你必须知道的几点

    本篇文章主要说明的是与php文件上传的相关配置的知识点。PHP文件上传功能配置主要涉及php.ini配置文件中的upload_tmp_dir、upload_max_filesize、post_max_size等选项,下面一一说明。打开php.ini配置文件找到File Upl...2015-10-21
  • js实现调用网络摄像头及常见错误处理

    这篇文章主要介绍了js实现调用网络摄像头及常见错误处理,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-03-07
  • JS实现随机生成验证码

    这篇文章主要为大家详细介绍了JS实现随机生成验证码,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2021-09-06
  • JS实现响应鼠标点击动画渐变弹出层效果代码

    这篇文章主要介绍了JS实现响应鼠标点击动画渐变弹出层效果代码,具有非常自然流畅的动画过度效果,涉及JavaScript针对鼠标事件的响应及页面元素样式的动态操作相关技巧,需要的朋友可以参考下...2016-03-28
  • 基于JavaScript实现文字超出部分隐藏

    这篇文章主要介绍了基于JavaScript实现文字超出部分隐藏 的相关资料,需要的朋友可以参考下...2016-03-01
  • NodeJS实现阿里大鱼短信通知发送

    本文给大家介绍的是nodejs实现使用阿里大鱼短信API发送消息的方法和代码,有需要的小伙伴可以参考下。...2016-01-20
  • 浅析AngularJS Filter用法

    系统的学习了一下angularjs,发现angularjs的有些思想根php的模块smarty很像,例如数据绑定,filter。如果对smarty比较熟悉的话,学习angularjs会比较容易一点,这篇文章给大家介绍angularjs filter用法详解,感兴趣的朋友一起学习吧...2015-12-29
  • js实现列表按字母排序

    这篇文章主要为大家详细介绍了js实现列表按字母排序,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2020-08-11
  • NODE.JS加密模块CRYPTO常用方法介绍

    使用require('crypto')调用加密模块。加密模块需要底层系统提供OpenSSL的支持。它提供了一种安全凭证的封装方式,可以用于HTTPS安全网络以及普通HTTP连接。该模块还提供了一套针对OpenSSL的hash(哈希),hmac(密钥哈希),cipher...2014-06-07
  • node.JS md5加密中文与php结果不一致怎么办

    这次文章要给大家介绍的是node.JS md5加密中文与php结果不一致怎么办,不知道具体解决办法的下面跟小编一起来看看。 因项目需要,需要Node.js与PHP做接口调用,发现nod...2017-07-06
  • Bootstrap3制作图片轮播效果

    这篇文章主要教大家如何利用Bootstrap3制作图片轮播效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2016-05-14
  • Bootstrap教程JS插件滚动监听学习笔记分享

    这篇文章主要为大家分享了Bootstrap教程JS插件滚动监听学习笔记,内容很详细,感兴趣的小伙伴们可以参考一下...2016-05-20
  • JS实现纸牌发牌动画

    这篇文章主要为大家详细介绍了JS实现纸牌发牌动画,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2021-01-19
  • 基于JavaScript实现表单密码的隐藏和显示出来

    为了网站的安全性,很多朋友都把密码设的比较复杂,但是如何密码不能明显示,不知道输的是对是错,为了安全起见可以把密码显示的,那么基于js代码如何实现的呢?下面通过本文给大家介绍JavaScript实现表单密码的隐藏和显示,需要的朋友参考下...2016-03-03