OrangBus

# 链接跳转QQ加好友

1.以下链接可直接跳转至QQ添加好友界面

tencent://AddContact/?fromId=45&fromSubId=1&subcmd=all&uin=QQ&website=www.oicqzone.com

2.以下链接可直接跳转至QQ临时会话界面

tencent://message/?Menu=yes&uin=QQ&Service=300&sigT=45a1e5847943b64c6ff3990f8a9e644d2b31356cb0b4ac6b24663a3c8dd0f8aa12a595b1714f9d45

将上述链接中的“QQ”替换为QQ号即可。

# Js获取当前日期时间及其它操作

https://www.cnblogs.com/carekee/articles/1678041.html

var myDate = new Date();
myDate.getYear();    //获取当前年份(2位)
myDate.getFullYear();  //获取完整的年份(4位,1970-????)
myDate.getMonth();    //获取当前月份(0-11,0代表1月)
myDate.getDate();    //获取当前日(1-31)
myDate.getDay();     //获取当前星期X(0-6,0代表星期天)
myDate.getTime();    //获取当前时间(从1970.1.1开始的毫秒数)
myDate.getHours();    //获取当前小时数(0-23)
myDate.getMinutes();   //获取当前分钟数(0-59)
myDate.getSeconds();   //获取当前秒数(0-59)
myDate.getMilliseconds();  //获取当前毫秒数(0-999)
myDate.toLocaleDateString();   //获取当前日期
var mytime=myDate.toLocaleTimeString();   //获取当前时间
myDate.toLocaleString( );    //获取日期与时间

# Require.js使用

在入口文件中引入这两个文件

<script src="/js/require.js"></script>
<script src="/js/main.js"></script>

# 表单验证

参考：https://www.w3cschool.cn/jquery/kv69gfnm.html

总的来说效果还不错，其它用着用着就放弃了。

方式一：写在标签里面

// bootstrap4样式
<form id="app-form">
    @csrf
    <div class="form-group">
        <label for="">username</label>
        <input type="text"
               class="form-control" name="username" required minlength="2" maxlength="10">
    </div>
    <div class="form-group">
        <label for="">email</label>
        <input type="email" class="form-control" name="email" email="true" required
               placeholder="">
    </div>
    <div class="form-group">
        <label for="">password</label>
        <input type="text"
               class="form-control" name="password" id="" required minlength="5">
    </div>
    <button type="submit" class="btn btn-primary btn-block">Submit</button>
</form>


$.validator.setDefaults({
    submitHandler: function() {
    let param = $("#app-form").serialize();
    console.log(param)
    }
});

方式二：写在js里面 (html页面还是像上面一样)

requirejs(["jquery","validate"],function ($){
    $.validator.setDefaults({
        submitHandler: function() {
            let param = $("#app-form").serialize();
            console.log(param)
        }
    });
    $().ready(function() {
        $("#app-form").validate({
            debug:true,
            rules:{
                username: 'required',
                password: {
                    required: true,
                    minlength: 2
                }
            }
        });
    });
});

# 编辑器-wangEditor

var editor = "";
requirejs(['wangEditor'],function (E) {
    // const E = window.wangEditor
    editor = new E('#edit-content')
    editor.config.placeholder = '你可以在这里保存你的跟进记录'
    // base64 保存图片
    editor.config.uploadImgShowBase64 = true
    // 限制文件大小
    editor.config.uploadImgMaxSize = 2 * 1024 * 1024 // 2M
    // 或者 const editor = new E( document.getElementById('div1') )
    // 设置编辑区域高度为 500px
    editor.config.height = 500
    editor.create()
});

// 获取编辑器内容
let data = editor.txt.html();

# 剪贴板-clipboard

<input type="text" id="copy-url" value="hello orangbus">
<button class="copy-btn" data-clipboard-target="#copy-url">copy</button>

<p class="layui-icon copy" data-clipboard-text="将要被复制的文字">点击复制</p>

// 剪贴板
requirejs(["clipboard"],function (clipboard){
    new clipboard('.copy-btn');
});

