获取浏览器UA信息

navigator.userAgent

示例:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <title>获取浏览器UA(userAgent)信息</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>

<body>
    <table cellpadding=0 cellspacing=0 width="100%;">
        <tr>
            <td style="height:40px;text-align:center;font-size:16px;font-weight:bolder;">您的浏览器UA(userAgent)信息为:</td>
        </tr>
        <tr>
            <td style="height:40px;text-align:center;font-size:16px;font-weight:bolder;color:red;">
                <script language="JavaScript" type="text/javascript">
                    document.write(navigator.userAgent);
                </script>
            </td>
        </tr>
        <td style="height:40px;text-align:center;font-size:16px;font-weight:bolder;">您的屏幕分辨率为:</td>
        <tr>
            <td style="height:40px;text-align:center;font-size:16px;font-weight:bolder;color:red;">
                <script language="JavaScript" type="text/javascript">
                    document.write(window.screen.width + "×" + window.screen.height);
                </script>
            </td>
        </tr>
        <tr>
            <td style="height:30px;text-align:center;font-size:12px;font-weight:bolder;">
                (请复制以上红色的UA(userAgent)信息和分辨率,添加到平台UA列表中)</td>
        </tr>
    </table>

</body>

</html>

url、href、src的区别

URL:

统一资源定位符(或称统一资源定位器/定位地址、URL地址等,英语:Uniform Resource Locator,常缩写为URL),有时也被俗称为网页地址(网址)。

Href:

href (Hypertext Reference)指定网络资源的位置,从而在当前元素或者当前文档和由当前属性定义的需要的锚点或资源之间定义一个链接或者关系。

Src:

source(缩写),指向外部资源的位置,指向的内容将会应用到文档中当前标签所在位置。

CSS3实现毛玻璃效果

body {
    background: url(xxxxxx.jpg);
}
.content: {
    position: relative;
    overflow: hidden;
    ....
}
.content::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: -1;
    background: url(xxxxx.jpg);
    background-repeat: no-repeat;
    background-size: auto;
    background-attachment: fixed;
    filter: blur(4px);
    margin: -30px;
}

利用css3 filter属性级background相关属性实现

JS命名规范示例

js:驼峰命名,例:
firstName

css:中划线命名,例:
first-name
class : 驼峰命名,例:
FirstName

html : 中划线/驼峰命名,例:
class=”first-name”
id:”firstName”

文件:中/下划线命名,例:
first-name.js/first_name.js

图片:头尾两部分,下划线隔开,头表示大类,例:
banner:放置在页面顶部的广告,装饰图案等长方形的图片
banner_sohu.gif
banner_sina.gif

logo:标志性的图片,例:
logo_police.gif

button:在页面上位置不固定,并且带有链接的小图片,例:
button_name.png

menu:在页面中某一位置连续出现,性质相同的链接栏目的图片,例:
menu_aboutus.gif
menu_job.gif

pic:装饰用的图片,例:
pic_people.gif

文件名称:小写英文字母,数字和下划线,例:
首页—index
产品列表—prelist
产品详细页面—prodetail
新闻列表—newslist
新闻详细页面—newsdetail
发展历史—history
关于我们—aboutus
联系我们—linkus,contactus
信息反馈—feedback
留言—leavewords

脚本文件和动态文本:英文小写缩写命名,例:
广告条ad.js
弹出窗口pop.js

公用模块:js文件命名:英文命名,后缀js,例:
common.js
basic.js

外部资源:例:
Jquery.min.js
Jquery.validate.js
Jquery.date.js

动态文件:以性质描述,可以有多个单词,用‘_’隔开,性质一般是该页面的概要(见名知意),例:
register_form.aspx
register_post.aspx
topic_lock.aspx

常用规范
s:表示字符串。例:sName,sHtml;
n:表示数字。例:nPage,nTotal;
b:表示逻辑。例:bChecked,bHasLogin;
a:表示数组。例:aList,aGroup;
r:表示正则表达式。例:rDomain,rEmail;
f:表示函数。例:fGetHtml,fInit;
o:表示以上未涉及到的其他对象,例:oButton,oDate;
g:表示全局变量,例:gUserName,gLoginTime;

