winney

It is never too old to learn.

0%
winney

发表于 更新于 分类于

qrcode生成二维码

1
2
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="qrcode.js"></script>
1
2
<input id="text" type="text" value="https://www.baidu.com/" style="width:80%" /><br />
<div id="qrcode" style="width:100px; height:100px; margin-top:15px;"></div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<script type="text/javascript">
    var qrcode = new QRCode(document.getElementById("qrcode"), {
        width : 100,
        height : 100
    });

    function makeCode () {		
        var elText = document.getElementById("text");

        if (!elText.value) {
            alert("Input a text");
            elText.focus();
            return;
        }

        qrcode.makeCode(elText.value);
    }

    makeCode();

    $("#text").on("blur", function () {
        makeCode();
    }).on("keydown", function (e) {
        if (e.keyCode == 13) {
            makeCode();
        }
    });
</script>

微信二维码电子名片生成系统

【示意图】

清空二维码

1
qrcode.clear(); // clear the code.

加上中文内容会报错：

1
qrcode.min.js:1 Uncaught Error: code length overflow. (3452>1440)

解决方案：

Keeex/qrcode，用这里的js替换原来的js，但生成的内容格式跟原来的是不一样的。

发表于 更新于 分类于 ，

接口测试工具Apifox 基础篇：配置环境

jQuery.ajax
AJAX教程 W3school 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
$.ajax({
    url:"",
    timeout:8000,
    type:"POST",
    dataType:"json",
    data:{name:"大名",age:"23"},
    success:function(data,status,xhr){

    },
    error:function(xhr,status,error){
        $(".success").hide();
        $(".maskBg").hide();      
        if(xhr.status === 0){
            if(status === "timeout"){
                app.alert("网络不给力，请检查网络设置"); 
            }
        }else if(xhr.status.toString().charAt(0) === "4"){
            app.alert("客户端出错，请重新操作：" + xhr.status);   
        }else if(xhr.status.toString().charAt(0) == "5"){
            app.alert("服务端出错，请联系网站管理员！错误代码："  + xhr.status);  
        }
    }
})

axios 的简单封装

axios中文文档|axios中文网

axios：基于promise的http库

1.首先引入 axios

1
import axios from 'axios'

2.创建一个实例

1
2
3
4
const api = axios.create({
    baseURL: '', // 所有请求的公共地址部分
    timeout: 　3000 // 请求超时时间 这里的意思是当请求时间超过5秒还未取得结果时 提示用户请求超时
})

3.request拦截器

1
2
3
4
5
6
7
8
9
10
// 请求相关处理 请求拦截 在请求拦截中可以补充请求相关的配置
// interceptors axios的拦截器对象
api.interceptors.request.use(config => {
     // config 请求的所有信息
    // console.log(config);
    return config // 将配置完成的config对象返回出去 如果不返回 请求讲不会进行
}, err => {
    // 请求发生错误时的相关处理 抛出错误
   Promise.reject(err)
})

4.response拦截器

1
2
3
4
5
6
7
8
9
api.interceptors.response.use(res => {
    // 我们一般在这里处理，请求成功后的错误状态码 例如状态码是500，404，403
    // res 是所有相应的信息
    console.log(res)
   return Promise.resolve(res)
}, err => {
    // 服务器响应发生错误时的处理
    Promise.reject(err)
})

7.暴漏出去

1
export default api

封装接口

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
import api from '../index.js';

下面是简写的形式
// getXXX 自定义的接口名字
export const getXXX = (params) => api.get(`/apigb/v1/component`, { params})

export const postXXX = (params) => api.post(`/apigb/v1/component/update-info`, params)


// 下面是详细的写法
export const xxxx = (params) => api({
        url: '', // 请求地址
        method: 'post', // 请求方式
        // data: params, // (一般post请求，我们习惯使用 data属性来传参)
        params: params //(一般get请求，我们习惯使用params属性来传参）
        // 注意：data，和 params 两个属性传参使用，并不是固定的，也可以调换使用。
})
  1. 同步和异步
  2. XMLHttpRequest对象创建
  3. HTTP请求
  4. XMLHttpRequest发送请求
  5. XMLHttpRequest取得响应

Fetch API

fetch返回promise对象

async和await

作用：简化promise对象的使用：不用再使用then()来指定成功/失败的回调函数，以同步编码(没有回调函数)方式实现异步流程

哪里写await?

在返回promise的表达式左侧写await：不想要promise，想要promise异步执行的成功的value数据

哪里写async?

await所在函数(最近的)定义的左侧写async

跨域-代理

配置跨域的方式：

服务端最常用的两种：

  1. cors配置跨域
  2. nginx反向代理处理跨域

前端的代理，只能本地调试使用

Vite搭建的Vue项目，在本地使用代理解决了跨域问题，打包到线上的跨域问题怎么解决？

跨域的地址不属于自己服务器的连接，是别人服务器的连接

——服务器要配置地址（需要服务端来处理）

发表于 更新于 分类于

轻松解决网站大部分特效展示问题

SuperSlide Swiper Swiper-github

拖拽排序图片

模仿360首页导航Div排序插件

移动替换效果

jquery 拖拽排序