requirejs(["clipboard","notyf"],function (clipboard){
            var notyf = new Notyf();
            let copy = new clipboard('.copy');
            copy.on('success', function(e) {
                notyf.confirm("已复制:"+e.text);
                e.clearSelection();
            });

            copy.on('error', function() {
                notyf.confirm("复制失败!");
            });
        });

# 消息提示-notyf

requirejs(["notyf"],function (){
    var notyf = new Notyf();
    notyf.confirm("notyf is ok!");
});

# 图片放大-magnify

<img
    data-magnify="gallery"
    src="http://blockberry.test/storage/uploads/2020-11-04-13-19-15-5fa239d39e094.jpeg"
    data-src="http://blockberry.test/storage/uploads/2020-11-04-13-19-15-5fa239d39e094.jpeg"
    style="width: 100px;height: 100px;"
>

# 弹窗 - hsycmsAlert

好看的弹窗

requirejs(["halert"],function (){
    //普通弹窗
   hsycms.alert('Hello doc.orangbus.cn')
});

全部方法

<script>
    //普通弹窗
    function palert(txt) {
        hsycms.alert('普通弹窗普通弹窗普通弹窗普通弹窗普通弹窗')
    }

    //提示弹窗
    function tips(txt) {
        hsycms.tips('tips', function () {
            hsycms.tips('普通弹窗普通弹窗普通弹窗普通弹窗普通弹窗')
        }, 2000)
    }

    //询问弹窗
    function confirm() {
        hsycms.confirm('确定删除吗???',
            function (res) {
                hsycms.success('点击了确定');
            },
            function (res) {
                hsycms.fail('点击了取消');
            },
        )
    }

    //显示loading
    function loading() {
        hsycms.loading('loading', '正在加载');
    //2秒后隐藏
        setTimeout(res => {
            hsycms.hideLoading('loading');
        }, 2000)
    }

    //操作成功调用
    function success() {
        hsycms.success('操作成功', function () {

        }, 1800)
    }

    //操作失败调用
    function error() {
        hsycms.fail('fail', '操作失败', function () {
            console.log('操作失败关闭后');
        }, 1800)
    }

</script>

http://sywlgzs.gitee.io/hsycmsalert/

# 字符串JSON 与 json字符串 互转

let json= {
    name: "orangbus",
    age: 18
};

let jsonToString = JSON.stringify(json);
let strToJson = JSON.parse(string);

# jquery常用方法

# 父级

jQuery.parent(expr) 找父亲节点，可以传入expr进行过滤，比如$("span").parent()或者$("span").parent(".class")

jQuery.parents(expr),类似于jQuery.parents(expr),但是是查找所有祖先元素，不限于父元素

# 子级

jQuery.children(expr).返回所有子节点，这个方法只会返回直接的孩子节点，不会返回所有的子孙节点

jQuery.contents(),返回下面的所有内容，包括节点和文本。这个方法和children()的区别就在于，包括空白文本，也会被作为一个jQuery对象返回，children() 则只会返回节点

# 同级

jQuery.prev()，返回上一个兄弟节点，不是所有的兄弟节点

jQuery.prevAll()，返回所有之前的兄弟节点

jQuery.next(), 返回下一个兄弟节点，不是所有的兄弟节点

jQuery.nextAll()，返回所有之后的兄弟节点

jQuery.siblings(), 返回兄弟姐妹节点，不分前后

# ajax图片上传案例

<div class="form-group">
    <input type="file" accept="image/*" class="form-control-file" id="upload-pic" capture="camera">
    <img id='img' src="">
    <input type="hidden" name="pic" id="pic">
</div>

$("#upload-pic").change(function (event) {
    let files = event.target.files[0];
    let param = new FormData();
    param.append("files",files);
    //上传图片
    $.ajax({
        type: "post",
        url: '{{ route("test.upload") }}',
        data: param,
        processData: false,
        contentType: false,
        dateType: 'JSON',
        success:function (res) {
            if (res.code == 0){
                $("#upload-pic").siblings("img").attr("src",res.data).css({"width":'200px',"hieght":'200px'});
                $("#upload-pic").siblings("#pic").attr("value",res.data);
                // layer.msg(res.msg);
                console.log($(this))
            }else{
                // layer.msg(res.msg)
            }
        },
        error:function () {
            // layer.alert("网络错误！");
        }
    });
});

