学js的第1天

目录

分时间问候案例

 DOM操作表单元素

 仿京东显示隐藏密码案例

js改变元素大小 元素 颜色 位置 等样式

---

分时间问候案例

根据系统不同时间，所以需要时间内置对象

 利用多分支语句设置不同图片

需要一个图片，根据时间修改图片，用src操作

需要一个div元素，显示不同问候语句，修改元素内容即可。

思路

第一步需要一个src来确定图片地址格式

然后下面加一个div 里面加上文字

然后用document.querySelector()把src 和div拿过来

第二步用时间来判断

判断时间就需要时间函数 

var date  = new Date();

然后得到小时

var hour= date.gethours()；

接着用小时来判断，

小时怎么判断呢 if elseif if

如果小时小于12就是上午 小于18就是下午

其他就是晚上

第三步更改代码时间

img.src = ''

div.innerHtml= '

这里记住不要用innerText.然后就开始改吧 

代码如下

 DOM操作表单元素

首先说一下概念 就是点击按钮 然后里面的文字变了。

然后这里面步骤都一样需要注意的点就是 记得表单里面代表数字的元素是value 

 如果想要按钮被禁用：  btn.disabled = true;  disabled的意思是不能被使用 = true就意味着可以不被使用。

 仿京东显示隐藏密码案例

 

 首先还是先理清思路 创建一个外面的大盒子 然后里面再创建两个小盒子

首先写好盒子样式 

然后接着用 input 样式 

然后再添加图片 用绝对定位调整图片位置

这一切调整好了之后

把眼睛图片和文本框密码吸取过来

然后用算法 算法利用FLAG变量

先让flag =0

然后 眼睛onclick点击触发

然后if语句 如果 flag=0 则并且正确就改变 眼睛位置的图片 然后passward 密码格式改成text 显示出密码  并且让flag=1

接着再写一天点击眼睛 让 flag =0 并且text 改成password 接着改变眼睛位置图片。

代码如下

js改变元素大小 元素 颜色 位置 等样式

修改元素的时候，比如backgroundcolor 

记得 加上 this.style.backgroundColor 

加style 然后加上驼峰写法 然后js修改属性采用的是行内式 优先级比较高 。

点击粉变紫色。

循环精灵图

做成这个效果 首先li 然后用精灵图 background position来进行定位

思路理清楚 美工给的精灵图必然是有规律的 然后抓住规律用 for循环 

 直接说注意的点吧 首先遍历所有的 i 然后 改变 y坐标  qswe是你找到的规律 因为qswe是变量不是字符 所以得放到外面去

变量不要写到字符串里面 是通过和字符串相连方式实现的 有变量就‘++’

 显示文本框隐藏内容

首先解释下这个事件的意思 就是点击文本框的时候 里面的提示字消失 不点击如果里面没有输入字的时候则出现

 

onfocus：事件在对象获得焦点时发生。

即当鼠标点击时后台就显示获得焦点

onblur： 事件会在对象失去焦点时发生

即当鼠标点击另一处时所触发的事件 后台就显示失去焦点

思路 放一个input 文本框 里面value写着手机 把颜色调暗点

然后 获取元素

接着调用元素

 onfous 和onblur更多的是用在 一个事件上 他类似点击 onlick 

然后在焦点上的时候 如果里面数值value等于手机 就让他变成空数组  好让用户输入东西

然后让颜色变深

接着不在焦点上的时候就让 如果等于 空 就让value 等于手机 并且把颜色变浅。

class name

一般在修改元素的时候都是 this.style之类的 然而这种太复杂了所以 采用的方法是 style里面重新加一个类名 把所有要改的东西都放到里面。 用this.className这个格式直接把类名改掉 。集体变换

变换后类名会被代替。

也有不被替代的方法就是加一个空格把他之前的类名也写上 比如之前 class=‘first’ 接下来就写变成

class='first buck'大致是这个意思

 操作元素

 作业

本次作业注意两点 1.outline：none 这个是什么意思 

加outline：none前

 

加后

 就没有这个黑色的框框恢复正常

新看到的不认识的属性

 

 

 

traget=“—blank”  在新窗口打开链接。