鼠标点击网页出现爱心特效

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
(function(window,document,undefined){
    var hearts = [];
    window.requestAnimationFrame = (function(){
        return window.requestAnimationFrame ||
        window.webkitRequestAnimationFrame ||
        window.mozRequestAnimationFrame ||
        window.oRequestAnimationFrame ||
        window.msRequestAnimationFrame ||
        function (callback){
            setTimeout(callback,1000/60);
        }
    })();
    init();
    function init(){
        css(".heart{width: 10px;height: 10px;position: fixed;background: #f00;transform: rotate(45deg);-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);}.heart:after,.heart:before{content: '';width: inherit;height: inherit;background: inherit;border-radius: 50%;-webkit-border-radius: 50%;-moz-border-radius: 50%;position: absolute;}.heart:after{top: -5px;}.heart:before{left: -5px;}");
        attachEvent();
        gameloop();
    }
    function gameloop(){
        for(var i=0;i<hearts.length;i++){
            if(hearts[i].alpha <=0){
                document.body.removeChild(hearts[i].el);
                hearts.splice(i,1);
                continue;
            }
            hearts[i].y--;
            hearts[i].scale += 0.004;
            hearts[i].alpha -= 0.013;
            hearts[i].el.style.cssText = "left:"+hearts[i].x+"px;top:"+hearts[i].y+"px;opacity:"+hearts[i].alpha+";transform:scale("+hearts[i].scale+","+hearts[i].scale+") rotate(45deg);background:"+hearts[i].color;
        }
        requestAnimationFrame(gameloop);
    }
    function attachEvent(){
        var old = typeof window.onclick==="function" && window.onclick;
        window.onclick = function(event){
            old && old();
            createHeart(event);
        }
    }
    function createHeart(event){
        var d = document.createElement("div");
        d.className = "heart";
        hearts.push({
            el : d,
            x : event.clientX - 5,
            y : event.clientY - 5,
            scale : 1,
            alpha : 1,
            color : randomColor()
        });
        document.body.appendChild(d);
    }
    function css(css){
        var style = document.createElement("style");
        style.type="text/css";
        try{
            style.appendChild(document.createTextNode(css));
        }catch(ex){
            style.styleSheet.cssText = css;
        }
        document.getElementsByTagName('head')[0].appendChild(style);
    }
    function randomColor(){
        return "rgb("+(~~(Math.random()*255))+","+(~~(Math.random()*255))+","+(~~(Math.random()*255))+")";
    }
})(window,document);

TouchSlide

TouchSlide

触屏滑动特效插件，移动端滑动特效，触屏焦点图，触屏Tab切换，触屏多图切换等

点击鼠标，图片落在鼠标点击的位置

1
2
3
4
5
6
7
8
9
<img src="images/beetle.gif" id="pic" style="visibility:hidden;position:absolute">
<script type="text/javascript">
    function show(){
        pic.style.left = event.x + "px";
        pic.style.top  = event.y + "px";
        pic.style.visibility = "visible";
    }
    document.onclick = show;
</script>

鼠标移到文字上，出现提示信息

  • 使用title属性

    1
    <a href="#" title="提示信息">超链接文字</a>

  • 自定义事件和自定义样式

    1
    2
    <div id="tip" >这是提示信息</div>
    <a href="#" onMouseOver="mm()" onmouseout="tip.style.visibility='hidden'">超链接文字</a>
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    a:link{text-decoration: none;}
    #tip{
        background:#fcfcfc;
        position:absolute;
        width:auto;
        height:auto;
        visibility:hidden;
        font-size: 12px;
        border:1px solid #ccc;
        padding: 2px 6px;
        border-radius:4px;
        box-shadow: 2px 4px 7px #ccc;
    } 
    1
    2
    3
    4
    5
    6
    7
    <script type="text/javascript">
        function mm(){  
            tip.style.visibility='visible';
            tip.style.top = (event.y+10) + "px";
            tip.style.left = (event.x+10) + "px";
        }
    </script>

按←↑→↓键移到图片位置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<img id="pic" src="images/beetle.gif" style="position:absolute;left:100px;top:100px;">
<script type="text/javascript">
    function move(){
        var key = event.keyCode;
        var x = parseInt(pic.style.left);
        var y = parseInt(pic.style.top);
        var step = 10;
        if (key == 37)  pic.style.left = x - step + "px";
        if (key == 38)  pic.style.top  = y - step + "px";
        if (key == 39)  pic.style.left = x + step + "px";
        if (key == 40)  pic.style.top  = y + step + "px";

        console.log(key)
        console.log(x)
        console.log(y)
    }
    document.onkeydown=move;
</script>

文字滚动效果

1
2
<marquee direction ="left" onMouseOver="this.stop()" onMouseOut="this.start()" scrollamount=3>JavaScript特效制作最新JavaScript特效常用HTML标签讲解ASP入门教程Dreamweaver 8 教程
</marquee>

使用鼠标拖到图片到相应位置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<img src="images/beetle.gif"  style="position:absolute;left:0px;top:0px;" onMouseDown="dragImage(this)">
<script type="text/javascript">
    var down = false;
    var x,y,imgID;

    function dragImage(obj){
        imgID = obj;
        x = event.x - parseInt(imgID.style.left);
        y = event.y - parseInt(imgID.style.top);

        down=true;
    }

    function cancelDrag(){  down=false; }

    function moveImage(){
        if(down){
            //要加上单位“px”，不然图片不能移动
            imgID.style.left  = (event.x - x) + "px";
            imgID.style.top   = (event.y - y) + "px";   

            event.returnValue = false;
        }
    }

    document.onmousemove = moveImage;
    document.onmouseup = cancelDrag;
</script>

跟随鼠标移动的文字

tpanorama-全景图

github地址

效果预览