DOM—分时问候并显示不同图片案例
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>img {width: 300px;}</style></head><body><img src="/img/img/x.gif" alt=""><div>上午好</div><script>// 根据系统不同时间来判断，所以需要用到日期内置对象Date// 利用多分支语句来设置不同的图片// 需要一个图片，并且根据时间修改图片，就需要用到操作元素src属性// 需要一个div元素，显示不同问候语，修改元素内容即可//1.获取元素var img = document.querySelector('img')var div = document.querySelector('div')//2.获得当前小时数var date = new Date()var h = date.getHours()//3.判断小时数来修改图片和文字信息if(h < 12){img.src = "/img/img/x.gif"div.innerHTML ='上午好'}else if(h < 18){img.src = "/img/img/x.gif"div.innerHTML = '下午好'}else{img.src = "/img/img/x.gif"div.innerHTML = '晚上好'}</script></body></html>
DOM—操作属性控制电灯开关
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title></head><body><img src="/img/off.gif" alt=""><script>//1--获取img元素对象var img = document.querySelector('img')//定义一个标记变量var flag = false //灯灭了，false代表灯是灭的，跟灯的状态保持一致/*2--调用方法操作元素的属性light.src = '/img/on.gif' //设置src的属性的值var str = light.src //获取src属性的值console.log(str);//http://127.0.0.1:5500/img/on.gif*///2--绑定事件img.onclick = function(){if(flag == false){img.src = "/img/on.gif"flag = true //灯亮了,将flag设置为true}else{img.src = "/img/off.gif"flag = false //灯灭了，将flag设置为false}}</script></body></html>
DOM—仿京东搜索框案例
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>input {color: #999;}</style></head><body><input type="text" value="婴幼儿奶粉"><script>// 需求:// 文本框获得焦点时, 文字颜色变浅, 文本框的内容清空// 文本框失去焦点时, 颜色恢复, 文本框为空时, 提示内容//获得文本框var text = document.querySelector('input')//添加获得焦点事text.onfocus = function(){/* console.log('获得焦点'); */text.style.color='#333'if(text.value='婴幼儿奶粉')text.value=''}//添加失去焦点text.onblur = function(){/* console.log('失去焦点'); */text.style.color='#999'if(text.value ==''){text.value='婴幼儿奶粉'}}</script></body></html>
DOM—书架案例
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title><!--这本书名为<<abc>>,zhangsan编著的书，折扣为:0.8折，折扣后价格为:96--></head><body>书名：<input type="text" id="bookname" name="bookname" ><br/>作者：<input type="text" id="bookauthor" name="bookauthor" ><br/>价格：<input type="text" id="bookprice" name="bookprice" ><br/>折扣：<input type="text" id="booksale" name="booksale" ><br/><input type="button" id="totalBtn" value="计算折扣价"><script>//获取计算折扣的按钮对象var btn = document.getElementById("totalBtn");//添加点击事件btn.onclick = function () {//获取文本框里面的值//方法一:通过id/*var bookname = document.getElementById("bookname").value;var bookauthor = document.getElementById("bookauthor").value;var bookprice = document.getElementById("bookprice").value;var booksale = document.getElementById("booksale").value;*///方法二:通过TagName/* var bookname = document.getElementsByTagName("input")[0].value;var bookauthor = document.getElementsByTagName("input")[1].value;var bookprice = document.getElementsByTagName("input")[2].value;var booksale = document.getElementsByTagName("input")[3].value; *///方法三：querySelector()var bookname = document.querySelector("#bookname").value;var bookauthor = document.querySelector("#bookauthor").value;var bookprice = document.querySelector("#bookprice").value;var booksale = document.querySelector("#booksale").value;//计算var price = bookprice * booksale;//拼接var s = "这本书名为<<"+bookname+">>,"+bookauthor+"编著的书，折扣为:"+booksale+"折，折扣后价格为:"+price;//弹出alert(s)}</script></body></html>
DOM—留言板
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><style>* {margin: 0;padding: 0;}body {padding: 100px;}textarea {width: 200px;height: 100px;border: 1px solid skyblue;outline: none;resize: none;}ul {margin-top: 40px;}li {width: 300px;margin: 10px 0;background-color: blueviolet;color: #fff;}</style></head><body><textarea></textarea><button>发布</button><ul></ul><script>//提示会用到createElement方法 和 insertBefore方法//创建一个元素对象var ul = document.createElement('ul')//获取DOM元素对象var textarea= document.querySelector('textarea')var button= document.querySelector('button')var ul= document.querySelector('ul')//给btn添加点击事件button.addEventListener('click',function(){//判断：如果文本域中没有内容，弹出提示框并结束代码if(textarea.value == ''){alert('请输入内容')return//结束内容}//创建ul元素var li = document.createElement('li')//将文本域中的内容赋给li元素li.innerHTML = textarea.value//将li添加到ul中//ul.appendChild(li)//在父级元素的子元素后面追加元素ul.insertBefore(li,ul.children[0])//在父级元素的子元素前面//每次添加结束之后清空文本域中的内容textarea.value=''})</script></body></html>
BOM—发送短信
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title></head><body>手机号: <input class="ipt" type="text" /> <button class="btn">发送</button><script>//获得var ipt = document.querySelector('.ipt')var btn = document.querySelector('.btn')//定义一个计数器var count = 3//添焦btn.addEventListener('click',function(){//1.禁用按钮btn.disabled = true//2.启动定时器var timer = setInterval(function(){//4.当count的值减到0的时候，结束定时，恢复按钮的状态if(count<=0){clearInterval(timer)btn.disabled=falsebtn.innerHTML='发送'count=3return}//3.倒计时时间显示在按钮上btn.innerHTML = count +'秒重试'count--},1000)})</script></body></html>
BOM—5秒后自动跳转页面
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>自动跳转</title><style>p{text-align: center;}span{color:red;}</style></head><body><p><span id="time">5</span>秒之后，自动跳转到首页...</p><script>/*分析：1.倒计时读秒效果实现1.1 定义一个方法，获取span标签，修改span标签体内容，时间--1.2 定义一个定时器，1秒执行一次该方法2.在方法中判断时间如果<= 0 ，则跳转到首页*/var second = 5function showTime(){second--;//判断if(second<=0){location.href='http://taobao.com'}//获取span标签var time = document.querySelector('#time')time.innerHTML=second}setInterval(showTime,1000)</script></body></html>
DOM—动态表格
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>动态表格</title><style>table{border: 1px solid;margin: auto;width: 500px;}td,th{text-align: center;border: 1px solid;}div{text-align: center;margin: 50px;}</style></head><body><div><input type="text" id="name" placeholder="请输入姓名" autocomplete="off"><input type="text" id="age" placeholder="请输入年龄" autocomplete="off"><input type="button" value="添加" id="add"></div><table id="tb"><caption>学生信息表</caption><tr><th>姓名</th><th>年龄</th><th>操作</th></tr><tr><td>张三</td><td>23</td><td><a href="JavaScript:void(0);" onclick="drop(this)">删除</a></td></tr><tr><td>李四</td><td>24</td><td><a href="JavaScript:void(0);" onclick="drop(this)">删除</a></td></tr></table></body><script>//一、添加功能//1.为添加按钮绑定单击事件document.getElementById("add").onclick = function(){//2.创建行元素let tr = document.createElement("tr");//3.创建3个单元格元素let nameTd = document.createElement("td");let ageTd = document.createElement("td");let deleteTd = document.createElement("td");//4.将td添加到tr中tr.appendChild(nameTd);tr.appendChild(ageTd);tr.appendChild(deleteTd);//5.获取输入框的文本信息let name = document.getElementById("name").value;let age = document.getElementById("age").value;//6.将2个文本元素添加到td中nameTd.innerHTML=name;ageTd.innerHTML=age;//8.创建超链接元素和显示的文本以及添加href属性let a = document.createElement("a");a.setAttribute("href","JavaScript:void(0);");a.setAttribute("onclick","drop(this)");a.innerHTML='删除';//9.将超链接元素添加到td中deleteTd.appendChild(a);//10.获取table元素，将tr添加到table中let table = document.getElementById("tb");table.appendChild(tr);}//二、删除的功能//1.为每个删除超链接标签添加单击事件的属性//2.定义删除的方法function drop(obj){//3.获取table元素let table = obj.parentElement.parentElement.parentElement;//4.获取tr元素let tr = obj.parentElement.parentElement;//5.通过table删除trtable.removeChild(tr);}</script></html>
BOM—抽奖案例
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title></head><body><span id="layer">000000</span><input id="btn" type="button" value='生成随机数'/><script>//生成随机数 范围是 [100000-999999]//Math.floor(Math.random()*(max-min + 1)) + min;//999999-100000=899999+1=900000/*var num = Math.floor(Math.random()*(900000)) + 100000;alert(num)*//*1,定义一个方法,不断的修改span的标签体的值2,获取按钮对象,添加点击事件3,在事件中,点击开启定时,再点击关闭定时*///定义一个方法,不断的修改span的标签体的值function startRoll() {//获取span标签对象var span = document.getElementById("layer");//修改标签体的值span.innerHTML = Math.floor(Math.random()*(900000)) + 100000;}//获取按钮对象var btn = document.getElementById("btn");//设置标记,来切换var flag = false;//定义变量,保存定时器的idvar id;//添加点击事件btn.onclick = function () {if (flag){//关闭定时clearInterval(id);flag = false;}else {//启动定时id = setInterval("startRoll()",10)flag = true;}}</script></body></html>
offset动画固定缓慢向右移动原理
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div{width: 150px;height: 150px;background-color: red;position: absolute;}</style></head><body><div></div><script>//1--获得盒子当前位置//2--让盒子在当前位置上+1个移动距离//3--利用定时器不断重复操作//4--加一个结束定时器的条件//5--element.style.left需要添加定位才能实现功能var div = document.querySelector('div')var timer = setInterval(function(){if(div.offsetLeft >= 400){clearInterval(timer);}div.style.left = div.offsetLeft + 1 +'px';},30);</script></body></html>
若有收获，就点个赞吧
0 人点赞
