学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”  在新窗口打开链接。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值