常量
某些作为不允许修改值的变量认为是常量,全部字母都大写,例:
COPYRIGHT
PI
常量可以存在于函数中,也可以存在于全局。

Jquery
$:表示Jquery对象。例:
$Content
$Module

一种比较广泛的Jquery对象变量命名规范。
j:表示Jquery对象。例:
jContent
jModule;
另一种Jquery对象变量命名方式。
函数
fn:表示函数。例:
fnGetName
fnSetAge;
fn能够更好的区分普通变量和函数变量。
DOM
dom:表示Dom对象,例:
domForm
domInput
项目中很多地方会用到原生的Dom方法及属性,可以根据团队需要适当修改。
临时变量
作用域不大临时变量可以简写,例:
str,num,bol,obj,fun,arr。
循环变量可以简写,例:
i,j,k等。

常用动词
• get 获取/set 设置/add 增加/remove 删除/create 创建/destory 移除
• start 启动/stop 停止/open 打开/close 关闭/read 读取/write 写入
• load 载入/save 保存/create 创建/destroy 销毁
• begin 开始/end 结束/backup 备份/restore 恢复/detach 脱离
• import 导入/export 导出/split 分割/merge 合并/inject 注入/extract 提取
• attach 附着/bind 绑定/separate 分离/ view 查看/browse 浏览
• edit 编辑/modify 修改/select 选取/mark 标记/copy 复制/paste 粘贴/undo 撤销
• redo 重做/insert 插入/delete 移除/add 加入/append 添加
• clean 清理/clear 清除/index 索引/sort 排序/find 查找/search 搜索/
• increase 增加/decrease 减少/play 播放/pause 暂停/
• launch 启动/run 运行/pack 打包/unpack 解包/parse 解析/emit 生成
• compile 编译/execute 执行/debug 调试/trace 跟踪
• observe 观察/listen 监听/build 构建/publish 发布/push 推/pull 拉
• input 输入/output 输出/encode 编码/decode 解码
• expand 展开/collapse 折叠/encrypt 加密/decrypt 解密
• compress 压缩/decompress 解压缩
• connect 连接/disconnect 断开/send 发送/receive 接收
• download 下载/upload 上传/refresh 刷新/synchronize 同步
• update 更新/revert 复原/lock 锁定/unlock 解锁
• check out 签出/check in 签入/submit 提交/commit 交付
• begin 起始/end 结束/start 开始/finish 完成/enter 进入/exit 退出
• abort 放弃/quit 离开/obsolete 废弃/depreciate 废旧
• collect 收集/aggregate 聚集

原生js中jsonp跨域实现调用必应每日壁纸API

Tips: 注意jsonp跨域需要后台支持。

必应壁纸接口: https://github.com/xCss/bing

function setBingImage(){
    let script = document.createElement('script');
    bing = {
        bg: function (data) {
           body.style.backgroundImage = `url('${data.data.url}')`;
        }
    }
    script.src = `https://bing.ioliu.cn/v1/?d=0&w=1920&h=1080&callback=callback`;
    document.querySelector("head").appendChild(script);
    document.querySelector("head").removeChild(script);
}

搜索框实现各大搜索引擎智能提示功能(jsonp跨域实现自动补全搜索建议)

首先是各大搜索引擎的数据

谷歌/google:http://suggestqueries.google.com/complete/search?client=youtube&q=#content#&jsonp=window.google.ac.h
callback:window.google.ac.h
返回值:window.google.ac.h([“关键字”,[[“关键字规划师”,0],[“关键字研究工具”,0],[“关键字”,0],[“关键字 搜寻量”,0],[“关键字提取”,0],[“关键字参数”,0],[“关键字广告收费方式”,0],[“关键字广告是什么”,0],[“关键字 英文”,0],[“关键字驱动”,0]],{“k”:1,”q”:”5mIo50mwAhPfTuFojvpE9njU9Fc”}])

