分类 JavaScript 下的文章

Ueditor 更新百度地图JS API

作者: csensix
时间: 2023-02-01
分类: 杂项,JavaScript
评论

如果页面上的百度地图组件显示：您所使用的地图JS API版本过低，已不再维护，为保证地图基本功能正常使用，请尽快升级到最新版地图JS API，那么，你需要对百度地图API进行升级了。

首先，你需要到百度地图开放平台进行账号注册和获取AK密钥等操作（操作文档）。
然后找到ueditor的百度地图组件，对相关文件进行修改，路径为：/path/to/ueditor/dialogs/map 。
1、修改map.html，将
<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.1&services=true"></script>
替换为
<script type="text/javascript" src="//api.map.baidu.com/api?v=2.0&ak=你的AK密钥"></script>。

- 阅读剩余部分 -

如何扩展 layui 模块

作者: csensix
时间: 2019-07-04
分类: JavaScript
评论

layui 官方提供的模块有时可能还无法满足你，或者你试图按照 layui 的模块规范来扩展一个模块。那么你有必要认识layui.define() 方法。下面就让我们一起扩展一个 layui 模块吧：

第一步：确认模块名，假设为：mymod，然后新建一个mymod.js 文件放入项目任意目录下（注意：可以不用放入layui目录，当然如果你非要放也是可以的），我把 mymod.js 放置于 /public/static/js/module/ 目录下；

第二步：编辑mymod.js的内容，假设是下面这样

/**
  扩展一个 mymod 模块
**/      
 
layui.define(function(exports){ // 提示：模块也可以依赖其它模块，如：layui.define(['layer', 'form'], callback);
  var obj = {
    hello: function(str){
      alert('Hello ' + (str || 'mymod'));
    }
  };
  
  // 输出 mymod 接口
  exports('mymod', obj);
});

第三步：在需要使用到该拓展模块的页面（比如 index.html），通过以下方法调用

layui.config({
    base: '/public/static/js/module/'  // 这是你存放拓展模块的根目录
  }).extend({
    mymod: 'mymod' // 如果 mymod.js 是在根目录，也可以不用设定别名

    // 假如你在 module 目录下有个子目录 test，里面有一个 mod1.js 文件（除exports语句，其他内容和mymod.js一致），而且执行了 exports('mod1', callback)，那么这里可以扩展一个别名
    ,mod1 = 'test/mod1'
  });

layui.use(['element', 'mymod', 'mod1'], function(){
  var element = layui.element
  ,mymod = layui.mymod
  ,mod1 = layui.mod1;

  mymod.hello('World!');
  mod1.hello();

});

axios 实现点击加载更多列表

作者: csensix
时间: 2019-06-26
分类: jQuery,vue.js,JavaScript
评论

直接上代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Load More Test</title>
</head>
<body>
    <div id="container">
        <ul id="example-1">
            <li v-for="(item, index) in newslists">
                {{ index + 1 }} - {{ item.title }}
            </li>
        </ul>
        
        <div>
            <button v-if="hasmore" @click="loadmore">加载更多</button>
            <span v-else>已经到底了</span>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <script src="https://cdn.jsdelivr.net/npm/axios@0.12.0/dist/axios.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/lodash@4.13.1/lodash.min.js"></script>
    <script>
        var app = new Vue({
            el: '#container',
            data: {
                page: 1,
                pagesize: 4, // 每页条数
                hasmore: false,
                url: 'http://localhost/api.php/list/5',
                newslists: [],
                pagecount: 1
            },
            computed: {
                
            },
            watch: {
               
            },
            created: function () {
                var vm = this
                
                axios.get(vm.url + '/num/' + vm.pagesize + '/page/' + vm.page)
                    .then(function(res){
                        vm.newslists = res.data.data
                        vm.pagecount = Math.ceil(res.data.rowtotal / vm.pagesize)
                        vm.hasmore = (vm.page < vm.pagecount) ? true : false
                    })
            },
            methods: {
                loadmore: function () {
                    var vm = this
                    vm.page = vm.page + 1
                    
                    axios.get(vm.url + '/num/' + vm.pagesize + '/page/' + vm.page)
                        .then(function(res){
                            vm.newslists = vm.newslists.concat(res.data.data)
                            vm.hasmore = (vm.page < vm.pagecount) ? true : false
                        })
                }
            }
        })
    </script>
</body>
</html>

IE浏览器下HTTP_REFERER失效

作者: csensix
时间: 2017-11-01
分类: JavaScript
评论

后端语言：PHP。

由于功能需求，后端需要判断链接的http_referer值，PHP保存在 $_SERVER['HTTP_REFERER']中。但经过测试，IE浏览器（包括IE7-IE11）下该值为空，谷歌、火狐等均能正常获取。页面链接是通过window.open(url)的方式打开的。

后得知，IE浏览器只有通过a链接或者form表单提交的方式才能获取到HTTP_REFERER，所以有了下面的解决方案，大致就是先判断浏览器是否是IE浏览器，如果是，就模拟a链接点击跳转到指定页面，如果不是，就使用正常方式跳转。

代码如下：

    // document.all 方法ie11不支持，所以不能简单通过 (document.all) ? true : false 来判断
    function isIE() { //ie?
        if (!!window.ActiveXObject || "ActiveXObject" in window)
            return true;
        else
            return false;
        }

    function referURL(url){
        var isIe=isIE();
        if(isIe) {
           var linka = document.createElement('a');
           linka.href=url;
           linka.target="_blank";
           document.body.appendChild(linka);
           linka.click();
         } else {
             window.open(url);
          }
    }

