分类目录归档：js练习存档

baidu map 引用地图模块html

BAIDU MAP 引用地图模块HTML

1–body部分插入

<div class=”lh-map” id=”baiduMap”></div>

2–以下是样式+接口文件

<style>#baiduMap img{width:auto !important; min-width:100% !important;}</style><script>window._bd_share_config={“common”:{“bdSnsKey”:{},”bdText”:””,”bdMini”:”1″,”bdMiniList”:false,”bdPic”:””,”bdStyle”:”0″,”bdSize”:”10″},”share”:{}};with(document)0[(getElementsByTagName(‘head’)[0]||body).appendChild(createElement(‘script’)).src=’http://bdimg.share.baidu.com/static/api/js/share.js?v=89860593.js?cdnversion=’+~(-new Date()/36e5)];</script><script type=”text/javascript” src=”/static/js/api-2.0_ny22a16GzbMDs1xHsTvjlqtZ.js”></script><script type=”text/javascript”>//创建地图var myMap=new BMap.Map(‘baiduMap’);var point=new BMap.Point(118.791304,32.032297);myMap.centerAndZoom(point,18);

//添加覆盖物var marker = new BMap.Marker(point);  // 创建标注 myMap.addOverlay(marker);   // 将标注添加到地图中

//添加控件myMap.addControl(new BMap.NavigationControl()); // 平移缩放myMap.addControl(new BMap.OverviewMapControl()); //缩略地图//myMap.enableScrollWheelZoom(); //滚轮缩放
</script>

让html页面愉快跳动起来-maxwo浅前端202005

几行代码让您的HTML页面效果更佳炫酷，愉快地动起来！！

<!– Wow –>

<link rel=”stylesheet” href=”/style/animate.css”><script src=”/style/wow.min.js”></script><script>    if (!(/msie [6|7|8|9]/i.test(navigator.userAgent))) {        new WOW().init();    };</script>

<!– Wow //—->

有时候项目需要一些高大上的动画来提升用户体验，吸引用户注意力的同时提高项目的档次。这时wow是个不错的选择

wow.js依赖animate.css，

不需要jquery

animate.css是纯css动画

让HTML页面愉快跳动起来-MAXWO浅前端202005

核心文件附件下载！！！ 点此下载！！！！！

本篇提de附件下载

限制电脑PC端访问Web页面，仅限手机移动端设备才能访问 

<script>
        var system = {};
        var p = navigator.platform;
        var u = navigator.userAgent;

        system.win = p.indexOf("Win") == 0;
        system.mac = p.indexOf("Mac") == 0;
        system.x11 = (p == "X11") || (p.indexOf("Linux") == 0);
        if (system.win || system.mac || system.xll) { //如果是PC转 
            if (u.indexOf('Windows Phone') > -1) { //win手机端

            } else {
                window.location.href = "/m/err.html";
            }
        }
    </script>

齐全的IP地址查询接口及调用方法(转)

  • 设计蜂巢IP地址查询接口：http://www.hujuntao.com/api/ip/ip.php
  • 腾讯IP地址查询接口：http://fw.qq.com/ipaddress
  • 新浪IP地址查询接口：http://int.dpool.sina.com.cn/iplookup/iplookup.php?format=js
  • 搜狐IP地址查询接口：http://pv.sohu.com/cityjson
  • 谷歌IP地址查询接口：http://j.maxmind.com/app/geoip.js
  • 有道IP地址查询接口：http://www.youdao.com/smartresult-xml/search.s
  • 1616 IP地址查询接口：http://w.1616.net/chaxun/iptolocal.php
  • 126 http://ip.ws.126.net/ipquery
  • hao123 http://app.hao123.com/ipquery/getcity.php?rtype=2

设计蜂巢接口调用方法

API请求地址 : http://www.hujuntao.com/api/ip/ip.php?参数

参数说明:

  • IP : IP地址 可选
  • format : 输出格式 json 可选 默认为JS

JSON调用示例：
请求地址：http://www.hujuntao.com/api/ip/ip.php?callback=jQuery17107324279078748077_1327024991339&format=json&_=1327024991363