百度/baidu:http://suggestion.baidu.com/su?wd=#content#&cb=window.baidu.sug
callback:window.baidu.sug
返回值:window.baidu.sug({q:”关键字”,p:false,s:[“关键字优化”,”关键字是什么”,”c语言关键字”,”excel关键字排序”,”关键字和标识符区别”,”关键字优化选择站优云”,”关键字优化选择站优云丶”,”关键字优化_都赞站优云”,”关键字递增排序”,”关键字是关系中能够用来唯一标识元组的属性”]});

必应/bing:http://api.bing.com/qsonhs.aspx?type=cb&q=#content#&cb=window.bing.sug
callback:window.bing.sug
返回值:if(typeof window.bing.sug == ‘function’) window.bing.sug({“AS”:{“Query”:”关键字”,”FullResults”:1,”Results”:[{“Type”:”AS”,”Suggests”:[{“Txt”:”关键字点右边选项可分类搜索”,”Type”:”AS”,”Sk”:””,”HCS”:0},{“Txt”:”关键字驱动”,”Type”:”AS”,”Sk”:”AS1″},{“Txt”:”关键字提取”,”Type”:”AS”,”Sk”:”AS2″},{“Txt”:”关键字搜索的技巧”,”Type”:”AS”,”Sk”:”AS3″},{“Txt”:”关键字云图”,”Type”:”AS”,”Sk”:”AS4″},{“Txt”:”关键字屏蔽”,”Type”:”AS”,”Sk”:”AS5″},{“Txt”:”关键字supper的作用是”,”Type”:”AS”,”Sk”:”AS6″},{“Txt”:”关键字参数 python”,”Type”:”AS”,”Sk”:”AS7″}]}]}}/* pageview_candidate */);

好搜/so:https://sug.so.360.cn/suggest?encodein=utf-8&encodeout=utf-8&format=json&word=#content#&callback=window.so.sug
callback:window.so.sug
返回值:window.so.sug({“ext”:”nlpv=zzzc_0″,”query”:”关键字”,”result”:[{“rank”:”0.009386″,”resrc”:”0.287926″,”source”:”recall”,”word”:”关键字广告”},{“rank”:”0.008406″,”resrc”:”0.556381″,”source”:”recall”,”word”:”关键字查询”},{“rank”:”0.005110″,”resrc”:”0.380169″,”source”:”recall”,”word”:”关键字优化”},{“rank”:”0.001996″,”resrc”:”0.225187″,”source”:”recall”,”word”:”关键字工具”},{“rank”:”0.000570″,”resrc”:”0.363073″,”source”:”recall”,”word”:”关键字搜索引擎”},{“rank”:”0.000547″,”resrc”:”0.353710″,”source”:”recall”,”word”:”关键字排名”},{“rank”:”0.000395″,”resrc”:”0.283342″,”source”:”recall”,”word”:”关键字查询工具”},{“rank”:”0.000216″,”resrc”:”0.177443″,”source”:”recall”,”word”:”关键字优化技巧”},{“rank”:”0.000200″,”resrc”:”0.166434″,”source”:”recall”,”word”:”关键字搜索”},{“rank”:”0.000199″,”resrc”:”0.165665″,”source”:”recall”,”word”:”关键字加密工具”}],”ssid”:”1e9edd15637f4da5b6af8e06f722b255″,”version”:”personal”}
)

搜狗/sougou:https://www.sogou.com/suggnew/ajajjson?type=web&key=#content#
callback:window.sogou.sug
返回值:window.sogou.sug([“关键字”,[“关键字挖掘”,”关键字搜索”,”关键字 点击搜索进入”,”关键字是什么”,”关键字序列”,”关键字static的作用是什么”,”关键字 点右边选项可分类搜索”,”关键字排序”,”关键字驱动测试英文”,”关键字广告”],[“0;0;0;0″,”1;0;0;0″,”2;0;0;0″,”3;0;0;0″,”4;0;0;0″,”5;0;0;0″,”6;0;0;0″,”7;0;0;0″,”8;0;0;0″,”9;0;0;0”],[“”,””,””,””,””,””,””,””,””,””],[“0″],””,”suglabId_1″],-1);

为了方便使用我将搜索引擎数据放在一个数组对象中

