记录-js基础练习题

喷你咋滴

这里给大家分享我在网上总结出来的一些知识，希望对大家有所帮助

隔行换色（%）:

1. window.onload = function() {
2.     var aLi = document.getElementsByTagName('li');
3.     for(var i = 0; i < aLi.length; i++){
4.         if(i%2 == 1){
5.                         aLi[i].style.background = '#bfa';
6.         }
7.     }
8. }
9. <ul>
10.     <li>aaa</li>
11.         <li>bbb</li>
12.         <li>ccc</li>
13.         <li>ddd</li>
14. </ul>

复制代码

简易计算器：

1. <input type="text" id = "num1">
2. <select name="" id="sel">
3.         <option value="+">+</option>
4.         <option value="-">-</option>
5.         <option value="*">*</option>
6.         <option value="/">/</option>
7. </select>
8. <input type="text" id="num2">
9. <input type="button" value="计算" id="btn">

复制代码

双色球随机数生成：

目标：生成一组（7个） 1-33之间的随机不重复的整数（1.生成一个1-33之间的整数。 2.生成7个–>循环长度不固定用while循环。 3.要求不重复,补零操作）

1. [/code][size=3]鼠标滑过div显示隐藏：[/size]
3. [code]

复制代码

条件判断if：

点击按钮，如果div显示，那么隐藏它，如果div隐藏，那么显示它。

1. [/code][size=3]背景色换肤功能：[/size]
3. 一个页面两个按钮，一个div点击不同的按钮，背景色分别变成不同的颜色，字体大小也要改变。
4. [code]<input type="button" value="白天" οnclick="showDay()">
5. <input type="button" value="夜晚" οnclick="showNight()">
6. 实现白天夜晚换肤功能

复制代码

行为和结构的分离：

1. [/code][size=3]全选功能的实现：[/size]
3. [code]<input type="button" value="全选" id="all">
4. <hr>
6.         <input type="checkbox" name="">
7.         <input type="checkbox" name="">
8.         <input type="checkbox" name="">
9.         <input type="checkbox" name="">

复制代码

操作元素类容和属性的两种方式：

①方式：

1. window.onload = function(){
2.         var oBtn = document.getElementById('btn');
3.         oBtn.style.background = 'red';
4.         //方式二能实现1实现不了的功能oBtn['style']['background'] = 'green';
5.     //var aaa = 'background';
6.     //oBtn.style[aaa] = 'green';能够使用变量
7. }

复制代码

②内容：

• 表单元素：oBtn.value
  
• 非表单元素：前端学习
  oP.innerHTML
  

反选功能实现：

1. window.onload = function() {
2.         var oR = document.getElementById('reverse');
3.         var oC = document.getElementById('C1');
4.         oR.onclick = function(){
5.                 if(oC.checked == true){
6.             oC.checked = false;
7.                 }else{
8.             oC.checked = true
9.         }
10.         }
11. }
12. <input type = "button"  value="单个复选框反选" id="reverse">
13. <input type="checkbox" name="" id="C1">
14.     //这样写太麻烦了，不够简洁。改变如下：

复制代码

1. [/code][size=3]联动选择：[/size]
3. 需求：点击上面的全选，那么下面都选中，如果下面全选中，那么上面也选中，如果下面有一个没选中，那么上面不选中。
4. [code]<input type="checkbox" name id="all">全选
5. <hr>
7.     <input type="checkbox">
8.     <input type="checkbox">
9.     <input type="checkbox">
11. //为什么必须加一个box

复制代码

选项卡实现（排他思想）:

for循环是一瞬间完成的

1.         <input type="button" value="体育" >
2.         <input type="button" value="娱乐">
3.         <input type="button" value="新闻">
4.         ***获得100米第一
5.         段奕宏真帅！
6.         美国懂王昨日于白宫遭**

复制代码

简易定时器：

1. [/code][size=3]文字时钟：[/size]
3. [code]<p id="p1">2020年8月20日15：56：30星期四</p>

复制代码

延迟广告：

图片2s后显示，2s后消失，当鼠标移入图片时，不消失，移出后2s消失。
定时器里面可以套定时器

1. <img src="https://www.cnblogs.com/../image/1.jpg" id="pic">

复制代码

自定义属性：

1. [/code][size=3]轮播图（重点）：[/size]
3. [code]        <a target="_blank" href="https://www.cnblogs.com/javascript:;" id="prev"><-</a>
4.     <input type="button" value="aaa" >
5.     <input type="button" value="bbb">
6.     <input type="button" value="ccc">
7.     <a target="_blank" href="https://www.cnblogs.com/javascript:;" id="next">-></a>
8.     aaa
9.     bbb
10.     ccc

