（日常记录 高德api）+第二周工作总结+ 三周

(一)总结

这周收获还蛮多的~

1、自身上说，本来比较反感前端了，受同学之拖帮忙安卓，看了Android代码之后……  啊我前端不论是环境啊轻量级啊奇怪的bug啊什么什么的都好棒（但我不喜欢css嘤嘤嘤  css烂烂 喜欢js~~~）

2、业务上说，做了fcc，感觉到自己在小细节上比较差，然后不知道一些名词，很喜欢那种解题模式~ 希望可以慢慢学吧。很多不熟。

还有精益求精之。官网我觉得都ok了，haibin又吭哧吭哧改了两天，还改了一堆代码。。。各种适配都考虑到了~ 学习~

3、人际上说，上周外面就我1人，挺想辞职的。。现在每天5、6人吧，氛围有一点，虽然我还是每天上班先划一小时并且看股票。。。大家都挺友好的~~ 帮王老板识破了360骗局，一起薅水果的羊毛，cc帮我点的外卖王先生，另外两个王愣了，“你也是王先生了” 2333 ，小姐姐也好好~

4、眼睛还是不太行0 0只能多休息休息。我发现我脊柱什么的 洗衣服都低着头其实可能只是我看不清  啊 嘤嘤嘤 人家洗头怎么不低着头呢

(二)小知识点

前两天官网，周三划水，周四五fcc+地图.

1/ vw

在桌面端浏览器视口尺寸为650px，那么 1vw = 650 * 1% = 6.5px（这是理论推算的出，如果浏览器不支持0.5px，那么实际渲染结果可能是7px）。
100%和100vh/vw的区别。
% 是相对于父元素的大小设定的比率。
vh是视窗大小没跑了.
====================================
2/ 学会了cssrem的使用！
css rem 插件重新加载一下, 加载完成可以之后 这个插件方便在可以直接转换~ 写代码的时候写到px，然后就变成rem了
【rem是什么？？】
3/ 但是 楼上这个
设计图是按照750px给的 iPhone 6/7/8宽度大概是375 也就是一半
所以设计图  的字体 基本上3:5应用到项目吧
3(实际代码):5(设计图)
可以直接把蓝湖缩小,手机放在旁边对比,就知道大概字体关系了,(具体多大可以自己思量~)
4 / background这个 , 回看contain.. space round 反正四个组合起来也可以23333
5 / 今天写的媒体查询
还是遵从这个原则 下面的@media把上面的都复制来
改的话不能注释 而是改成0来取消相应的属性.
总之今天写的挺顺的
但是被那个股票和外卖扰乱了心智
这都是小钱 但是如果叫他们牵绊住你就不好了 对不对 嘤嘤嘤
6 / css开头空两格(段落)
p{text-indent:2em;}
7 / 这个很好用! 
比如手机端给了图片，手机端的实际
background: url(/images/banner_phone_2.png) space center;
      background-size: cover;
8/  发现在蓝湖 直接按 Alt 就会显示百分比 不用自己算了
9 / 按钮的居中
vertical-align:middle;
10/ jquery的小例子
$("p").html("hello");
这个是把所有的p的内容都改成hello（但是保留<p></p>外面的标签  还有p的class属性什么的.
注意引号，表意为 把<p>的html内容都改成后面这个hello~
【再注意一下：这里会：覆盖.html(****) 括号里面的内容~~  
var img='<img class="simg" ...>'这样不会覆盖
var img=$('p')就不行，因为p里面的内容这样就会被覆盖掉了~
我们理解一下，只要凡是你$('p')这样一下，就等于这样选取了这个标签符合的所有元素~【应该是返回了个数组~ 很多个】
$("p").html(function(n){
    return "这个 p 元素的 index 是：" + n;
    });