# 滚动到底部加载更多

加载到底部不一定要相等，小于一个值后就可以触发加载了，毕竟请求数据也需要时间

如果scroll事件不触发的话，很可能是scorll事件绑错div了！

let dom = document.querySelector('textarea');
// div滚动事件
dom.onscroll = () => {
    
  // 意思就是内容总体的高度 - 滚动条的偏移值  === 元素的高度(包含内边)但不包含外边距，边框，以及滚动条
  if (dom.scrollHeight - dom.scrollTop === dom.clientHeight) {
    console.log('到达底部 do something');
  }

  // div滚到时：离底部不到30px时触发
  if (dom.scrollHeight - dom.scrollTop - dom.clientHeight <= 30) {
    console.log('离底部不到30px 提前发送请求');
  }
};

组件推荐：vue-infinite-scroll

# 点击复制

懒得折腾就是用上面的插件吧。

 <input type="text" id="input" value="http://orangbus.cn">
<a href="javascript:;" class="copyDom">复制</a>

//复制地址
$('.copyDom').on('click', function () {
    var copyVal = $('#input').val();
    copyToClipboard(copyVal);
    layer.msg('复制成功');
});

function copyToClipboard(s) {
    if (window.clipboardData) {
        window.clipboardData.setData('text', s);
    } else {
        (function (s) {
            document.oncopy = function (e) {
                e.clipboardData.setData('text', s);
                e.preventDefault();
                document.oncopy = null;
            }
        })(s);
        document.execCommand('Copy');
    }
}

# 60s倒计时

var timer = null;
var count = 5;
$("#get-code").click(function () {
    let phone = $("#phone").val();
    if (phone == ''){
        layer.msg("手机号不能为空!");
        return false;
    }
    var load = layer.load();
    axios.post("{{ route("seedSms") }}",{phone}).then(res=>{
    layer.close(load);
    layer.msg(res.msg);
    if (res.code !== 200){ return false; }
    $("#get-code").text(count + "后获取验证码");
    timer = setInterval(function () {
        count--;
        $("#get-code").text(count + "后获取验证码");
        if (count <= 0) {
            clearInterval(timer);
            $('#get-code').text('重新获取验证码');
        }
    },1000)
});
});

vue

phone: "18388110000",
code: "",
txt: '获取验证码',
codeStatus: true


getCode(){
    let That = this;
    if (this.phone == ''){
        return this.$message.error("请输入验证码");
    }
    var timer = null;
    let counts = 60;
    if (That.codeStatus){
        That.codeStatus = false;
        seedSms({
            phone: this.phone,
        }).then(res=>{
            if (res.code ==200){
                this.$message.success(res.msg);
                timer = setInterval(function () {
                    counts--;
                    That.txt = counts+"秒";
                    if (counts <= 0){
                        That.txt = "重新获取";
                        That.codeStatus = true;
                        clearInterval(timer);
                    }
                },1000);
            }else{
                this.$message.error(res.msg);
            }
        });
    }else{
        this.$message.info("验证码已发送，请耐心等待！");
    }
}

# JS 删除数组的某一项

<script>
    Array.prototype.indexOf = function(val){
        for (let i =0;i<this.length;i++){
            if (this[i] ==val) return i;
        }
        return -1;
    }
    Array.prototype.remove = function(val) {
        var index = this.indexOf(val);
        if (index > -1) {
            this.splice(index, 1);
        }
    };
    var test = ['orangbus','doc.orangbus','github.com/orangbus/tool','other'];
    test.remove('other');//删除other
</script>

# js将数组转为字符串

1、String(arr) ：输出数组的每个元素值，用逗号分隔；

2、arr.join("分隔符") ：输出数组的每个元素之，用指定的分隔符分隔；

# js将字符串转为数组

