[原创]一些javascript的坑

这里只有作者精心编写的学习经历!
回复
头像
hellohappy
网站管理员
网站管理员
帖子: 282
注册时间: 2018年11月18日, 14:27
Been thanked: 2 time

#1 [原创]一些javascript的坑

未读文章 hellohappy » 2019年1月13日, 07:23

前言:
    有时候想要找一个很简单的js,都要搜索半天找不到,下面把一些我写的时候花了很大功夫才找到的html+css+javascript代码贴出来,全部都是经过了验证不存在暗病(中间肯定改了一些,只留下了比较重要的框架),其中有些是人家的错误代码纠正过来的。

javascript代码:

    1.弹出一个简单的文本输入框,注意他不是 js 的 prompt !
(为了找这个东东,搜索引擎总是链接到prompt这个方法这里去,十分崩溃) prompt是一个很简单的输入框,所以基本上不太可能粘贴太多东西,我需要给别人贴代码,主要是用于这个代码编辑器,这段js大概长这样:
弹出文本框.png
弹出文本框.png (14.52 KiB) 查看 301 次
弹出文本框.png
弹出文本框.png (14.52 KiB) 查看 301 次

        这个文本框点击有弹出事件,其中包含关闭按钮,确认按钮,文本自动加滚动条,简单的标题,不可点击的背景蒙版。简洁而不丑陋的外观!
        简直是个完美的弹出模版,修改于某登录框。如果需要看效果,你可以点开我的代码编辑器,点击双窗口或三窗口编辑模式查看。
        代码如下:
Spoiler
Show

Code: 全选

<!DOCTYPE html>
<html>
<head>
<script>
window.onload = function(){
    document.getElementById("btn_showlogin").onclick = shogMinLogin;
    document.getElementById("close_minilogin").onclick = closeLogin;
    document.getElementById("firstLine").onmousedown = moveLogin;
    /* 显示窗口 */
    function shogMinLogin(){
        var mini_login = document.getElementsByClassName("mini_login")[0];
        var cover = document.getElementsByClassName("cover")[0];
        mini_login.style.display = "block";
        cover.style.display = "block";
        
        mini_login.style.left = (document.body.scrollWidth - mini_login.scrollWidth) / 2 + "px";
        mini_login.style.top = (document.body.scrollHeight - mini_login.scrollHeight) / 2 + "px";
    }

    /* 关闭窗口 */
    function closeLogin(){
        var mini_login = document.getElementsByClassName("mini_login")[0];
        var cover = document.getElementsByClassName("cover")[0];
        mini_login.style.display = "none";
        cover.style.display = "none";
    }

    /* 移动窗口 */
    function moveLogin(event){
        var moveable = true;

        //获取事件源
        event = event ? event : window.event;
        var clientX = event.clientX;
        var clientY = event.clientY;
        
        var mini_login = document.getElementById("mini_login");
        console.log(mini_login);
        var top = parseInt(mini_login.style.top);
        var left = parseInt(mini_login.style.left);//鼠标拖动
        document.onmousemove = function(event){
            if(moveable){
                event = event ? event : window.event;
                var y = top + event.clientY - clientY;
                var x = left + event.clientX - clientX;
                if(x>0 && y>0){
                    mini_login.style.top = y + "px";
                    mini_login.style.left = x + "px";
                }
            }
        }
        //鼠标弹起
        document.onmouseup = function(){
            moveable = false;
        }
    }
};
</script>

<style>    
    /* 弹出 样式 */
    .mini_login{
        display:none;
        position:absolute;
        z-index:10;
        background:white;
    }
    .mini_login .item{
        width:320px;
        margin:0 auto;
        height:48px;
        line-height:48px;
        padding:0 20px;
    }
    /* 窗第一行*/
    .mini_login .firstLine{
        color:#666;
        background:#f7f7f7;
        font-size:18px;
        font-weight:bold;
        cursor:move;
    }
    .mini_login .item .login_close{
        display:inline-block;
        float:right;
        cursor:pointer;
    }
    
    .mini_login .item label{
        font-size:14px;
        margin-right:15px;
    }
    .mini_login .item textarea{
        display:inline-block;
        height:95%;
        width:100%;
    }
    /* 按钮 */
    .mini_login .item a.btn_login{
        display:block;
        margin:10px 10% 0;
        height:30px;
        line-height:30px;
        width:80%;
        background:#4490F7;
        color:white;
        font-size:16px;
        font-weight:bold;
        text-align:center;
    }
    /* 遮罩层样式 */
    .cover{
        display:none;
        width:100%;
        height:100%;
        position:absolute;
        top:0;
        left:0;
        z-index:9;
        background-color:#000;
        opacity:0.3;
    }
</style>
</head>
<body>

<!-- 主体 -->
<div class="main">
    <a href="javascript:void(0)" class="btn_login" id="btn_showlogin">登录框</a>
