js基础练习题

最新推荐文章于 2024-12-10 10:08:19 发布

小蜜蜂学爪哇

最新推荐文章于 2024-12-10 10:08:19 发布

阅读量3.1k

点赞数 5

分类专栏：前端练习题文章标签： javascript css 前端

本文链接：https://blog.csdn.net/qq_48687155/article/details/108159063

版权

这篇博客涵盖了一系列JavaScript基础练习，包括隔行换色、简易计算器、双色球随机数生成、鼠标事件处理、条件判断、背景色换肤、全选功能、反选功能、联动选择、选项卡实现、定时器、文字时钟、事件冒泡等，深入浅出地介绍了JavaScript的各种常见应用和编程技巧。

摘要由CSDN通过智能技术生成

隔行换色（%）:

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&#

最低0.47元/天解锁文章