最后
技术是没有终点的,也是学不完的,最重要的是活着、不秃。零基础入门的时候看书还是看视频,我觉得成年人,何必做选择题呢,两个都要。喜欢看书就看书,喜欢看视频就看视频。最重要的是在自学的过程中,一定不要眼高手低,要实战,把学到的技术投入到项目当中,解决问题,之后进一步锤炼自己的技术。
开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
技术学到手后,就要开始准备面试了,找工作的时候一定要好好准备简历,毕竟简历是找工作的敲门砖,还有就是要多做面试题,复习巩固。
1.2 css布局(style.css)
@charset “UTF-8”;
html{
height: 100%;
font-size: 16px;
}
body{
font-family:-apple-system-font, “Helvetica Neue”, sans-serif;
-webkit-font-smoothing: subpixel-antialiased;
}
body, a, h1, h2, h3, h4, h5, h6, ul, li, dl, dt, article, section, div, p, header, footer, menu, input, img{
margin: 0;
padding: 0;
}
img{
vertical-align: middle;
}
p, h1, h2, h3, h4, h5, h6,ul{
-webkit-margin-before: 0;
-webkit-margin-after: 0;
-webkit-padding-start: 0;
-moz-margin-before: 0;
-moz-margin-after: 0;
-moz-padding-start: 0;
-moz-padding-end: 0;
}
/* clear float */
.clearfix:after {
content:“”;
display: block;
clear:both;
}
/* Responsive Layout */
li{
list-style: none;
}
a{
text-decoration: none;
}
input{
-webkit-appearance: none;
}
input:focus{
outline: none;
}
header{
height: .88rem;
border-bottom: 1px solid #ccc;
background-color: #fff;
}
.header-back{
width: .36rem;
height: .36rem;
float: left;
margin-top: .27rem;
margin-left: .28rem;
}
.header-title{
float: left;
font-weight: 600;
width: 90%;
font-size: .36rem;
color: #333;
text-align: center;
line-height: .88rem;
}
.container{
font-size: 24px;
text-align: center;
padding-top: 50px;
}
.lottery{
font-size: .32rem;
width: 6rem;
height: 6rem;
margin: .2rem auto;
display: flex;
display: -webkit-flex;
flex-wrap: wrap;
border: 1px solid #000;
}
.item{
width: 2rem;
height: 2rem;
line-height: 2rem;
color: orangered;
font-weight: bold;
text-align: center;
border: 1px solid orangered;
box-sizing: border-box;
background-size: 100%;
}
.active{
background: #ffe6cc;
}
button:focus{
outline: none;
}
.lottery-item-0{
background-image: url(‘…/img/huawei.png’);
}
.lottery-item-1{
background-image: url(‘…/img/iphone.jpg’);
}
.lottery-item-4{
background-image: url(‘…/img/xiaomi.jpg’);
}
.lottery-item-7{
background-image: url(‘…/img/xiaoxiong.jpg’);
}
.lottery-item-3{
background-image: url(‘…/img/xiaodu.jpg’);
}
.lottery-item-6{
background-image: url(‘…/img/dfs.jpg’);
}
.lottery-item-5{
background-image: url(‘…/img/bingxiang.jpg’);
}
-
此工具函数传入一个二维数组,用于调整概率
-
默认商品概率相同,调用的时候 randomNum() 时候不传参数即可
-
也可以自由设置概率
function randomNum(arr){
// 1. 容错处理
arr = arr || [];
// ES6 Map对象: 键与值的集合 方便访问其键与值
let m = new Map(arr);
// 计算概率
let probability = 0;
// console.log(m.values())
for (const i of m.values()) {
probability += i;
}
if(probability > 1){
// 给一个友好的提示
alert(“概率总和不能大于1,小学数学是体育老师教的???”);
return false;
}
// 剩下没有定义的各自能占多少概率。
// size 返回映射中的元素数
let remainProbability = (1 - probability) / (8 - m.size);
console.log(remainProbability)
// 生成随机值,跟i对应的概率比较,
let res = 0, r = Math.random();
for (let i = 0; i < 8; i++) {
// 有就取值 没有就随机取
m.has(i) ? res += m.get(i) : res += remainProbability;
// console.log("res= "+ res);
// console.log("r= "+ r);
if (res > r) {
return i;
}
}
}
let step = 0, //计数器
timeInterval = 2, //速度控制器
final, //最终位置
looperFun, // setTimeout的返回值
prizeList = [‘华为’, ‘iPhone X’, ‘谢谢惠顾’, ‘小度音响’, ‘手环’, ‘格力冰箱’, ‘电风扇’, ‘小熊抱枕’];
// 开始游戏
function start(e){
if(e.target.dataset.able === “1”){
// 随机0-7
// 设置抽奖概率 不传参的话这几个商品几率相等
// let arr = [[0,0],[1,0.5],[2,0],[3,0],[4,0],[5,0],[6,0],[7,0]];
// final = randomNum(arr);
final = randomNum(); // 这里不传参 概率均等
console.log(final);
if(final === false){
console.log(“出错了”);
return false;
}
e.target.setAttribute(‘data-able’, 0);
looperFun = setTimeout(looper, 100);
计算机网络
-
HTTP 缓存
-
你知道 302 状态码是什么嘛?你平时浏览网页的过程中遇到过哪些 302 的场景?
-
HTTP 常用的请求方式,区别和用途?
-
HTTPS 是什么?具体流程
-
三次握手和四次挥手
-
你对 TCP 滑动窗口有了解嘛?
-
WebSocket与Ajax的区别
-
了解 WebSocket 嘛?
-
HTTP 如何实现长连接?在什么时候会超时?
-
TCP 如何保证有效传输及拥塞控制原理。
-
TCP 协议怎么保证可靠的,UDP 为什么不可靠?
开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
算法
-
链表
-
字符串
-
数组问题
-
二叉树
-
排序算法
-
二分查找
-
动态规划
-
BFS
-
栈
-
DFS
-
回溯算法
-
HTTP 如何实现长连接?在什么时候会超时?
-
TCP 如何保证有效传输及拥塞控制原理。
-
TCP 协议怎么保证可靠的,UDP 为什么不可靠?
开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
算法
-
链表
-
字符串
-
数组问题
-
二叉树
-
排序算法
-
二分查找
-
动态规划
-
BFS
-
栈
-
DFS
-
回溯算法