2017.11.9
ajax访问其他域默认会被拦截,然后用尽各种方法,像jsonp等等,结果获取豆瓣的json毫无压力,但一旦获取同事的……还是不行,更可恶的是它不报错了,直接走error返回parsererror……
最终,同事把pom.xml、application.properties、ServerApplication.java修改了一下,并添加ServerFilter.java,使得程序走本地路由过去,终于把问题完美解决了!
2017.11.10
ajax调用一个链接报415的错误,从火狐的反馈来看(谷歌没有具体反馈?),是contentType问题,于是我把“application/x-www-form-urlencoded; charset=utf-8”给删除了,结果还是这错误……于是我在想是不是其他问题,改了data传输还是不行(其实这里也是问题,同事用的后台框架能自动解析json,不需要外边还加变量名),最后发现把contentType改为“application/json”解决
2017.11.15
关于socket的用法示例,引入reconnecting-websocket.js,自定义js部分:
var Test = {//
options: {
socket: null,
},
/**
* 连接服务
*/
connect: function () {
var p_redis_serverurl = "http://IP:PORT/Server";
var redishttp = p_redis_serverurl.split("//");
var socket_url = "ws://" + redishttp[1] + "/websocket";
Test.options.socket = new ReconnectingWebSocket(socket_url);//与服务端握手
Test.options.socket.onerror = function (event) {
Test.disConnect();
};
Test.options.socket.onopen = function (event) {
Test.onOpen(event);
};
Test.options.socket.onmessage = function (event) {
Test.onMessage(event);
};
},
/**
* 接收消息
*/
onMessage: function (event) {
var data = eval("(" + event.data + ")");
},
/**
* 建立连接成功回调
*/
onOpen: function (event) {
}
,
/**
* 发生错误回调
*/
onError: function (event) {
},
}
2017.11.16
昨天就困扰了我许久的框选查询,终于搞定了!一开始在想是不是调用了后台什么方法查的,但是只要一查network就知道完全没有,这是纯前端的功能。然后在想是不是框选后的代码被我无意修改,或是有什么关键字不同……结果还是一样一样的……
今天一来,我就直接看图标的html是不是一样!结果发现,它根本不在html上存图标!!!把GpsView整个文件夹注释掉,它的图标是在地图上消失了,但框选后还是查得出来!所以方向还是不对,最后找到问题在IndexDB下的IDBObjectStore插件,名为dexie.js。
找到问题后却又试了半天,devices中的key要和list中匹配,取值的时候也从同样地方取等等……
var that=RefreshGarage.options;
var db = new Dexie("garage-info");
// 线删除缓存库
db.delete();
that.DB=db;
var schema = {
devices: "id,fzdw,x,y"
};
db.version(1).stores(schema);
db.open();
db.transaction('rw', db.devices,function () {
db.devices.bulkAdd(list);
})
2017.12.5
求一个经度或一个纬度的像素距离,找了一会儿找到一个经纬度换算实际距离的,然后用这个研究了半天(这个其实是日本人写的,只是粗略翻译了一下):http://blog.csdn.net/pipi0714/article/details/5987107。并且在地图上测出东南福建(117, 24)和西北新疆(86, 47)两个点的情况,其中经度差一度的值相距很小,都约为111公里,而纬度差一度就比较大了,福建约为101公里,新疆约为75公里,南北差距还不小……
var wei = 24;
var jing = 117;
var wei_hu = wei * Math.PI / 180;//弧度转换
var jing_hu = jing * Math.PI / 180;
var POLAR_RADII = 6356752;//北极的半径
var EQUATOR_RADII = 6378137;//赤道的半径
var m_refY = POLAR_RADII + (EQUATOR_RADII - POLAR_RADII ) * (90 - wei) / 90;//纵轴参照距离
var m_refX = m_refY * Math.cos(wei_hu);//横轴参照距离
var p_wei_hu = (wei - 1) * Math.PI / 180;
var p_jing_hu = (jing - 1) * Math.PI / 180;
var dx = Math.abs((p_jing_hu - jing_hu) * m_refX);//两点相对距离
var dy = Math.abs((p_wei_hu - wei_hu) * m_refY); console.log(dx); console.log(dy);
结果最终在地图上用截图看两点像素时却发现!一经/纬度差的像素值其实就是分辨率!于是一个:var resolution = 1 / mapObj.getView().getResolution();就搞定了!
2017.12.6
一个CodeMirror的html代码编辑器需要引用这么多东西:
2017.12.7
研究了好久的在线代码演示终于搞定了,一开始我就在想这是前端还是要涉及后端的功能,最开始用的是找iframe改变html代码的思路,其实这条路没错,只是方法错了,用的是:$("iframe").contents().find("html").html(content);虽然body能变,但JQuery莫名其妙报错,让我以为这条路走不通……
于是我想到FreeMarker要实现这功能不难啊,只要把数据传到空的html页面上并显示出来就够了,所以开始研究新用的spring boot框架,传参、显示都已经研究完了(顺带还研究了一个数据写入,但问题在于写完的html是不会立马发生改变的,因为它真正读取的是工程下target/classes的复制文件),之后发现最大的难题是要把参数显示到iframe里是个难事:
@RequestMapping(value = "/getHTML", method = RequestMethod.POST) @ResponseBody public void data(@RequestParam("html") String html) throws IOException {
File file=new File("modify.html");
PrintWriter out=new PrintWriter(file);
out.write(html.toCharArray());
out.flush();
out.close();
} @RequestMapping("/hello/{name}") public String hello(@PathVariable("name") String name, Model model) {
model.addAttribute("name", name); return "a";
}
注:RespnseBody不加是找main/resources/templates下的X.html页面,加了就是返回真正的字符串。
最后的最后!突然机智地研究了一下某网站的原代码,看它是怎么实现的,结果发现!它就是纯前端的功能,iframe有重新加载代码的功能:
var content = CodeMirrorEditor.getValue();
var mapcon = document.getElementById("d_platform_map");
var pre = document.getElementById("d_platform_iframe");
mapcon.removeChild(pre);
mapcon.appendChild(pre);
previewContent = pre.contentDocument || pre.contentWindow.document;
previewContent.open();
previewContent.write(content);
previewContent.close();
2017.12.12
其实还是一帆风顺的,记录下拿来修改的代码Jquery搜索框效果(百度关键词联想):
http://blog.csdn.net/wulex/article/details/52245342
2017.12.15
添加的时候给个回调函数,等删除时再拿出来用。之前写习惯了暂存都扔html上,居然没想到放到JS用个变量储存起来!
2017.12.21
IDEA+MAVEN的代理使用大致明白了,先写一个ServerFilter的java,然后在application.properties配置哪个path下走哪个url就好了
2018.1.9
一个滚动数字的插件accounting.min.js居然浪费了我一点时间,问题在于:
var el = $('#d_head_all')[0];
Head.options.Odometer = new Odometer({
auto: true,
el: el,
value: 0,
format: '(,ddd)',
theme: 'default'
});
// Head.options.Odometer.update(seconds);
用JQuery获取对象时,我忘了它获取的和document获取的还不太一样,尽管获取ID也是一个串。
2018.1.13
做了一个环形的选择按钮,还费了点时间,找了各种方法,大多是border的变种,虽然那样一个就能分成四份,但是没有边框!因为它填充的本身就是边。后来找到了css的clip,它切出来的扇形是可以加border的(只能加最外圈),于是用四个扇形拼出了(任意个都行)【后续,只用一个满圆+一个切扇形即可,然后操作扇形的角度】:
中间的按钮后来也没用了,现在只是装饰,用mouseleave解决了离开就消失的问题,它和mouseout还不一样。
2018.1.19
闪烁的圆用CSS实现(IE无效),最大的问题其实在于,为什么-webkit-这是谷歌的标识,而火狐却也能识别,而IE不管怎么写都没有用……:
.c-multi-reddot:before{
content:' ';
position: absolute;
z-index:2;
left:0;
top:0;
width:10px;
height:10px;
background-color: #ff4200;
border-radius: 50%;
}
.c-multi-reddot:after {
content:' ';
position: absolute;
z-index:1;
background-color: #ff4200;
border-radius: 50%;
box-shadow: 0 0 10px rgba(0,0,0,.3) inset;
-webkit-animation-name:'ripple';/*动画属性名,也就是我们前面keyframes定义的动画名*/
-webkit-animation-duration: 1s;/*动画持续时间*/
-webkit-animation-timing-function: ease; /*动画频率,和transition-timing-function是一样的*/
-webkit-animation-delay: 0s;/*动画延迟时间*/
-webkit-animation-iteration-count: infinite;/*定义循环资料,infinite为无限次*/
-webkit-animation-direction: normal;/*定义动画方式*/
}
@keyframes ripple {
0% {
left:5px;
top:5px;
opcity:75;
width:0;
height:0;
}
100% {
left:-20px;
top:-20px;
opacity: 0;
width:50px;
height:50px;
}
}
绕着中心旋转的CSS,关键在于中心transform-origin,参考链接http://www.jq22.com/jquery-info15184:
.c-query-items{
transition: all 1.2s ease-in-out;
border-left: 28px solid transparent;
border-top: 1px solid transparent;
font-size: 0.65em;
left: 50%;
list-style: none;
position: absolute;
top: 50%;
transform-origin: 0 0;
line-height: 0;
}
.c-query-items1{
transform:rotate(270deg);
}
.c-query-items2{
transform:rotate(0deg);
}
.c-query-items3{
transform:rotate(90deg);
}
.c-query-items4{
transform:rotate(180deg);
}
2018.1.23
困扰了我好久好久的旋转自体模糊问题终于解决了……最早的解决方法是换成宋体,但某龟毛的上司硬要微软雅黑……然后试了很多种方法,只换class不行,想改animate没有,换成图片……更麻烦得多(对齐、旋转、hover变色)!最后的最后,终于发现了我一开始就找到的一种方法:transform: rotate(45deg) translate3d(0, 0, 0)完美解决,最开始我用3d行不通在于……我是新增一个transform:translate3d(0, 0, 0);,而不是在原基础上加。
2018.3.29
犯了一个严重的错误,ajax的优点在于异步,而我最近总写同步,结果在展开树的同步调用中卡了几秒……异步完全避免了这种事情发生。
所以,ajax其实要尽量用异步,无法异步的再用同步解决!
2018.4.10
找了各种canvas的点击方法,好多说要重绘用isPointInPath,试了半天,其实重绘是要,但可以不画出来,也就不需要清画布:
animationLayer.canvas.addEventListener('click', function(e){
var p = getEventPosition(e); //获取鼠标坐标
var c = animationLayer.canvas;
var ctx = c.getContext('2d');
for(var i = 0; i < data.length; i++){
var pixel = map.getPixelFromCoordinate([data[i].x,data[i].y]); //地点对应html坐标
ctx.beginPath(); //开始点,如果不加会全地图跳动
ctx.arc(pixel[0], pixel[1], set.size, 0, Math.PI * 2, true);
if (ctx.isPointInPath(p.x,p.y)){ //如果鼠标点入圆点
console.log(data[i]);
return;
}
}
}, false);
2018.4.28
关于maven+spring打war包的问题,首先
在
之前的build注释掉/删除,改成:
上面对应配置的java中多加一层继承(main不动):
public class DemoApplication extends SpringBootServletInitializer {
@Override
protected SpringApplicationBuilder configure(SpringApplicationBuilder builder){
System.out.println("初始化加载……");
return builder.sources(DemoApplication.class);
}
然后clear->compile->package(有引入其他包的话,编译时还会报错,到时候搜索再依附一下),打成war包后,把它扔到tomcat里,如果是新的注意改三个端口号以免冲突,最后在application.properties里把port改成对应的tomcat端口即可。
改回本地运行时,需要把java继承和
2018.7.4
Jquery版本问题真是太恶心了,3.2.1因为没有live功能,改成on怎么改怎么报错……报的还是个莫名其妙的“V[g].exec is not a function”,我把官网的示例贴进来都一样错!想换bind也不行……之后只好换回1.7.1,结果它在$keyword.css({display: "none"});中还报个错,莫名其妙,明明在Demo里都是好好的,改成.hide()就好了。