分类三剑客下的文章

2022-03-29

HTML5+CSS3+JavaScript实现触碰边界自动反向运动的小球 HTML5+CSS3+JavaScript实现触碰边界自动反向运动的小球 .wp { width: 600px; height: 300px; position: relative; border: 1px solid black; } .box { position: absolute; width: 50px; height: 50px; background-color: rgb(216, 21, 21); border-radius: 50%; left: 0px; top: 0px; transition: all 0.1s; } //横速度 var width_speed = 10; //纵速度 var height_speed = 10; //绑定小球和外边盒子对象 var out = document.getElementById("out"); var box = document.getElementById("box"); //外边盒子宽高 var out_width = out.clientWidth; var out_height = out.clientHeight; console.log(out_width); console.log(out_height); //小球当前位置 var cache_width = box.offsetLeft; var cache_height = box.offsetTop; //定时器动画 var timer = setInterval(function () { cache_width += width_speed; cache_height += height_speed; //如果触碰到边界，速度乘以-1，反向运动 if (cache_width >= out_width - box.offsetWidth || cache_width = out_height - box.offsetHeight || cache_height

2022年03月29日
194 阅读
0 评论
1 点赞

2022-03-22

HTML5+CSS3+JavaScript实现位移轮播图 HTML5+CSS3+JavaScript实现位移轮播图演示 * { border: 0; box-sizing: border-box; padding: 0; } .wp { width: 800px; height: 200px; overflow: hidden; } .box { width: 200px; height: 200px; text-align: center; line-height: 200px; font-size: 2em; float: left; } .box1 { background: skyblue; } .box2 { background: yellow; } .box3 { background: orangered; } .box4 { background: brown; } .btm { overflow: hidden; } .btm div { width: 50px; height: 50px; text-align: center; line-height: 50px; float: left; } .btm1 { background: skyblue; } .btm2 { background: yellow; } .btm3 { background: orangered; } .btm4 { background: brown; } .next_div { float: left; width: 50px; height: 50px; background-color: transparent; color: black; margin-left: 100px; text-align: center; line-height: 50px; font-size: 35px; } .last_div { float: left; width: 50px; height: 50px; background-color: transparent; color: black; text-align: center; line-height: 50px; font-size: 35px; } 甲乙丙丁甲乙丙丁《》 //四个div拼起来的盒子 var _all_box = document.getElementById("wp"); //四个大正方形 var _box = _all_box.getElementsByTagName("div"); //四个按钮 var _btm = document.getElementsByClassName("btm"); //当前位置索引 var index = 1; //线程锁(防止定时器卡时间，比如一次性跳两页) var lock = false; for (let i = 1; i < _btm.length; i++) { _btm[i].onclick = function () { //取当前位置 var start = _all_box.style.marginLeft; //如果没有设置过marginLeft，那就会返回空，判断为空则左边距是0px if (start == "") start = 0 + "px"; //转数字 var pos = parseInt(start); //终点位置 var zhong = -200 * (i - 1); //定时器做动画 var flash = setInterval(qiehuan, 5); //启用线程锁 lock = true; //定时器执行的函数 function qiehuan() { //如果位置相等，清定时器 if (pos == zhong) { window.clearInterval(flash); } else { //大减小加 if (pos > zhong) { pos -= 25; } if (pos < zhong) { pos += 25; } //改变数值 _all_box.style.marginLeft = pos + "px"; } } //设置当前索引 index = i; }; } //下一页，触发下一控件onclick事件 function next() { //如果等于最后一个div，则返回第一个-1 if (index == 4) { index = 0; } index++; //触发onclick函数 _btm[index].onclick(); } //上一页，触发上一控件onclick事件 function last() { //如果等于第一个div，则返回最后一个+1 if (index == 1) { index = 5; } index--; //触发onclick函数 _btm[index].onclick(); } //添加上一页点击事件 document.getElementById("last_div").onclick = function () { lock = true; last(); }; //添加下一页点击事件 document.getElementById("next_div").onclick = function () { lock = true; next(); }; //轮播定时器,3秒循环 setInterval(() => { //如果线程锁启用，则跳过下一页函数，置线程锁为关闭。否则执行下一页函数 if (!lock) { next(); } lock = false; }, 3000); 源代码<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> * { border: 0; box-sizing: border-box; padding: 0; } .wp { width: 1600px; height: 400px; overflow: hidden; } .box { width: 400px; height: 400px; text-align: center; line-height: 400px; font-size: 4em; float: left; } .box1 { background: skyblue; } .box2 { background: yellow; } .box3 { background: orangered; } .box4 { background: brown; } .btm { overflow: hidden; } .btm div { width: 100px; height: 50px; text-align: center; line-height: 50px; float: left; } .btm1 { background: skyblue; } .btm2 { background: yellow; } .btm3 { background: orangered; } .btm4 { background: brown; } .next_div { position: absolute; width: 50px; height: 50px; background-color: transparent; color: black; top: 175px; margin-left: 350px; text-align: center; line-height: 50px; font-size: 35px; } .last_div { position: absolute; width: 50px; height: 50px; background-color: transparent; color: black; top: 175px; text-align: center; line-height: 50px; font-size: 35px; } </style> </head> <body> <div style="width: 400px; height: 400px; overflow: hidden"> <div class="wp" id="wp"> <div class="box box1">甲</div> <div class="box box2">乙</div> <div class="box box3">丙</div> <div class="box box4">丁</div> </div> </div> <div class="btm"> <div class="btm1 btm" id="btm1">甲</div> <div class="btm2 btm" id="btm2">乙</div> <div class="btm3 btm" id="btm3">丙</div> <div class="btm4 btm" id="btm4">丁</div> </div> <div class="last_div" id="last_div">《</div> <div class="next_div" id="next_div">》</div> </body> <script> //四个div拼起来的盒子 var _all_box = document.getElementById("wp"); //四个大正方形 var _box = _all_box.getElementsByTagName("div"); //四个按钮 var _btm = document.getElementsByClassName("btm"); //当前位置索引 var index = 1; //线程锁(防止定时器卡时间，比如一次性跳两页) var lock = false; for (let i = 1; i < _btm.length; i++) { _btm[i].onclick = function () { //取当前位置 var start = _all_box.style.marginLeft; //如果没有设置过marginLeft，那就会返回空，判断为空则左边距是0px if (start == "") start = 0 + "px"; //转数字 var pos = parseInt(start); //终点位置 var zhong = -400 * (i - 1); //定时器做动画 var flash = setInterval(qiehuan, 5); //启用线程锁 lock = true; //定时器执行的函数 function qiehuan() { //如果位置相等，清定时器 if (pos == zhong) { window.clearInterval(flash); } else { //大减小加 if (pos > zhong) { pos -= 25; } if (pos < zhong) { pos += 25; } //改变数值 _all_box.style.marginLeft = pos + "px"; } } //设置当前索引 index = i; }; } //下一页，触发下一控件onclick事件 function next() { //如果等于最后一个div，则返回第一个-1 if (index == 4) { index = 0; } index++; //触发onclick函数 _btm[index].onclick(); } //上一页，触发上一控件onclick事件 function last() { //如果等于第一个div，则返回最后一个+1 if (index == 1) { index = 5; } index--; //触发onclick函数 _btm[index].onclick(); } //添加上一页点击事件 document.getElementById("last_div").onclick = function () { lock = true; last(); }; //添加下一页点击事件 document.getElementById("next_div").onclick = function () { lock = true; next(); }; //轮播定时器,3秒循环 setInterval(() => { //如果线程锁启用，则跳过下一页函数，置线程锁为关闭。否则执行下一页函数 if (!lock) { next(); } lock = false; }, 3000); </script> </html>

