网站被黑咋样的,网站建设 设计业务范围,企业整站网站模板下载,网站图片轮播怎么做爱太容易了#xff0c;让爱维持才是最困难的部分 文章目录 for循环练习题webAPI练习题 for循环练习题 练习1#xff1a;计算1-100的和 let sum 0for (let i 1; i 100; i) {sum i}console.log(sum)练习2#xff1a;将1-100之间所有是6的倍数的数字输出到控制台 for … 爱太容易了让爱维持才是最困难的部分 文章目录 for循环练习题webAPI练习题 for循环练习题 练习1计算1-100的和 let sum 0for (let i 1; i 100; i) {sum i}console.log(sum)练习2将1-100之间所有是6的倍数的数字输出到控制台 for (let i 1; i 100; i) {if (i % 6 0) {console.log(i)}
}练习3在页面中打印两行 每行中有10颗☆ for (let i 1; i 2; i) {document.write(br/)for (let j 1; j 10; j) {document.write(☆)}
}练习4在页面中打印直角三角形 for (let i 1; i 10; i) {document.write(br /)for (let j 1; j i; j) {document.write(♡)}
}练习5九九乘法表 !DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyletd {border: 1px solid red;width: 80px;text-align: center;}tr:nth-child(odd) {background-color: pink;}tr:nth-child(even) {background-color: orange;}/style
/headbodyscriptdocument.write(table)for (let i 1; i 9; i) {document.write(tr)for (let j 1; j i; j) {document.write(td${j} x ${i} ${j * i}/td)}document.write(/tr)}document.write(/table)/script
/body/htmlwebAPI练习题 练习1图片切换 !DOCTYPE html
html langenheadmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle.main {width: 600px;margin: 20px auto;}.first button {margin: 0 50px;}.second img {display: block;width: 315px;height: 300px;margin: 20px 0;}/style
/headbodydiv classmaindiv classfirstbutton idprev上一张/buttonbutton idnext下一张/button/divdiv classsecondimg srcimg/1.jpg idimg/divdiv classthreediv idinfo/div/div/divscriptvar prev document.getElementById(prev)var next document.getElementById(next)var img document.getElementById(img)var info document.getElementById(info)var index 0var imgArr [img/1.jpg, img/2.jpg, img/3.jpg, img/4.jpg, img/5.jpg, img/6.jpg]info.innerHTML 第${imgArr.length-5}张 / 共${imgArr.length}张prev.onclick function () {index--if (index 0) {index imgArr.length - 1}img.src imgArr[index]info.innerHTML 第${index1}张 / 共${imgArr.length}张}next.onclick function () {indexif (index imgArr.length - 1) {index 0}img.src imgArr[index]info.innerHTML 第${index1}张 / 共${imgArr.length}张}/script
/body/html练习2倒计时 !DOCTYPE html
html langzh-CNheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle.form {width: 600px;margin: 100px auto;}.row {width: 100%;display: flex;border-top: 1px solid #0094ff;border-bottom: 1px solid #0094ff;}.cols-1 {flex: 1;}.cols-2 {flex: 2;}.cell {border-left: 1px solid #0094ff;padding: 10px 3px;line-height: 42px;text-align: center;}.cell:last-child {border-right: 1px solid #0094ff;}.text {width: 268px;height: 30px;padding: 4px;}.btn {height: 38px;width: 200px;}/style
/headbodydiv classformdiv classrowdiv classcell cols-1请输入手机号/divdiv classcell cols-2input typetext classtext/divdiv classcell cols-1input typebutton value获取验证码 idgetCode classbtn/div/div/div/bodyscriptvar btn document.getElementById(getCode)btn.onclick function () {// 禁用按钮btn.disabled true// 定义数字var i 5// 修改按钮内容btn.value 验证码已发送 i// 定时器var str window.setInterval(function () {i--// 设置按钮内容btn.value 验证码已发送 iif (i 0) {// 清除定时器window.clearInterval(str)// 修改按钮内容btn.value 获取验证码// 启用按钮btn.disabled false}}, 1000)}
/script/html练习3事件流 !DOCTYPE html
html langenheadmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0title事件冒泡/title
/headbodydivp idparEle我是父元素span idsonEle我是子元素/span/p/divscriptvar parEle document.getElementById(parEle)var sonEle document.getElementById(sonEle)parEle.addEventListener(click, function () {console.log(父元素冒泡)}, false)parEle.addEventListener(click, function () {console.log(父元素捕获)}, true)sonEle.addEventListener(click, function () {console.log(子元素冒泡)}, false)sonEle.addEventListener(click, function () {console.log(子元素捕获)}, true)/script
/body/html