{
“ip”: “117.89.35.58″,
“province”: “\u6c5f\u82cf”,
“city”: “\u5357\u4eac”
}

腾讯接口调用方法

  1. <script src=”http://fw.qq.com/ipaddress”></script>
  2. <script type=”text/javascript”>
  3. //反回格式如下：
  4. //var IPData = new Array(“117.89.35.98″,””,”江苏省”,”南京市”);
  5. console.log(IPData[0]+’,’+IPData[2]+’,’+IPData[3]) //117.89.35.98,江苏省,南京市
  6. </script>

该方法已经不可用，访问http://fw.qq.com/ipaddre显示“The page you are looking for is temporarily unavailable.
Please try again later.”。腾讯对Referer做了判断，虽然可以通过PHP伪造Referer，但是实际测试中获得的是服务器的IP地址而不是客户端的IP地址。我们一起鄙视一下腾讯。

新浪接口调用方法

  1. <script src=”http://int.dpool.sina.com.cn/iplookup/iplookup.php?format=js”></script>
  2. <script type=”text/javascript”>
  3. //format参数设置返回格式 js/json
  4. //ip 要查询IP 可选
  5. //反回格式如下：
  6. //var remote_ip_info = {“ret”:1,”start”:”117.89.35.0″,”end”:”117.89.35.255″,”country”:”\u4e2d\u56fd”,”province”:”\u6c5f\u82cf”,”city”:”\u5357\u4eac”,”district”:”\u767d\u4e0b”,”isp”:”\u7535\u4fe1″,”type”:””,”desc”:””};
  7. console.log(remote_ip_info[“country”]+’,’+remote_ip_info[“province”]+”省”+’,’+remote_ip_info[“city”]+”市”)//中国,江苏省,南京市
  8. </script>
 

搜狐接口调用方法

  1. <script src=”http://pv.sohu.com/cityjson?ie=utf-8″></script>
  2. <script type=”text/javascript”>
  3. //默认为GBK可通过ie参数设置编码
  4. console.log(returnCitySN[“cip”]+’,’+returnCitySN[“cname”])//117.89.35.98,江苏省南京市
  5. </script>
 

谷歌接口调用方法

据说是谷歌的，不知道是不是真的。

  1. <script src=”http://j.maxmind.com/app/geoip.js”></script>
  2. <script type=”text/javascript”>
  3. console.log(geoip_country_name()+’,’+geoip_region_name()+’,’+geoip_city())//China,Jiangsu,Nanjing
  4. </script>
 

有道接口调用方法

调用接口示例：http://www.youdao.com/smartresult-xml/search.s?type=ip&q=123.233.157.9

返回XML数据

<?xml version=”1.0″ encoding=”gbk”?>
<smartresult>
<product type=”ip”>
<ip>123.233.157.9</ip>
<location>山东省济南市 网通</location>
</product>
</smartresult>

返回JSON数据

fYodaoCallBack(1, {‘product’:’ip’,’ip’:’192.168.1.1′,’location’:’局域网 对方和您在同一内部网’} , ”);

VSCode查找和替换正则表达式转义字符整理

使用VSCode进行查找、替换时，经常需要用到正则表达式，一段时间不用就忘了，每次要用的时候都要耽误很多时间去查找，所以整理了一份很全的放在这里。这个其实是.NET使用的正则表达式，VSCode也是一样的，微软系的产品（比如Visual Studio等）应该都是使用这个标准的。

本文只列举和翻译了常用的一些，完整内容请参照微软官方文档

注意事项：在VSCode中使用时，要先把通配符开关打开（开关是查找输入框右边的”.*”符号）