若这样写，就是对数组每个都return一个index。多写写总会知道吧~
11 /
li:nth-child (n+2)
在这个元素下，li的父元素的第几个子元素，并且这个子元素还是li才能满足触发条件。n+2，n可以看做从0开始的，然后这个1 2 3 是“第” 几个  它不是从0而是从1开始的。写的几就是几,n+2就是第2个开始,也就是跳过父元素的第一个子元素去找。
 &>div:nth-child(n+2) {
    $> 直选.service这些  不然下面div只要满足这个有div的条件，都会把这条语法适应包括进去
  &> 是less里面的& >语法
css里面就这样写.service>div: 
只选.service下跟着的这一级div.
12 / (相比css还是喜欢js一点)
js  可以用for循环 也可以in~ for的话也是id比较方便嘤嘤嘤
自己直接在console控制台打印即可~~~~~  要什么代码草稿纸。
in具体是:
【用作循环(let 变量 in 对象) ，①对数组: 取出数组的元素 ②对对象,取出对象的[属性][属性]】
【用作判断 :(变量 in 对象 )这时(1)数组 变量是index序号（是从0开始的 哦！大部分都是从0开始的） (2)对象 变量还是对象的属性。】
1、for...in 对数组或对象的循环/迭代操作
对于数组循环出来的是数组元素；对于对象循环出来的是对象属性

 

 

 

 2、判断对象是否是数组/对象的元素/属性

格式：（变量 in 对象）
当‘对象’是数组时：“变量”指的是数组的“索引”；
当‘对象’为对象是，“变量”指的是对象的“属性”。

 

 ↑ https://www.cnblogs.com/memphis-f/p/12073013.html

(三)地图小demo

1/
map.add([marker1,marker2,marker3]);
        map.add(marker2);
【经验】只是往map里批量添加可以啊，但是你要确保你批量进去的是数组【可以】。
2/ open 不能当函数名啊 嘤嘤嘤
3/ 一些小问题
js动态更改  
document.getElementById("alertForm").style.display="block";

这句笨笨！display设成""无效，要有属性值。

js动态打开
window.open(....)新页面
window.location.href=("video.html");本地刷新可回退

4/ 啊 三元表达式和if not 逻辑要自己想清楚~ 不然无穷无尽的调bug鸭

注意小细节。，我发现我
【非常】“差不多得了”
而且由此，非常不注意小细节
5/ 看官方文档!
这里  比乱七八糟搜索百度强多了。。你知道marker，直接看到hide（）show()方法，，。，。。 就可
6/ 自己单独写一个页面~记得body 有默认边距。 
*{padding:0;margin:0; }

手机端自适配加上这句话

<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">

不单单是自适配，简单的字体大小和窗口大小的区分也要用到。！！！！

不加缩放的话谷歌字体极其小，火狐比较正常。
7/ list-style: none; 去掉li的圆点
text-decoration:underline 下划线，但是， 一般用border-bottom更好。下划线太近了
稍微加个小特效 transition: border-bottom .5s, color .5s;
单纯下拉栏目的话，最好有一个已经是re选中已选中的状态。
8/ js控制。显示与隐藏... 直接操作,虽然不太好.. 
document.getElementById("li2").style.display = "none";
document.getElementById("li3").style.display = "";

【↑感觉这个不是设置成默认，而是给取消。如果原来有，那就是原来的，如果没有，才是默认的。】

display=""有时候会不生效，原因是这句话只是"回到默认css里定义的效果"，不是默认到展示出的效果。默认的是none，那么""的话还是none，这时候对它没用。
问题来了，如果换用visibility，那么会占据空间，做不到隐藏效果。
怎么办呢？
============================补充一些网页上的... 看一下批量使用,表格和自己的demo尽量优化,展示全部,...,,
============================
1 day急速出demo
地图demo,我td tr表格非常不熟、select选中状态不会、radio不会，动画不会，本来稍微加个动画锦上添花吧！！！
能力范围有限，圈在button和onclick里面，项目经验还不够鸭嘤嘤嘤，太不熟
【写不出来了。。。 回去再总结吧if 有】
使用表格蛮好的哦。直接对齐，直接放到元素里自动换行，自己写p和span麻烦一些。但是表格需要再学习：
写一下
(四)啊 那个 img适配的原因(补充)
 
 emmm....background-size contain cover
background-repeat space round
这个试试具体我没看
这里复制一下可用的代码吧
这么写  emmmm  背景适配不了的话就用img
用img要周围没白边 要自适配调整大小
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport"
    content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
  @@include('../common/favicon.html')
  @@include('../common/link_common_css.html')
  <link rel="stylesheet" href="./css/demo_detail.min.css">
  <title>xxxx</title>
</head>

<body>
  @@include('../common/header.html')
  <div class="content">
    <div class="p1 fix-img"></div>
    <div class="p2 fix-img"></div>
    <div class="p3 fix-img"></div>
    <div class="p4 fix-img"></div>
    <div class="p5 fix-img"></div>
    <div class="p6 fix-img"></div>
  </div>
  @@include('../common/footer.html')
</body>
<script src="./js/index.min.js"></script>
<script src="./js/common.min.js"></script>
<script>
  var winw = document.body.clientWidth;
  var simg = '<img class="fimg" src="" alt="">'

  $(document).ready(function () {
    $('.fix-img').html(simg)
    var getimg = $('.fimg')
    for (i = 0; i < getimg.length; i++) {
      if (winw > 778) {
        getimg[i].setAttribute("src", "./images/example_1_0" + (i + 1) + ".png")
      }else {
        getimg[i].setAttribute("src", "./images/example_1_mb" + (i + 1) + ".png")
      }
    }
  })
</script>

</html>

css(less)

.fix-img {
  width: 100vw;

  .fimg {
    width: 100%;
    height: 100%;
    object-fit: cover;
    vertical-align: middle;
  }
}

vertical-align是为了消除图片之间的白边。

display：block或者font-size line-height都给到0也可以解决，原因是图片默认是基线baseline对齐的，改变对齐方式。（之前遇到过，我好想是margin设负解决的。。一个正常的可以自适配的网页还是需要多探究啊。。←之前我做的官网很多时候会失效。但自己做就没在意。。。因为官网的其他也老是失效，但是吧~~。。）

 
================================
第三周: 论划水

(后面几周可能都要放在这了... 0 0

2020/7/20~2020/7/26

这周的总结哦。
可能是到了一个必然会经历的阶段。。。。最开始新鲜或者抗拒，然后一周意气风发，然后随大流掉入凡尘

从周日看了夏洛特烦恼开始就走不出来，掉进大坑，看了两天沈马。然后没什么特别大的事情。。。一直想去看眼睛，非常的犹豫，然后广西那个项目开了个会，前三天好像就，做了一点frc，要么看一下uni app 要么就是划水，回家之后也没有画画，就是不停追王牌里面神马部分。周四就请假一天结果啥都没看出来，这周cc一直在做菜，晚上也基本都是八点开始吃饭洗碗，然后就差不多睡了，上班也是有点晚。

总之就是，下班也全在玩，几乎放弃努力，无组织无计划..
周五周六就要调休了，本来是想设计图周五给，周四实在也没事情做，前几天的垃圾状态里出不来，然后公司老王给了我一个官网那我就开始写，下午感觉很难因为他写的好烂，后面终于搞好了sass容易多了，也算是小有收获吧，写多页面也有心得，然后也不是那么觉得菜自己了 我还是会一点的

不过不错的部分就是因为小米手环，开始走路很多，甚至到了6天68pi的地步。

frc其实都还蛮好的，发现es6里面都有 其实js部分我要好好补一下
750的设计图用px写 只要是用二分之一的px就算固定住也问题不大，全是vw的话一睡要自己算，二是 遇到iPad其实vw还会失常，也不是万能的

关于object 背景cover cotain
flex理解更深刻了，可以，不过还是需要用的熟练
有时候直接flex然后居中很棒
还有。直接在vscode里面安装easy sass
建立sass文件夹 css文件夹 自动编译 网上也有css less什么转换的插件，理解非常深刻，如果是维护别人的代码，先不说他写的怎么样，每个人命名习惯不同，不用预编译的缩紧和层级关系真的没法活

[【有时间的话做了js的frc 还有官网的适配iPad还有 】

 
posted @ 2020-07-18 10:43  send/me/a/cat  阅读(203)  评论(0)  编辑  收藏  举报