记录-js基础练习题
Posted 林恒
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了记录-js基础练习题相关的知识，希望对你有一定的参考价值。
这里给大家分享我在网上总结出来的一些知识，希望对大家有所帮助
隔行换色（%）:
window.onload = function()
var aLi = document.getElementsByTagName(\'li\');
for(var i = 0; i < aLi.length; i++)
if(i%2 == 1)
aLi[i].style.background = \'#bfa\';
<ul>
<li>aaa</li>
<li>bbb</li>
<li>ccc</li>
<li>ddd</li>
</ul>
简易计算器：
<script>
window.onload = function()
var oNum1 = document.getElementById(\'num1\');
var oNum2 = document.getElementById(\'num2\');
var oBtn = document.getElementById(\'btn\');
var oSel = document.getElementById(\'sel\');
oBtn.onclick = function()
var iNum1 = parseInt(oNum1.value);
var iNum2 = parseInt(oNum2.value);
switch(oSel.value)
case \'+\':
alert(iNum1+iNum2);
break;
case \'-\':
alert(iNum1-iNum2);
break;
case \'*\':
alert(iNum1*iNum2);
break;
case \'/\':
alert(iNum1/iNum2);
break;
default:
alert(\'你没有合适的运算符！\');
break;
</script>
<input type="text" id = "num1">
<select name="" id="sel">
<option value="+">+</option>
<option value="-">-</option>
<option value="*">*</option>
<option value="/">/</option>
</select>
<input type="text" id="num2">
<input type="button" value="计算" id="btn">
双色球随机数生成：
目标：生成一组（7个） 1-33之间的随机不重复的整数（1.生成一个1-33之间的整数。 2.生成7个–>循环长度不固定用while循环。 3.要求不重复,补零操作）
<script>
function rnd(m, n)
return m + parseInt(Math.random()*(n-m));
//数组去重
function findInArr(num,arr)
for(var i = 0; i < arr.length; i++)
if(arr[i] == num)
return true;
return false;
function toDo(n)
return n < 10 ? \'0\' + n : \'\' + n;
var arr = [];
while(arr.length < 7)
//1-34包括1，不包括34
var rNum = rnd(1,34);
if(findInArr(rNum,arr) == false)
arr.push(toDo(rNum));
document.write(arr);
</script>
鼠标滑过div显示隐藏：
<div id="box1"
οnmοuseοver="document.getElementById(\'box1\').style.width=\'200px\';document.getElementById(\'box1\').style.height=\'200px\'"
οnmοuseοut="document.getElementById(\'box1\').style.width=\'100px\';document.getElementById(\'box1\').style.height=\'100px\'">
</div>
条件判断if：
点击按钮，如果div显示，那么隐藏它，如果div隐藏，那么显示它。
<input type="button" value="显示隐藏" οnclick="showHide()">
<div id="box1"></div>
<script>
function showHide()
var oDiv = document.getElementById(\'box1\');
if (oDiv.style.display == "block")
oDiv.style.display = "none";
else
oDiv.style.display = "block";
</script>
背景色换肤功能：
一个页面两个按钮，一个div点击不同的按钮，背景色分别变成不同的颜色，字体大小也要改变。
<style>
#box1
width: 200px;
height: 200px;
background-color: #bfa;
.day
background: green;
font-size: 10px;
.night
background: gray;
font-size: 22px;
</style>
<input type="button" value="白天" οnclick="showDay()">
<input type="button" value="夜晚" οnclick="showNight()">
<div id="box1">实现白天夜晚换肤功能</div>
<script>
function showDay()
document.body.className="day";
function showNight()
document.body.className="night";
</script>
行为和结构的分离：
<script> window.onload = function() //1.获取元素 var oBtn = document.getElementById(\'btn\'); //2.加事件 oBtn.onclick = function() alert(); ; ; </script>
全选功能的实现：
<script> window.onload = function () var oA = document.getElementById(\'all\'); var oBox = document.getElementById(\'box\'); //获取一组元素 var oInp = oBox.getElementsByTagName(\'input\'); oA.onclick = function () for (var i = 0; i < oInp.length; i++) oInp[i].checked = true; ; ; </script> <input type="button" value="全选" id="all"> <hr> <div id="box"> <input type="checkbox" name=""> <input type="checkbox" name=""> <input type="checkbox" name=""> <input type="checkbox" name=""> </div>
操作元素类容和属性的两种方式：
①方式：
window.onload = function()
var oBtn = document.getElementById(\'btn\');
oBtn.style.background = \'red\';
//方式二能实现1实现不了的功能oBtn[\'style\'][\'background\'] = \'green\';
//var aaa = \'background\';
//oBtn.style[aaa] = \'green\';能够使用变量
②内容：
- 表单元素：oBtn.value
- 非表单元素：
前端学习
oP.innerHTML
反选功能实现：
window.onload = function()
var oR = document.getElementById(\'reverse\');
var oC = document.getElementById(\'C1\');
oR.onclick = function()
if(oC.checked == true)
oC.checked = false;
else
oC.checked = true
<input type = "button" value="单个复选框反选" id="reverse">
<input type="checkbox" name="" id="C1">
//这样写太麻烦了，不够简洁。改变如下：
<script> window.onload = function() var oR = document.getElementById(\'reverse\'); var oC = document.getElementById(\'C1\'); oR.onclick = function() oC.checked = !oC.checked; </script> <input type="button" value="单个复选框反选" id="reverse"> <input type="checkbox" name="" id="C1">
联动选择：
需求：点击上面的全选，那么下面都选中，如果下面全选中，那么上面也选中，如果下面有一个没选中，那么上面不选中。
<script>
window.onload = function()
var oA = document.getElementById(\'all\');
var oBox = document.getElementById(\'box\');
var oInp = oBox.getElementsByTagName(\'input\');
oA.onclick = function()
for(var i = 0; i < oInp.length; i++)
oInp[i].checked = oA.checked;
;
for(var i = 0; i < oInp.length; i++)
oInp[i].onclick = function()
var count = 0;
for(var i = 0; i < oInp.length; i++)
if(oInp[i].checked)
count++;
if(count == oInp.length)
oA.checked = true;
else
oA.checked = false;
</script>
<input type="checkbox" name id="all">全选
<hr>
<div id="box">
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
</div>
//为什么必须加一个box
选项卡实现（排他思想）:
for循环是一瞬间完成的
<style>
#box .on
background:#bfa;
#box div
width:300px;
height:200px;
border:1px solid red;
display: none;
</style>
<script>
window.onload = function()
var oBox = document.getElementById(\'box\');
var oBtn = oBox.getElementsByTagName(\'input\');
var oDiv = oBox.getElementsByTagName(\'div\');
for(var i = 0; i < oBtn.length; i++)
oBtn[i].index = i;
oBtn[i].onclick = function()
for(var i = 0; i < oBtn.length; i++)
oBtn[i].className = \'\';
oDiv[i].style.display = \'none\';
this.className = \'on\';
oDiv[this.index].style.display = \'block\';
</script>
<div id = "box">
<input type="button" value="体育" class="on">
<input type="button" value="娱乐">
<input type="button" value="新闻">
<div >***获得100米第一</div>
<div>段奕宏真帅！</div>
<div>美国懂王昨日于白宫遭**</div>
</div>
简易定时器：
<script>
window.onload = function()
var oTime = document.getElementById(\'time\');
var oStart = document.getElementById(\'start\');
var oStop = document.getElementById(\'stop\');
var timer = null;
function toDo(n)
return n < 10 ? \'0\' + n : n;
oStart.onclick = function()
var s = 0;
clearInterval(timer);
timer = setInterval(function()
s++;
oTime.value = toDo(parseInt(s / 60)) + \':\' + toDo( s % 60);
,50);
;
oStop.onclick = function()
clearInterval(timer);
;
</script>
<input type = "text" value="00:00" id = "time">
<input type = "button" value="开始" id="start">
<input type = "button" value = "停止" id = "stop">
文字时钟：
<script>
window.onload = function()
var oP = document.getElementById(\'p1\');
var timer = null;
function toDo(n)
return n < 10 ? \'0\' + n : n;
function time()
var arr = [\'日\', \'一\', \'二\', \'三\', \'四\', \'五\',\'六\'];
var oDate = new Date();
var year = oDate.getFullYear();
var month = oDate.getMonth() + 1;
var date = oDate.getDate();
var w = oDate.getDay();
var h = oDate.getHours();
var m = oDate.getMinutes();
var s = oDate.getSeconds();
oP.innerHTML = year + \'年\' + month + \'月\' + date + \'日\' +toDo(h) +\':\' + toDo(m) + \':\' + toDo(s) + \'星期\' + arr[w];
time();//不需要等一秒钟再执行函数
clearInterval(timer);//定时器先关闭再执行
timer = setInterval(time,1000);
</script>
<p id="p1">2020年8月20日15：56：30星期四</p>
延迟广告：
图片2s后显示，2s后消失，当鼠标移入图片时，不消失，移出后2s消失。
定时器里面可以套定时器
<script>
window.onload = function()
var oImg = document.getElementById(\'pic\');
var timer = null;
var timer2 = null;
clearTimeout(timer);
timer = setTimeout(function()
oImg.style.display = \'block\';
clearTimeout(timer2);
timer2 = setTimeout(function()
oImg.style.display = \'none\';
,2000);
,2000);
oImg.onmouseover= function()
clearTimeout(timer2);
;
oImg.onmouseout = function()
timer2 = setTimeout(function()
oImg.style.display = \'none\';
,2000);
;
;
</script>
<img src="../image/1.jpg" id="pic">
自定义属性：
<script> window.onload = function() var oBtn = document.getElementById(\'btn\'); oBtn.abc = 0; //自定义属性 oBtn.onclick = function() alert(this.abc); ; </script> <input type="button" value="aaa" id="btn">
轮播图（重点）：
<style>
#box .on
background: #bfa;
#box div
width: 300px;
height: 200px;
border: 1px solid red;
display: none;
</style>
<script>
window.onload = function()
var oBox = document.getElementById(\'box\');
var oPrev = document.getElementById(\'prev\');
var oNext = document.getElementById(\'next\');
var oBtn = oBox.getElementsByTagName(\'input\');
var oDiv = oBox.getElementsByTagName(\'div\');
var iNow = 0;
for(var i = 0; i < oBtn.length; i++)
oBtn[i].index = i;
oBtn[i].onclick = function()
iNow = this.index;
for(var i = 0; i < oBtn.length; i++)
oBtn[i].className=\'\';
oDiv[i].style.display=\'none\';
this.className=\'on\'; //this=oBtn[iNow]
oDiv[this.index].style.display=\'block\';
;
//下一个播放
oNext.onclick = function()
for(var i = 0; i < oBtn.length; i++)
oBtn[i].className=\'\';
oDiv[i].style.display=\'none\';
iNow++;
if(iNow == oBtn.length)iNow = 0;
oBtn[iNow].className=\'on\';
oDiv[iNow].style.display=\'block\';
;
//上一个播放
oPrev.onclick = function()
for(var i = 0; i < oBtn.length; i++)
oBtn[i].className=\'\';
oDiv[i].style.display=\'none\';
iNow--;
if(iNow == -1)iNow = oBtn.length - 1;
oBtn[iNow].className=\'on\';
oDiv[iNow].style.display=\'block\';
;
;
</script>
<div id="box">
<a href="javascript:;" id="prev"><-</a>
<input type="button" value="aaa" class="on">
<input type="button" value="bbb">
<input type="button" value="ccc">
<a href="javascript:;" id="next">-></a>
<div >aaa</div>
<div>bbb</div>
<div>ccc</div>
</div>
简化代码（封装）+ 实现自动播放功能 如下：
<script>
window.onload = function()
var oBox = document.getElementById(\'box\');
var oPrev = document.getElementById(\'prev\');
var oNext = document.getElementById(\'next\');
var oBtn = oBox.getElementsByTagName(\'input\');
var oDiv = oBox.getElementsByTagName(\'div\');
var iNow = 0;
var timer = null;
function tab()
for(var i = 0; i < oBtn.length; i++)
oBtn[i].className=\'\';
oDiv[i].style.display=\'none\';
oBtn[iNow].className=\'on\';
oDiv[iNow].style.display=\'block\';
for(var i = 0; i < oBtn.length; i++)
oBtn[i].index = i;
oBtn[i].onclick = function()
iNow = this.index;
tab();
;
//下一个播放
function fnNext()
iNow++;
if(iNow == oBtn.length)iNow = 0;
tab();
oNext.onclick = fnNext;
//上一个播放
oPrev.onclick = function()
iNow--;
if(iNow == -1)iNow = oBtn.length - 1;
tab();
;
//自动播放
clearInterval(timer);
timer = setInterval(function()
fnNext();
,1000);
oBox.onmouseover = function()
clearInterval(timer);
;
oBox.onmouseout = function()
clearInterval(timer);
timer = setInterval(function()
fnNext();
,1000);
;
;
</script>
理解立即执行函数：
var a = 12; alert((a)); //2层括号不影响结果 var show = function(); show(); //(show)() ;(function())(); //防止别人的代码影响自己的 (function() var a = b = 10; )(); console.log(a); //undefined console.log(b); //10
简易发布留言：
<script>
window.onload = function()
var oTxt=document.getElementById(\'txt\');
var oBtn=document.getElementById(\'btn\');
var oUl=document.getElementById(\'ul1\');
oBtn.onclick = function()
var oLi = document.createElement(\'li\');
oLi.innerHTML=oTxt.value;
//oUl.insertBefore(oLi,oUl.children[0]);
//如果父级下面没有元素，那么向后插入，有，则向前插入。兼容IE
if(oUl.children.length == 0)
oUl.appendChild(oLi);
else
oUl.insertBefore(oLi,oUl.children[0]);
oTxt.value = \'\';
;
;
</script>
<input type="text" id="txt">
<input type="button" value="发布" id="btn">
<ul id="ul1"></ul>
上移下移功能实现：
<script> window.onload = function() var oUl = document.getElementById(\'ul1\'); var aPrev = oUl.getElementsByClassName(\'prev\'); //上移 for(var i = 0; i < aPrev.length; i++) aPrev[i].onclick = function() var obj = this.parentNode; if(obj == oUl.children[0]) alert(\'到头了\'); return; var oPrev = obj.previousElementSibling || obj.previousSibling; oUl.insertBefore(obj,oPrev); ; //下移 var aNext = oUl.getElementsByClassName(\'next\'); for(var i = 0; i < aNext.length; i++) aNext[i].onclick = function() var obj = this.parentNode; if(obj == oUl.children[oUl.children.length-1]) alert(\'到底了\'); return; var oNext = obj.nextElementSibling || obj.nextSibling; var oNext2 = oNext.nextElementSibling || oNext.nextSibling; oUl.insertBefore(obj,oNext2); ; ; </script> <ul id="ul1"> <li><span>0.床前明月光</span> <a href="javascript:;" class="prev">上移</a> <a href="javascript:;" class="next">下移</a></li> <li><span>1.疑是地上霜</span> <a href="javascript:;" class="prev">上移</a> <a href="javascript:;" class="next">下移</a></li> <li><span>2.举头望明月</span> <a href="javascript:;" class="prev">上移</a> <a href="javascript:;" class="next">下移</a></li> <li><span>3.低头思故乡</span> <a href="javascript:;" class="prev">上移</a> <a href="javascript:;" class="next">下移</a></li> </ul>
右下角悬浮框功能实现：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-SwhN8Ctu-1598018747062)(C:\\Users\\Hrj201305042\\AppData\\Roaming\\Typora\\typora-user-images\\image-20200821143137668.png)]
//物体实际占的距离 window.onload = function() var oDiv = document.getElementById(\'div1\'); alert(oDiv.offsetHeight); ; //关于滚动的距离 bodyheight:3000px; #btnposition:fixed; left:10px; top:200px; window.onscroll = function() var oBtn = document.getElementById(\'btn\'); oBtn.onclick = function() var sT = document.documentElement.scrollTop || document.body.scrollTop; alert(sT); ; ; //可视区的高度 window.onload = function() var oBtn = document.getElementById(\'btn\'); oBtn.onclick = function() alert(document.documentElement.clientHeight); ; ;
<script> //窗口缩小onresize
window.onresize = window.onload=window.onscroll=
function()
if(window.navigator.userAgent.indexOf(\'MSIE 6.0\')!=-1)
var oDiv = document.getElementById(\'div1\');
var sT = document.documentElement.scrollTop || document.body.scrollTop;
var cH = document.documentElement.clientHeight;
var oH = oDiv.offsetHeight;
oDiv.style.top = sT + cH + oH +\'px\';
;
</script>
<div id="div1"></div>
json和数组的区别：
json中每个元素是以字符串作为下标，数组则是以数字作为下标。json使用for in循环，数组一般使用for循环。
var json = "name":"leo", "age":18; var arr=["leo",18];
json是种数据格式，和JavaScript没有直接联系，js原生提供了部分json操作方法，是js数据交互最通用的数据格式之一
json和字符串互转：
①字符串转json：name=leo&age=18 => “name”: “leo”, “age” : 18
<script> function url2json(str) var arr = str.split(\'&\'); var json = ; for(var i = 0; i < arr.length; i++) //[user = leo age = 18 class = javas] //arr[i].split(\'=\')[0] user //arr[i].split(\'=\')[1] leo //json[\'user\'] = leo json[arr[i].split(\'=\')[0]] = arr[i].split(\'=\')[1]; return json var str = \'user=leo&age=18&class=javas\'; console.log(url2json(str)); </script>
②json转字符串“name”: “leo” , “age” : 18 => name=leo&age=18
function json2url(json) var arr = []; for(var name in json) //name user //json[name] leo arr.push(name + \'=\' + json[name]); [\'name=leo\', \'age=18\'] return arr.join(\'&\'); var json = user:"leo", age:18, class:"javas"; alert(json2url(json));
文字输入框提示实现：
#boxposition:relative;
#box spancolor:#ccc;position:absolute;left:6px;top:2px;
<script>
window.onload = function()
var oS = document.getElementById(\'s1\');
var oTxt = document.getElementById(\'txt\');
oTxt.onfocus = function()
oS.style.display = \'none\';
;
oTxt.onblur = function()
if(oTxt.value == \'\')
oS.style.display = \'block\';
;
oS.onclick = function()
//oS.style.display = \'none\';
oTxt.focus();
;
;
</script>
<div id="box">
<span id="s1">请输入内容</span>
<input type="text" id="txt">
</div>
事件对象：
<script> window.onload = function() var oBtn = document.getElementById(\'btn\'); oBtn.onclick = function(ev) var oEvent = ev||event; console.log(oEvent); ; ; </script> <input type="button" value="点击" id="btn">
事件冒泡：
document.onclick = function()alert(\'document\');;
<div id="div1" onclick="alert(\'div1\')">
<input type="button" value="按钮" onclick="alert(\'input\')">
</div> //点击按钮，从里往外传，input->div1->document.
//(父级没有事件也往上传)如果input的上级div不添加事件 input-> document
//取消冒泡：1标准：oEvent.stopPropagation&&oEvent.stopPropagation();
2.IE: oEvent.cancelBubble&&(oEvent.cancelBubble=true);
//绑定事件：FF chrome
oBtn.addEventListener(\'click\',aaa,false);
//IE6-8 没有捕获阶段，只有冒泡
oBtn.attachEvent(\'onclick\', aaa;
获取鼠标点击位置：
document.onclick = function()
//chrome , IE
alert(\'left:\' + event.clientX+\',top:\'+event.clientY);
;
div跟随鼠标移动：
鼠标移动，div跟随鼠标移动
实现：1.获取鼠标位置 2.赋值给div的left和top样式
#div1width:200px;height:200px;background:#bfa;position:absolute; <script> window.onload = function() var oDiv = document.getElementById(\'div1\'); document.onmousemove = function(ev) var oEvent = ev || event; console.log(\'ev.clientX:\' + oEvent.clientX + \'ev.clientY:\' + oEvent.clientY); oDiv.style.left = oEvent.clientX + \'px\'; oDiv.style.top = oEvent.cilentY + \'px\'; ; ; </script> <div id="div1"></div>
本文转载于:
https://blog.csdn.net/qq_48687155/article/details/108159063
如果对您有所帮助，欢迎您点个关注，我会定时更新技术文档，大家一起讨论学习，一起进步。
JS基础练习：奇偶数质数闰年水仙花数完美数累加累乘多位数拆分等
2018年8月1日 广州
这几天学习JS基础的运算符和语句，经常写到一些经典的例子，这里记录下。
很多数学概念不懂，就想不出算法，也就写不出来。所以也算对特殊的数学概念作个了解吧。
一、数值奇偶性的判断
概念：一个整数能被2整除的是偶数，不能被2整除的是奇数。
代码示例：
1 <script> 2 var num = parseInt(prompt("请任意输入一个整数：")); 3 if (num === 0 ) { 4 console.log("0既不是偶数也不是奇数") 5 } else{ 6 num % 2 === 0 ? console.log(num+"是偶数") : console.log(num+"是奇数"); 7 } 8 </script>
二、质数（也叫素数）
概念：大于1的整数中，只能被1和自身整除的数。
代码示例：
1 <script> 2 var num = parseInt(prompt("请输入一个数字")); 3 var result = 0; 4 //因为不1能被任何数整除，所以不遍历1，就将用户输入的数与它之前的每一个数（除1）都除判断是否有余，没有余数则结果result加1.有余则结果不变 5 for (var i = 2 ; i<num ; i++){ 6 num%i === 0 ? result +=1:false; 7 } 8 num != 1 && result === 0 ? console.log(num+"是质数"):console.log(num+"不是质数"); 9 //result返回0，则说明不能被它之前除1外的数整除，所以是质数。另外1不是质数要单独排除。 10 </script>
三、闰年
概念：
① 非整百年数除以4，无余为闰，有余不闰；
② 整百年数（世纪年）除以400，无余为闰，有余不闰。
代码示例：
1 <script> 2 var year = prompt("请输入一个年份："); 3 //当年除100有余则非整百年，则再判断除4是否有余，若有余，则非闰年。若无余则执行elseif语句 4 if(year%100 && year%4){ 5 alert(year + "年不是闰年"); 6 } 7 //当年100无余整百年，再判断除400，若有余，则非闰年。若无余则执行else都判断为闰年 8 else if(year%100 || year%400){ 9 alert(year + "年不是闰年") 10 } 11 else{ 12 alert(year + "年是闰年") 13 } 14 </script>
思路是：先把不是闰年的条件判断出来，其它则是闰年。
四、水仙花数
概念：
以上是关于记录-js基础练习题的主要内容，如果未能解决你的问题，请参考以下文章