转义字符 匹配内容
\t tab
\r 回车符号\r
\n 换行符号\n
\uxxxx 匹配Unicode编码为xxx的字符,如\u0020匹配空格，这个符号可以用来帮助匹配中文，后面说
\ 特殊符号转义，如”\*” ，转义后匹配的是字符”*”， “\(” 匹配的是括号”(”
[字符序列] 匹配[ ]中的任意字符，如[ae]，字符a和字符e均匹配
[^字符序列] 匹配不在[ ]中的任意字符，如[^ae]除了a和e，其他字符都匹配
[字符1-字符2] 匹配在[ ]之间的任意字符，如[a-x]，就是匹配a和x之间的所有字符（包括a和x）
. 匹配任意单个字符(除了\n)
\w 匹配所有单词字符（如”a”，“3”，“E”，但不匹配”?”，”.”等）
\W 和\w相反，匹配所有非单词字符
[\u4e00-\u9fa5] 利用区间和\u转义符号，匹配中文（该区间包含2万个汉字），可以当做中文版的\w使用
\s 匹配空格
\S 和\s相反，匹配非空格
\d 匹配数字字符，如”1″，“4”，”9″等
\D 和\d相反，匹配除了数字字符外的其他字符
* 将前面的元素匹配0到多次，如”\d*.\d”，可以匹配”19.9″，”.0″,“129.9”
+ 将前面的元素匹配1到多次，如”be+”，可以匹配”be”， “beeeeee”
？ 将前面的元素匹配0次或者一次，如”rai?n” 可以且只可以匹配 “ran” 或者 “rain”
{n} n是个数字，将前面的元素匹配n次，如”be{3}“可以且只可以匹配 ”beee”
{n, m} 将前面的元素匹配至少n次，最多m次，如”be{1,3}” 可以且只可以匹配”be”,“bee”, “beee”
| 相当于”或”,表示匹配由|分割的任意一个元素，如the(e| is | at)，可以匹配”the”, “this”, “that”
$n n是个数字，这个是替换时使用括号（ ）将匹配的patter分割成了几个元素，然后在替换的patter里面使用，类似于变量。
如果查找patter是”(\w+)(\s)(\w+)”,那么$1就是(\w+),$2是(\s),$3是(\w+)，替换patter是$3$2$1,那么替换结果就是(\w+)(\s)(\w+)。
假设匹配到的是”one two”，那么$1,$2,$3分别为”one”, ” “, “two”，替换后的结果为”two one”.
________________
正则表达式除了匹配字符外，还可以对匹配的上下文做要求，比如要求匹配必须从一行的开头开始，感觉用的不是特别多，需要的请参照本文开头给出的链接。

正则表达式的用法 VSCODE 集合

NO1.批量匹配替换路径改为一个路径

img width=”258″ height=”180″ alt=”(.*)” src=”\/uploads\/allimg\/(.*).jpg”

 

img width=”258″ height=”180″ alt=”(.*)” src=”/image/1-140PF916234L.jpg”

 

由于项目文件目录整改，需要将文件中所有的引用路径进行更改，比较快捷的方法便是使用 vscode 的正则匹配进行批量查找、替换。

原本文件路径为 ../../assets/图片名.png

现在想改为 ../../assets/img/图片名.png

查找的正则表达式：..\/assets\/(.*).png

替换的表达式：../assets/img/$1.png

 

831280-20190411182605715-250856227

该实例调用函数并输出 < 1 的随机值

<!DOCTYPE html>
<html>
<body>

<p>该实例调用函数并输出 < 1 的随机值:</p>

<p id=”demo”>随机数</p>
<p><br></p>

<h1>比较a 和 b 两个随机数的大小</h1>
<span id=”maxwo”>比较a 和 b 两个随机数的大小,循环</span>
<hr>
<h2>提示2: 此次生成的随机数A为</h2>
<span id=”aa”></span>
<hr>
<h2>提示3: 此次生成的随机数B为</h2>
<span id=”bb”></span>
<script>
function myFunction() {
return Math.random();
}

document.getElementById(“demo”).innerHTML = myFunction();

var a=Math.random();
var b=Math.random();
function nB(){

if(a>b){
return “A 大于 B”;

}
else{
return “B 大于 A”;
}

}
document.getElementById(“maxwo”).innerHTML = nB();
document.getElementById(“aa”).innerHTML=a;
document.getElementById(“bb”).innerHTML=b;
</script>

</body>
</html>