JS实现类PHP date 时间戳格式化函数

作者: csensix
时间: 2017-05-22
分类: JavaScript
评论

  /**
 * 和PHP一样的时间戳格式化函数
 * @param  {string} format    格式
 * @param  {int}    timestamp 要格式化的时间 默认为当前时间
 * @return {string}           格式化的时间字符串
 */
function date(format, timestamp){ 
    var a, jsdate=((timestamp) ? new Date(timestamp*1000) : new Date());
    var pad = function(n, c){
        if((n = n + "").length < c){
            return new Array(++c - n.length).join("0") + n;
        } else {
            return n;
        }
    };
    var txt_weekdays = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
    var txt_ordin = {1:"st", 2:"nd", 3:"rd", 21:"st", 22:"nd", 23:"rd", 31:"st"};
    var txt_months = ["", "January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"]; 
    var f = {
        // Day
        d: function(){return pad(f.j(), 2)},
        D: function(){return f.l().substr(0,3)},
        j: function(){return jsdate.getDate()},
        l: function(){return txt_weekdays[f.w()]},
        N: function(){return f.w() + 1},
        S: function(){return txt_ordin[f.j()] ? txt_ordin[f.j()] : 'th'},
        w: function(){return jsdate.getDay()},
        z: function(){return (jsdate - new Date(jsdate.getFullYear() + "/1/1")) / 864e5 >> 0},
        // Week
        W: function(){
            var a = f.z(), b = 364 + f.L() - a;
            var nd2, nd = (new Date(jsdate.getFullYear() + "/1/1").getDay() || 7) - 1;
            if(b <= 2 && ((jsdate.getDay() || 7) - 1) <= 2 - b){
                return 1;
            } else{
                if(a <= 2 && nd >= 4 && a >= (6 - nd)){
                    nd2 = new Date(jsdate.getFullYear() - 1 + "/12/31");
                    return date("W", Math.round(nd2.getTime()/1000));
                } else{
                    return (1 + (nd <= 3 ? ((a + nd) / 7) : (a - (7 - nd)) / 7) >> 0);
                }
            }
        },
        // Month
        F: function(){return txt_months[f.n()]},
        m: function(){return pad(f.n(), 2)},
        M: function(){return f.F().substr(0,3)},
        n: function(){return jsdate.getMonth() + 1},
        t: function(){
            var n;
            if( (n = jsdate.getMonth() + 1) == 2 ){
                return 28 + f.L();
            } else{
                if( n & 1 && n < 8 || !(n & 1) && n > 7 ){
                    return 31;
                } else{
                    return 30;
                }
            }
        },
        // Year
        L: function(){var y = f.Y();return (!(y & 3) && (y % 1e2 || !(y % 4e2))) ? 1 : 0},
        //o not supported yet
        Y: function(){return jsdate.getFullYear()},
        y: function(){return (jsdate.getFullYear() + "").slice(2)},
        // Time
        a: function(){return jsdate.getHours() > 11 ? "pm" : "am"},
        A: function(){return f.a().toUpperCase()},
        B: function(){
            // peter paul koch:
            var off = (jsdate.getTimezoneOffset() + 60)*60;
            var theSeconds = (jsdate.getHours() * 3600) + (jsdate.getMinutes() * 60) + jsdate.getSeconds() + off;
            var beat = Math.floor(theSeconds/86.4);
            if (beat > 1000) beat -= 1000;
            if (beat < 0) beat += 1000;
            if ((String(beat)).length == 1) beat = "00"+beat;
            if ((String(beat)).length == 2) beat = "0"+beat;
            return beat;
        },
        g: function(){return jsdate.getHours() % 12 || 12},
        G: function(){return jsdate.getHours()},
        h: function(){return pad(f.g(), 2)},
        H: function(){return pad(jsdate.getHours(), 2)},
        i: function(){return pad(jsdate.getMinutes(), 2)},
        s: function(){return pad(jsdate.getSeconds(), 2)},
        //u not supported yet
        // Timezone
        //e not supported yet
        //I not supported yet
        O: function(){
            var t = pad(Math.abs(jsdate.getTimezoneOffset()/60*100), 4);
            if (jsdate.getTimezoneOffset() > 0) t = "-" + t; else t = "+" + t;
            return t;
        },
        P: function(){var O = f.O();return (O.substr(0, 3) + ":" + O.substr(3, 2))},
        //T not supported yet
        //Z not supported yet
        // Full Date/Time
        c: function(){return f.Y() + "-" + f.m() + "-" + f.d() + "T" + f.h() + ":" + f.i() + ":" + f.s() + f.P()},
        //r not supported yet
        U: function(){return Math.round(jsdate.getTime()/1000)}
    };
    return format.replace(/[\\]?([a-zA-Z])/g, function(t, s){
        if( t!=s ){
            // escaped
            ret = s;
        } else if( f[s] ){
            // a date function exists
            ret = f[s]();
        } else{
            // nothing special
            ret = s;
        }
        return ret;
    });
}

使用方法：

console.log(date("Y/m/d H:i:s", 1469771640));

// 输出
"2016/07/29 13:54:00"