记录-js基础练习题
这里给大家分享我在网上总结出来的一些知识，希望对大家有所帮助隔行换色（%）:
window.onload = function() {
var aLi = document.getElementsByTagName('li');
for(var i = 0; i < aLi.length; i++){
if(i%2 == 1){
aLi.style.background = '#bfa';
}
}
}
<ul>
<li>aaa</li>
<li>bbb</li>
<li>ccc</li>
<li>ddd</li>
</ul>简易计算器：
<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.要求不重复,补零操作）
鼠标滑过div显示隐藏：
条件判断if：
点击按钮，如果div显示，那么隐藏它，如果div隐藏，那么显示它。
背景色换肤功能：
一个页面两个按钮，一个div点击不同的按钮，背景色分别变成不同的颜色，字体大小也要改变。
<input type="button" value="白天" οnclick="showDay()">
<input type="button" value="夜晚" οnclick="showNight()">
实现白天夜晚换肤功能行为和结构的分离：
全选功能的实现：
<input type="button" value="全选" id="all">
<hr>
<input type="checkbox" name="">
<input type="checkbox" name="">
<input type="checkbox" name="">
<input type="checkbox" name="">操作元素类容和属性的两种方式：
①方式：
window.onload = function(){
var oBtn = document.getElementById('btn');
oBtn.style.background = 'red';
//方式二能实现1实现不了的功能oBtn['style']['background'] = 'green';
//var aaa = 'background';
//oBtn.style = '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">
//这样写太麻烦了，不够简洁。改变如下：联动选择：
需求：点击上面的全选，那么下面都选中，如果下面全选中，那么上面也选中，如果下面有一个没选中，那么上面不选中。
<input type="checkbox" name id="all">全选
<hr>
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
//为什么必须加一个box选项卡实现（排他思想）:
for循环是一瞬间完成的
<input type="button" value="体育" >
<input type="button" value="娱乐">
<input type="button" value="新闻">
***获得100米第一
段奕宏真帅！
美国懂王昨日于白宫遭**简易定时器：
文字时钟：
<p id="p1">2020年8月20日15：56：30星期四</p>延迟广告：
图片2s后显示，2s后消失，当鼠标移入图片时，不消失，移出后2s消失。
定时器里面可以套定时器
<img src="https://www.cnblogs.com/../image/1.jpg" id="pic">自定义属性：
轮播图（重点）：
<a target="_blank" href="https://www.cnblogs.com/javascript:;" id="prev"><-</a>
<input type="button" value="aaa" >
<input type="button" value="bbb">
<input type="button" value="ccc">
<a target="_blank" href="https://www.cnblogs.com/javascript:;" id="next">-></a>
aaa
bbb
ccc简化代码（封装）+ 实现自动播放功能 如下：
理解立即执行函数：
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简易发布留言：
上移下移功能实现：
<ul id="ul1">
<li><span>0.床前明月光</span>
<a target="_blank" href="https://www.cnblogs.com/javascript:;" >上移</a>
<a target="_blank" href="https://www.cnblogs.com/javascript:;" >下移</a></li>
<li><span>1.疑是地上霜</span>
<a target="_blank" href="https://www.cnblogs.com/javascript:;" >上移</a>
<a target="_blank" href="https://www.cnblogs.com/javascript:;" >下移</a></li>
<li><span>2.举头望明月</span>
<a target="_blank" href="https://www.cnblogs.com/javascript:;" >上移</a>
<a target="_blank" href="https://www.cnblogs.com/javascript:;" >下移</a></li>
<li><span>3.低头思故乡</span>
<a target="_blank" href="https://www.cnblogs.com/javascript:;" >上移</a>
<a target="_blank" href="https://www.cnblogs.com/javascript:;" >下移</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);
};
//关于滚动的距离
body{height:3000px;}
#btn{position: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);
};
};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}
②json转字符串{“name”: “leo” , “age” : 18} => name=leo&age=18
function json2url(json){
var arr = [];
for(var name in json){
//name user
//json leo
arr.push(name + '=' + json);
['name=leo', 'age=18']
}
return arr.join('&');
}
var json = {user:"leo", age:18, class:"javas"};
alert(json2url(json));文字输入框提示实现：
#box{position:relative;}
#box span{color:#ccc;position:absolute;left:6px;top:2px;}
<span id="s1">请输入内容</span>
<input type="text" id="txt">事件对象：
事件冒泡：
document.onclick = function(){alert('document');};
<input type="button" value="按钮" onclick="alert('input')">
//点击按钮，从里往外传，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样式
#div1{width:200px;height:200px;background:#bfa;position:absolute;}本文转载于:
https://blog.csdn.net/qq_48687155/article/details/108159063
如果对您有所帮助，欢迎您点个关注，我会定时更新技术文档，大家一起讨论学习，一起进步。
来源:https://www.cnblogs.com/smileZAZ/p/17326637.html
免责声明：由于采集信息均来自互联网，如果侵犯了您的权益，请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容，谢谢合作！
页:
[1]