目录
分时间问候案例
根据系统不同时间,所以需要时间内置对象
利用多分支语句设置不同图片
需要一个图片,根据时间修改图片,用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” 在新窗口打开链接。