移动网站设计尺寸,亚马逊网站首页,青岛网站建设邓巴迪,小说网站怎么做不违法目录 前言
目标
对象.innerText 属性
对象.innerHTML属性
案例
年会抽奖
需求
方法一
方法二
总结 前言
曾经沧海难为水#xff0c;除却巫山不是云。 目标
能够修改元素的文本更换内容
DOM对象都是根据标签生成的,所以操作标签,本质上就是操作DOM对象#xff0c;…目录 前言
目标
对象.innerText 属性
对象.innerHTML属性
案例
年会抽奖
需求
方法一
方法二
总结 前言
曾经沧海难为水除却巫山不是云。 目标
能够修改元素的文本更换内容
DOM对象都是根据标签生成的,所以操作标签,本质上就是操作DOM对象就是操作对象使用的点语法。如果想要修改标签元素的里面的内容则可以使用如下几种方式学习路径:
对象.innerText 属性
元素innerText 属性将文本内容添加/更新到任意标签位置显示纯文本不解析标签
!DOCTYPE htmlhtml langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title/headstyle.box { width: 100px; height: 100px;}/stylebodydiv classbox 这是文字的内容/divscript const box document.querySelector(.box); console.log(box.innerText); box.innerText strong这是修改后的内容/strong;//不解析标签/script/body/html
对象.innerHTML属性
元素.innerHTML属性将文本丙容添加/更新到任意标签位置
会解析标签多标签建议使用模板字符
!DOCTYPE htmlhtml langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title/headstyle.box { width: 100px; height: 100px;}/stylebodydiv classbox 这是文字的内容/divscript const box document.querySelector(.box); console.log(box.innerText); box.innerHTML strong这是修改后的内容/strong;/script/body/html
案例
年会抽奖
需求
从数组随机抽取一等奖、二等奖和三等奖显示到对应的标签里面。素材: html文件结构数组名单周杰伦, 刘德华, 郭富城, 周润发, 周星驰, 张学友 方法一
定义数组
添加监听器
获取随机数
使用类选择器进行选择
输出结果
!DOCTYPE htmlhtml langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title/headstyle.box { width: 100px; height: 100px;}/stylebodydiv classhonor strong年会抽奖/strong h1一等奖 span idone???/span/h1 h1二等奖 span idtwo???/span/h1 h1三等奖 span idthree???/span/h1 button idbtn开始/button/divscript const arr [周杰伦, 刘德华, 郭富城, 周润发, 周星驰, 张学友]; document.getElementById(btn).addEventListener(click, function () { if (arr.length 0) { alert(所有奖项已抽完); return; } const randomOne Math.floor(Math.random() * arr.length); document.getElementById(one).innerHTML arr[randomOne]; arr.splice(randomOne, 1); if (arr.length 0) { const randomTwo Math.floor(Math.random() * arr.length); document.getElementById(two).innerHTML arr[randomTwo]; arr.splice(randomTwo, 1); } if (arr.length 0) { const randomThree Math.floor(Math.random() * arr.length); document.getElementById(three).innerHTML arr[randomThree]; arr.splice(randomThree, 1); } console.log(arr); });/script/body
方法二 数组 prizeIds定义了一个包含奖项 id 的数组 prizeIds这样可以通过循环来访问每个奖项对应的 span 元素。 for 循环使用 for 循环来遍历 prizeIds 数组并且在每次循环中检查 arr 是否还有剩余元素。 随机选择和更新在循环内部随机选择一个数组元素并将其设置为对应奖项的 span 元素的文本内容然后从数组中移除该元素。 !DOCTYPE htmlhtml langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title/headstyle.box { width: 100px; height: 100px;}/stylebodydiv classhonor strong年会抽奖/strong h1一等奖 span idone???/span/h1 h1二等奖 span idtwo???/span/h1 h1三等奖 span idthree???/span/h1 button idbtn开始/button/divscript const arr [周杰伦, 刘德华, 郭富城, 周润发, 周星驰, 张学友]; const prizeIds [one, two, three]; document.getElementById(btn).addEventListener(click, function () { if (arr.length 0) { alert(所有奖项已抽完); return; } for (let i 0; i prizeIds.length arr.length 0; i) { const randomIndex Math.floor(Math.random() * arr.length); document.getElementById(prizeIds[i]).innerHTML arr[randomIndex]; arr.splice(randomIndex, 1); } console.log(arr); });/script/body 总结
如果喜欢的人要嫁人了就跟她表白就算为此要把婚车的车轴打爆也没关系这是你说出来的最后机会。把这个秘密带进棺材没价值连陪葬都算不上