</div>

<!-- 弹出小窗口 -->
<div class="mini_login" id="mini_login">
    <!-- 表单 -->
<form action="" method="post">
    <div class="item firstLine" id="firstLine">
        <span class="login_title">用于对比的代码</span>
        <span class="login_close" id="close_minilogin">X</span>
    </div>
    <div class="item" id="code_input">
        <textarea name="代码:"></textarea>
    </div>
    <div class="item">
        <a href="javascript:void(0)" class="btn_login" onclick="">确认</a>
    </div>
</form>
</div>
<!-- 遮罩层 -->
<div class="cover"></div>

</body>
</html>

    2.异步调用js和css接口函数:
        要知道,对于复杂的网页,如果一次性连续加载所有的js和css,可能会导致整个网站的浏览体验大大下降,加载慢,下载等半天,而且有些功能又不是一定要加载才能使用的,比如我的 代码编辑器 里有大量的主题,但是人家只会用几个主题,其他主题(也就css文件),一般就不会用到,这就用到了异步加载!但是异步加载有几个问题要解决,其中最重要的是,不能重复加载(能重复加载但是你浪费了用户的流量和加载时间,同一个文件你下载n次,也是可以运行而且不报错的)。所以用沙盒的方法来解决!
        源程序来源于网络,但是!原版是错误的,有大量的问题,我自己亲自读懂了以后,改正的版本有如下特点:
            1.支持异步加载js和css(而不只是js)
            2.整个程序完整无错误
            3.第一个参数支持完整路径,也支持纯文件名
        调用方法是:

Code: 全选

//css文件,第二参数写false,function是回调函数
require("merge.css", false, function () {
});
//js文件,第二参数写true,function是回调函数
require("merge.js", true, function () {
});
        代码如下:
Spoiler
Show

Code: 全选

//存储已加载模块的信息
var moduleList = ;

(function () {
    //让外面可以只能访问到require变量
    window.require = require;

    //定义一个加载模块的方法
    function require(moduleName, isjs, callback) {
        //创建加载模块的具体实现类
        var requireHelper = new RequireHelper(moduleName, isjs, callback);
        //调用加载模块类的load方法加载模块
        requireHelper.load();
    }

    //创建一个实体类,给传进来的属性赋值
    function RequireHelper(moduleName, isjs, callback) {
        this.moduleName = moduleName;
        this.isjs = isjs;
        this.callback = callback;
    }

    //给模块加载实现类的原型添加方法
    RequireHelper.prototype = {
        //加载模块
        load: function () {
            var that = this;
            var moduleName = that.moduleName;
            if (that.isLoad()) {//模块已被加载(资源优化:已经请求的模块不要再次加载)
                var moduleInfo = that.getModuleInfo();//获取模块的描述信息
                if (moduleInfo.isLoad) {//如果模块资源已加载完成
                    that.callback();//可以放心的调用模块对应的回调函数
                } else {//模块资源没加载完
                    var oldCallback = moduleInfo.callback;//取出之前的回调函数
                    moduleInfo.callback = function () {//追加回调函数
                        oldCallback();
                        that.callback();
                    };
                }
            } else {//模块没有加载
        //判断是js还是css文件
        if(that.isjs==true){
                    var script = document.createElement("script");
                    script.src = that.moduleName;
                    document.getElementsByTagName("head")[0].appendChild(script);//加载模块
                    var moduleInfo = {
                        moduleName: that.moduleName, isLoad: false, callback: function () {
                            that.callback();
                        }
                    };//添加模块的描述信息
                    script.onload = function () {
                        moduleInfo.callback();//执行模块对应的回调函数
                        moduleInfo.isLoad = true;//标识模块资源被加载完成
                moduleList.push(moduleInfo);
                    }
        }
        else{
            var style = document.createElement("link");
                    style.href = that.moduleName;
            style.rel = "stylesheet";
            style.type = "text/css";
                    document.getElementsByTagName("head")[0].appendChild(style);//加载模块
                    var moduleInfo = {
                        moduleName: that.moduleName, isLoad: false, callback: function () {
                            that.callback();
                        }
                    };//添加模块的描述信息
                    style.onload = function () {
                        moduleInfo.callback();//执行模块对应的回调函数
                        moduleInfo.isLoad = true;//标识模块资源被加载完成
                        moduleList.push(moduleInfo);
                    }
        }
            }
        },
        //判断指定模块是否加载
        isLoad: function () {
            return this.getModuleInfo() == null ? false : true;            
        },
        //根据模块名称获取模块信息
        getModuleInfo: function () {
            for (var i = 0; i < moduleList.length; i++) {
                if (this.moduleName == moduleList[i].moduleName) {
                    return moduleList[i];
                }
            }
            return null;
        }
    };

})(window)[/i][/i]



 

Link:
Hide post links
Show post links


回复