前端笔记-201807

时间 2019-11-08

标签前端笔记繁體版

原文原文链接

一、css浮动javascript

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .row {
            width: 265px;
            margin: 50px;
        }
        .ipt-key {
            width: 180px;
            height: 34px;
            line-height: 34px;
            padding: 0 10px;
            border: 1px solid #ddd;
        }
        .btn-key {
            float: right;
            height: 36px;
            padding: 0 10px;
            border: 1px solid #ddd;
            background: none;
        }
    </style>
</head>
<body>
    <div class="row">
        <!-- 'ipt-box'这个div没有浮动 -->
        <div class="ipt-box">
            <input class="ipt-key" type="text" placeholder="短信验证码">
        </div>
        <!-- 'btn-key'这个元素右浮动，此时按钮会换行 -->
        <button type="button" class="btn-key">获取</button>
    </div>
</body>

运行效果：php

解决办法1：css

<div class="row">
    <!-- 'btn-key'这个右浮动元素放到前面 -->
    <button type="button" class="btn-key">获取</button>
    <!-- 'ipt-box'这个div没有浮动 -->
    <div class="ipt-box">
        <input class="ipt-key" type="text" placeholder="短信验证码">
    </div>
</div>

解决办法2：html

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        /*...*/
        .ipt-box {
            float: left;
        }
    </style>
</head>
<body>
    <div class="row">
　　　　 <!-- 将'ipt-box'这个div设为左浮动 -->
        <div class="ipt-box">
            <input class="ipt-key" type="text" placeholder="短信验证码">
        </div>
        <button type="button" class="btn-key">获取</button>
    </div>
</body>

我的比较推荐使用方式2，使用方式1是维护原有项目。java

最终运行效果：jquery

二、@media媒体查询不兼容ie8及如下git

参考：http://www.bootcdn.cn/respond.js/web

http://www.javashuo.com/article/p-ehbhirfh-co.htmlcanvas

使用 respond.js 解决 ie8媒体查询的兼容问题；api

1）需把文件置于服务器上运行。因为安全限制，一些浏览器可能不容许respond.js以 file:// 方式运行（由于它使用 xmlHttpRequest）

以 file:// 方式运行在ie8下会报错SCRIPT5：拒绝访问。

2）包含媒体查询的 css文件需采用外链形式，

3）引用的respond.js 需置于媒体查询 css 文件以后；

4）引用的respond.js 文件必须放在本html页内，如shtml文件提出公共部分后则无效。（该条未验证）

<link rel="stylesheet" type="text/css" href="/demo/resource/css/test.css" media="screen and (max-width: 800px)">
<!-- 只在ie9如下浏览器引入respond.min.js，能够减小其余浏览器的http请求 -->
<!--[if lt IE 9]>
<script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->

respond.js目前只支持媒体查询里的一部分属性，如min-width、max-width和媒体类型 (screen、print等) ，转换这些属性来解决不支持媒体查询的浏览器的兼容问题。（该条未验证）

20190709补充

若是 Respond.js 和 CSS 文件被放在和页面不一样的域名或子域名下面时，须要额外的配置（何尝试，解决方案：直接将引入的媒体查询样式放在和页面相同的域名下，就不存在跨域问题）

参考：http://dtop.powereasy.net/Item.aspx?id=3701

https://my.oschina.net/ximidao/blog/349130

三、jQueryRotate插件实现转盘抽奖（可以兼容ie8）

1）引入jQueryRotate.2.2.js

2）转动关键代码

$("#lotteryBtn").rotate({
    angle:0, 
    duration: 5000, 
    animateTo: angle+2160, //angle是图片上各奖项对应的角度，2160是我要让指针旋转6圈
    callback:function(){
        // 转动结束回调函数
    }
});

四、微博话题墙

参考连接：http://jssdk.sinaapp.com/start.php#website-connect

Step 1. 网站接入

Step 2. 绑定域名

Step 3. 增长命名空间

在您页面的HTML标签中增长XML命名空间：<html xmlns:wb="http://open.weibo.com/wb">

Step 4. 部署wb.js

在您的页面部署wb.js，同时，若是您的页面编码不是UTF-8，请添加charset="utf-8"属性。

<script src="http://tjs.sjs.sinajs.cn/open/api/js/wb.js?appkey=YOUR APPKEY" type="text/javascript" charset="utf-8"></script>（appkey是否须要？）

Step 5. 使用Jssdk或微博组件

部署微博话题墙组件（http://jssdk.sinaapp.com/widget/topic.php）

使用：（紫框中部分能够修改组件背景颜色和连接颜色，具体可进一步研究）

微博话题墙组件不兼容ie8（是否有解决方案？）

五、git clone xxx --depth=1

depth用于指定克隆深度，为1即表示只克隆最近一次commit（git clone下载内容过大时，这样能够提升速度）。这样仅获取最新版和一个历史版本，即最后2个版本。

六、css问题

1）图片垂直居中（可兼容ie8）

七、极验验证

八、js用POST方式页面跳转,避免在地址栏中显示传递参数

form以post方式提交表单

var data = { // 要传递的数据
    product_id: product_id,
    num: 1
};
var form = $("<form method='post'></form>");
form.attr('action', '【跳转页面路由】');
for(var p in data) {
    var input = $("<input type='hidden'>");
    input.attr('name', p);
    input.val(data[p]);
    form.append(input);
}
$('body').append(form);
form.submit();

九、生成二维码

方式一：jquery.qrcode.min.js

1）引入jquery.min.js和jquery.qrcode.min.js

2）根据连接codeUr生成二维码

$("#pay-qrcode").qrcode({width:170, height:170, render:"canvas", correctLevel:1, text:codeUrl});

上例是使用canvas渲染二维码，可是canvas不兼容ie8。

$("#pay-qrcode").qrcode({width:170, height:170, render:"table", correctLevel:1, text:codeUrl});

为了兼容ie8，能够用table渲染二维码，咱们会发现二维码实际是使用table表格把每个二维码的点画出来，这就致使网页上的Dom元素会特别多。生成的二维码大小和canvas方式同样大。

方式二：qrcode.min.js

1）qrcode.min.js

2）根据连接codeUr生成二维码

var qrcode = new QRCode(document.getElementById("pay-qrcode"), {
    width : 170,
    height : 170
});
qrcode.makeCode(codeUrl);

ie8以上浏览器：

ie8（二维码大小变小）：