2022年03月22日
153 阅读
0 评论
1 点赞

2022-03-17

JavaScript实现tab键切换选项卡 JavaScript实现tab键切换选项卡{anote icon="fa-arrow-circle-right" href="http://www.000081.xyz/index.php/174-1.html" type="secondary" content="预览"/}重要的方法方法作用onclick添加点击触发事件onfocus获取焦点触发事件tabIndex添加tab键索引onblur离开焦点触发事件blur失去焦点focus设置焦点源代码<!DOCTYPE html> <html lang="zh"> <meta charset="utf8" /> <style> /* 大正方形的类 */ .box { width: 200px; height: 200px; position: absolute; float: left; line-height: 200px; text-align: center; font-size: 100px; left: 0; right: 0; bottom: 0; top: 0; margin: auto; } /* 大正方形的类选择器 */ .box:nth-child(1) { background-color: red; } .box:nth-child(2) { display: none; background-color: wheat; } .box:nth-child(3) { display: none; background-color: blue; } .box:nth-child(4) { display: none; background-color: yellow; } /* 小正方形的类 */ .but { width: 50px; height: 50px; float: left; line-height: 50px; text-align: center; font-size: 25px; margin-top: 125px; } .but:nth-child(1) { background-color: red; } .but:nth-child(2) { background-color: wheat; } .but:nth-child(3) { background-color: blue; } .but:nth-child(4) { background-color: yellow; } .but:hover { background-color: black; color: white; } /* 最外层的，括起四个小正方形 */ ._div1 { width: 200px; height: 50px; position: absolute; left: 0; right: 0; bottom: 0; top: 0; margin: auto; } </style> <head> <title>tab切换选项卡</title> </head> <body> <div id="_div" class="_div"></div> <div id="_div1" class="_div1"></div> </body> <script> //当前索引号 var now_index = 0; var create_div = []; //给定时器加上线程锁 var next_tab = true; //颜色 var color_list = ["red", "wheat", "blue", "yellow"]; //大正方形的div var _div = document.getElementById("_div"); //小正方形的div var _div1 = document.getElementById("_div1"); //批量生成大小正方形 for (var i = 0; i <= 3; i++) { create_div[i] = document.createElement("div"); create_div[i + 4] = document.createElement("div"); create_div[i].className = "box"; create_div[i + 4].className = "but"; create_div[i].innerHTML = i + 1; create_div[i + 4].innerHTML = i + 1; //正方形获得焦点或者点击事件都会触发切换函数 create_div[i + 4].onclick = qiehuan; create_div[i + 4].onfocus = qiehuan; create_div[i + 4].onblur = qiehuan; //为4个小正方形添加tab键索引 create_div[i + 4].tabIndex = i + 1; //将生成的函数加入div _div.appendChild(create_div[i]); _div1.appendChild(create_div[i + 4]); } //取生成后的大小正方形 var __div = _div.getElementsByTagName("div"); var __div1 = _div1.getElementsByTagName("div"); //默认红色小正方形为选中状态 __div1[0].style.backgroundColor = "purple"; __div1[0].style.color = "white"; __div1[0].focus(); //切换函数代码 function qiehuan() { //取索引 var index = this.innerHTML - 1; //判断是否为定时器触发的切换 if (isNaN(index)) { //当索引值为最大时候自动跳回开始 if (now_index == 3) { now_index = -1; } //索引值为下一个 index = ++now_index; //获取当前焦点 __div1[index].focus(); } else { next_tab = false; } //全局变量索引为当前索引值 now_index = index; for (var i = 0; i <= 3; i++) { if (index == i) { __div1[i].style.backgroundColor = "purple"; __div1[i].style.color = "white"; __div[i].style.display = "block"; continue; } __div[i].style.display = "none"; __div1[i].style.backgroundColor = color_list[i]; __div1[i].style.color = "black"; } } //定时器 setInterval(() => { //当线程锁激活的时候跳过 if (next_tab) { qiehuan(); } //线程锁关闭 next_tab = true; }, 3000); </script> </html>