复制代码

简化代码（封装）+ 实现自动播放功能 如下：

1. [/code][size=3]理解立即执行函数：[/size]
3. [code]var a = 12;
4. alert((a)); //2层括号不影响结果
5. var show = function(){};
6. show(); //(show)()
7. ;(function(){})();  //防止别人的代码影响自己的
9. (function(){
10.         var a = b = 10;
11. })();
12. console.log(a); //undefined
13. console.log(b); //10

复制代码

简易发布留言：

1. [/code][size=3]上移下移功能实现：[/size]
3. [code]<ul id="ul1">
4.         <li><span>0.床前明月光</span>
5.                 <a target="_blank" href="https://www.cnblogs.com/javascript:;" >上移</a>
6.                 <a target="_blank" href="https://www.cnblogs.com/javascript:;" >下移</a></li>
7.         <li><span>1.疑是地上霜</span>
8.                 <a target="_blank" href="https://www.cnblogs.com/javascript:;" >上移</a>
9.                 <a target="_blank" href="https://www.cnblogs.com/javascript:;" >下移</a></li>
10.         <li><span>2.举头望明月</span>
11.                 <a target="_blank" href="https://www.cnblogs.com/javascript:;" >上移</a>
12.                 <a target="_blank" href="https://www.cnblogs.com/javascript:;" >下移</a></li>
13.         <li><span>3.低头思故乡</span>
14.                 <a target="_blank" href="https://www.cnblogs.com/javascript:;" >上移</a>
15.                 <a target="_blank" href="https://www.cnblogs.com/javascript:;" >下移</a></li>       
16. </ul>

复制代码

右下角悬浮框功能实现：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-SwhN8Ctu-1598018747062)(C:\Users\Hrj201305042\AppData\Roaming\Typora\typora-user-images\image-20200821143137668.png)]

1. //物体实际占的距离
2. window.onload = function(){
3.         var oDiv = document.getElementById('div1');
4.         alert(oDiv.offsetHeight);
5. };
6. //关于滚动的距离
7. body{height:3000px;}
8. #btn{position:fixed; left:10px; top:200px;}
9. window.onscroll = function(){
10.         var oBtn = document.getElementById('btn');
11.         oBtn.onclick = function(){
12.                 var sT = document.documentElement.scrollTop || document.body.scrollTop;
13.                 alert(sT);
14.         };
15. };
16. //可视区的高度
17. window.onload = function(){
18.         var oBtn = document.getElementById('btn');
19.         oBtn.onclick = function(){
20.                 alert(document.documentElement.clientHeight);       
21.         };
22. };

复制代码

1. [/code]json和数组的区别：
2. json中每个元素是以字符串作为下标，数组则是以数字作为下标。json使用for in循环，数组一般使用for循环。
3. [code]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}

1. [/code]②json转字符串{“name”: “leo” , “age” : 18} => name=leo&age=18
2. [code]function json2url(json){
3.         var arr = [];
4.         for(var name in json){
5.                 //name user
6.                 //json[name] leo
7.                 arr.push(name + '=' + json[name]);
8.                 ['name=leo', 'age=18']
9.         }
10.         return arr.join('&');
11. }
12. var json = {user:"leo", age:18, class:"javas"};
13. alert(json2url(json));

复制代码

文字输入框提示实现：

1. #box{position:relative;}
2. #box span{color:#ccc;position:absolute;left:6px;top:2px;}
5.         <span id="s1">请输入内容</span>
6.         <input type="text" id="txt">

复制代码

事件对象：

1. [/code][size=3]事件冒泡：[/size]
3. [code]document.onclick = function(){alert('document');};
5.         <input type="button" value="按钮" onclick="alert('input')">
6. //点击按钮，从里往外传，input->div1->document.
7.        //(父级没有事件也往上传)如果input的上级div不添加事件 input-> document
8.       
9. //取消冒泡：1标准：oEvent.stopPropagation&&oEvent.stopPropagation();
10.                 2.IE: oEvent.cancelBubble&&(oEvent.cancelBubble=true);
12. //绑定事件：FF chrome
13. oBtn.addEventListener('click',aaa,false);
14. //IE6-8 没有捕获阶段，只有冒泡
15. oBtn.attachEvent('onclick', aaa;

复制代码

获取鼠标点击位置：

1. document.onclick = function(){
2.     //chrome , IE
3.         alert('left:' + event.clientX+',top:'+event.clientY);
4. };

复制代码

div跟随鼠标移动：

鼠标移动，div跟随鼠标移动
实现：1.获取鼠标位置 2.赋值给div的left和top样式

1. #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】 我们会及时删除侵权内容，谢谢合作！