var str = '123,456,789';
var arr = str.split(',');
console.log(arr) //输出["123", "456", "789"]

# js for循环

循环对象，数组

var obj = {
	name: "orangbus",
	url: "orangbus.cn",
	job: 'linux运维'
};

for (item in obj){
	let key = item;
	let value = obj[item];
}

添加、更新

obj['hobby'] = 'watch video'

删除

for (item in obj){
    // 去空值
	if(!obj[item]){
        delete obj[item];
    }
}

# js foreach循环

循环数组

var array = ["orangbus",18,"php","laravel","linux"];
// 添加
array.push("python");

array.forEach((item,index) =>{
	console.log(item,index)
    // 删除
    delete array[index]
})

# 文件上传

本地预览

<div class="form-group">
    <label for="exampleInputEmail1">小店Logo</label>
    <input type="file" name="file" id="file" onchange="upload()">
    <div class="text-center mt-1" style="width: 50%;height: 50%;">
        <img src="/static/images/avatar.jpg" id="pic" class="img-thumbnail">
    </div>
</div>

function upload() {
        let reads = new FileReader();
        let file = document.getElementById("file").files[0];
        reads.readAsDataURL(file);
        reads.onload = function (e) {
            console.log(e)
            document.getElementById("pic").src= this.result;
        }
    }

ajax文件上传

<div class="form-group">
    <label>小店Logo</label>
    <input type="file" id="logo">
    <div class="text-center mt-1 flex-center" style="width: 50%;height: 50%;">
        <img id="pic" src="{$data->logo ?? ''}" class="img-thumbnail">
    </div>
    <input type="hidden" name="logo" id="logo-val" value="{$data->logo ?? ''}">
</div>

$("#logo").change(function () {
    let reads = new FileReader();
    let file = $(this)[0].files[0];

    let formData = new FormData();
    formData.append("file",file)
    $.ajax({
        url:"{:url('upload')}",
        dataType:'json',
        type:'POST',
        async: false,
        data: formData,
        processData : false, // 使数据不做处理
        contentType : false, // 不要设置Content-Type请求头
        success: function(res){
            if (res.code == 200){
                layer.msg(res.msg);
                reads.readAsDataURL(file);
                reads.onload = function (e) {
                    $("#pic").attr("src",this.result).show()
                    $("#logo-val").val(res.data.url)
                }
            }else{
                layer.alert(res.msg);
            }
        },
        error:function(response){
            console.log(response);
        }
    });
});

# 返回

function goBack() {
        document.referrer === '' ? window.location.href = "{:url('storeArc')}" : window.history.go(-1);
    }

# 腾讯云openai云函数

const express = require('express')
const {
    createProxyMiddleware
} = require('http-proxy-middleware');
const app = express()
const port = 9000

app.use('/', createProxyMiddleware({
    target: 'https://api.openai.com',
    changeOrigin: true,
    onProxyRes: function (proxyRes, req, res) {
        proxyRes.headers['Access-Control-Allow-Origin'] = '*';
    }
}));

app.listen(port, () => {
    console.log(`Example app listening at http://localhost:${port}`)
})

image-20230604123834081

# 网站禁止右键复制代码

<!-- 禁止右键代码开始 -->
<script language="javascript">
function disableRightClick(e)
{
var message = "孩子想干嘛馁！如果要收藏本站请按CTRL+D哦！如果你是在试图偷取本站代码、那么别费劲了，你右键怎么按都是这个窗口！"
if(!document.rightClickDisabled) // initialize
{
if(document.layers) 
{
document.captureEvents(Event.MOUSEDOWN);
document.onmousedown = disableRightClick;
}
else document.oncontextmenu = disableRightClick;
return document.rightClickDisabled = true;
}
if(document.layers || (document.getElementById && !document.all))
{
if (e.which==2||e.which==3)
{
alert(message);
return false;
}
}
else
{
alert(message);
return false;
}
}
disableRightClick();
</script>
<!-- 禁止右键代码结束 -->

# 禁止复制

<body oncontextmenu="return false" onselectstart="return false" ondragstart="return false">