2022年03月17日
211 阅读
0 评论
0 点赞

2022-03-15

JavaScript实现三目运算符、小球弹跳路程、每天吃桃子一半再吃一个总数三目运算符：学习成绩>=90分，输出A，60-89之间输出B，60分以下输出C function tm1(s) { //如果成绩大于等于90，输出A，否则判断成绩>=60并且<=89，如果正确，输出B，否则输出C return s >= 90 ? "A" : s >= 60 && s <= 89 ? "B" : "C"; } document.write("59: " + tm1(59) + "<br>"); document.write("85: " + tm1(85) + "<br>"); document.write("90: " + tm1(90) + "<br>");输出59: C85: B90: A一个小球从100米高度自由落下，每次落地后反弹回原高度的一般，第10次小球弹跳路线共经过多少米？第十次反弹多高？ //递归法 var dq_m = 0; function tm2_1(m, s) { if (s == 1) { dq_m = m / 2; return 2 * m; } if (s == 10) { return m + tm2_1(m / 2, s - 1); } return 2 * m + tm2_1(m / 2, s - 1); } var sum = 0; sum += tm2_1(100, 10); document.write("递归法：总长：" + sum + " 高度：" + dq_m + "<br>"); //for循环 function tm2_2(m, s) { var sz = m; for (var i = 0; i < s; i++) { if (i == s - 1) { m /= 2; return "循环法：总长：" + sz + " 高度：" + m; } sz += m; m /= 2; } } document.write(tm2_2(100, 10) + "<br>");输出递归法：总长：299.609375 高度：0.09765625循环法：总长：299.609375 高度：0.09765625猴子第一天摘下若干个桃子，每天吃一半后，再吃一个，直到第十天早上就剩下一个桃子，求原来总桃子个数 //递归法 function tm3_1(x, s) { if (s == 1) { return x; } return tm3_1(2 * (x + 1), s - 1); } var sum1 = 0; sum1 += tm3_1(1, 10); document.write("递归法个数：" + sum1 + "<br>"); //循环法 function tm3_2(x, s) { for (var i = 1; i < s; i++) { x += 1; x *= 2; } return x; } document.write("循环法个数：" + tm3_2(1, 10));输出递归法个数：1534循环法个数：1534

2022年03月15日
208 阅读
0 评论
0 点赞

2022-03-10

JavaScript实现网页计算器功能 JavaScript实现网页计算器功能 * { border: 0px; box-sizing: inherit; } table { text-align: center; border: 5px solid black; } th { text-align: center; border: 1px solid black; width: 50px; height: 50px; } td { text-align: center; border: 1px solid black; width: 50px; height: 50px; } 计算器 + - * / 7 8 9 c 4 5 6 ← 1 2 3 ( 0 . = ) var compute_text = []; //输入内容 var fuhao = ["+", "-", "*", "/", "(", ")"]; //符号栈 //表格值 var but = [ "+", "-", "*", "/", "7", "8", "9", "c", "4", "5", "6", "←", "1", "2", "3", "(", "0", ".", "=", ")", ]; // 生成按钮和点击函数 var _td = document.getElementsByTagName("td"); for (var i = 0; i

2022年03月10日
177 阅读
0 评论
1 点赞