写在前头
在我决定走前端时，大概是21年暑假，那时参加了学校的ACM集训，在坚持了一个暑假期间，我也认识到自己不是“小镇做题家” 。当然也没那做题的脑子。 之前都是一直偶尔兴趣来了学学前端。
大一折腾了很多其他的玩意(钱，嘻嘻嘻)，也赚到没几个硬币。现在大二开始好好准备春招。每天公众号打卡，没人看也无所谓。
春招倒计时
image.png
每日小结
有效学习时间
8h
学习内容
今天复习了css部分视频知识，有用户界面处理，利用vertical-align实现图片文字垂直居中对齐，图片底侧空白缝隙解决方案，文本溢出，巧妙运用等等。JS有循环精灵图，显示隐藏文本，通过className更改元素样式，仿新浪注册页面。
目前水平
HTML,CSS：看了某马的html，css网课，全敲完了一遍。菜鸟教程也看了一遍。
JavaScript：还在上着某马的课
预计这周将会把过去的html，css捡回来。
粗糙笔记
代码粗糙笔记 -- 知道自己每天学了啥就行，哈哈哈。
链接：https://gitmind.cn/app/doc/3655168824
密码：2498
// 循环精灵图
<script>
var lis = document.querySelectorAll('li');
for (var i = 0; i < lis.length; i++) {
var index = i * 44;
lis[i].style.backgroundPosition = '0 -' + index + 'px';
}
</script>
// 显示隐藏文本框内容
<input type="text" value="手机">
<script>
var text = document.querySelector('input');
text.onfocus = function() {
if (this.value === '手机') {
this.value = '';
}
this.style.color = '#333';
}
text.onblur = function() {
if (this.value === '') {
this.value = '手机';
}
this.style.color = '#333';
}
</script>
// 17-通过className更改元素样式
<body>
<div class="first">文本</div>
<script>
var test = document.querySelector('div');
test.onclick = function() {
this.className = 'first change';
}
</script>
</body>
// 仿新浪注册页面
<script>
// 首先判断的事件是表单失去焦点 onblur
// 如果输入正确则提示正确的信息颜色为绿色小图标变化
// 如果输入不是6到16位，则提示错误信息颜色为红色 小图标变化
// 因为里面变化样式较多，我们采取className修改样式
// 1.获取元素
var ipt = document.querySelector('.ipt');
var message = document.querySelector('.message');
//2. 注册事件 失去焦点
ipt.onblur = function() {
// 根据表单里面值的长度 ipt.value.length
if (this.value.length < 6 || this.value.length > 16) {
// console.log('错误');
message.className = 'message wrong';
message.innerHTML = '您输入的位数不对要求6~16位';
} else {
message.className = 'message right';
message.innerHTML = '您输入的正确';
}
}
</script>
网友评论