"engine": [{
        "name": "谷歌",
        "value": "google",
        "href": "https://www.google.com/search?q=",
        "sugurl": "http://suggestqueries.google.com/complete/search?client=youtube&q=#content#&jsonp=window.google.ac.h",
        "icon": "./img/engineLogo/google.ico",
        "show": true,
        "select": ""
    }, {
        "name": "必应",
        "value": "bing",
        "href": "https://cn.bing.com/search?q=",
        "sugurl": "http://api.bing.com/qsonhs.aspx?type=cb&q=#content#&cb=window.bing.sug",
        "icon": "./img/engineLogo/bing.ico",
        "show": true,
        "select": "selected"
    }, {
        "name": "百度",
        "value": "baidu",
        "href": "https://www.baidu.com/s?wd=",
        "sugurl": "http://suggestion.baidu.com/su?wd=#content#&cb=window.baidu.sug",
        "icon": "./img/engineLogo/baidu.svg",
        "show": true,
        "select": ""
    }, {
        "name": "搜狗",
        "value": "sougou",
        "href": "https://www.sogou.com/web?query=",
        "sugurl": "https://www.sogou.com/suggnew/ajajjson?type=web&key=#content#",
        "icon": "./img/engineLogo/sougou.ico",
        "show": true,
        "select": ""
    }]

JSONP是跨域访问的一种方式。由于服务器返回的JavaScript代码可以直接引用,通过回调函数的方式就可以间接的获取服务器的数据。

// searchInput为获取的输入框
let searchInput = document.querySelector("#searchInput");
// 监听按键抬起
searchInput.onkeyup = () => {
    // 获取选择的搜索引擎
    let engineValue = selectEngine.childNodes[0].alt; 
    // 从数据源中找到选中的搜索引擎
    // 如果没有多个搜索引擎切换可以忽略
    let engine = jsonData.engine.find(item => item.value == engineValue);
    // 将链接赋值给变量
    let [href, sugurl] = [engine.href, engine.sugurl];
    // 获取输入框的值
    let value = searchInput.value;
    // 如果输入框的值为空则清空列表并隐藏
    if (value == "") {
        searchList.innerHTML = "";
        searchList.style.display = "none";
        return;
    }
    // 替换链接中'#content#'为输入框的值
    sugurl = sugurl.replace("#content#", value);
    // 各个引擎的callback,由于各搜索引擎返回的数据不同需要做判断
    // sugValue为定义的函数,用来接收获取到的数据
    window.google = {
        ac: {
            h: function (json) {
                sugValue(href, json[1])
            }
        }
    }
    window.bing = {
        sug: function (json) {
            sugValue(href, json.AS.Results[0].Suggests);
        }
    }
    window.baidu = {
        sug: function (json) {
            sugValue(href, json.s)
        }
    }
    window.sogou = {
        sug: function (json) {
            sugValue(href, json[1])
        }
    }
    // 创建script标签
    let script = document.createElement("script");
    script.src = sugurl;
    document.querySelector("head").appendChild(script);
}
// 接收返回数据的函数
function sugValue(href, value) {
    let sugList = "";
    if (value.length == 0) {
        return;
    }
    // 根据返回值判断渲染
    value.forEach(item => {
        if (typeof item == "string") {
            sugList += `<li><a href="${href}${item}">${item}</a></li>`
        } else if (typeof item == "object" && item.Txt !== undefined) {
            sugList += `<li><a href="${href}${item.Txt}">${item.Txt}</a></li>`
        } else {
            sugList += `<li><a href="${href}${item[0]}">${item[0]}</a></li>`
        }
    })
    searchList.innerHTML = sugList;
    searchList.style.display = "block";
}

什么是跨域:

跨域是由浏览器同源策略引起的,是指页面请求的接口地址,必须与页面url地址处于同域上(即域名,端口,协议相同)。这是为了防止某域名下的接口被其他域名下的网页非法调用,是浏览器对JavaScript施加的安全限制。

前端解决跨域问题常用的解决方案:

  • JSONP:利用script标签可跨域的特点,在跨域脚本中可以直接回调当前脚本的函数。
  • CORS:服务器设置HTTP响应头中Access-Control-Allow-Origin值,解除跨域限制。
  • . . .