JavaScript基础案例+代码

最新推荐文章于 2023-08-23 16:15:12 发布

小蜜蜂学爪哇

最新推荐文章于 2023-08-23 16:15:12 发布

阅读量1.1k

点赞数 2

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

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

版权

本文整理了20个JavaScript基础实战案例，包括显示/隐藏文本、密码格式验证、排他思想、背景图片换肤、倒计时、猜数字游戏等，旨在通过实践加深对JavaScript知识点的理解。

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

学如逆水行舟，不进则退。在学习JavaScript的过程中，我发现只有把一些基本的练习题练熟，自己才能更好的理解每一个知识点，所以我整理了一些学习视频中的基础题，以便自己随时脑补代码。

1. 显示或隐藏文本框内容

显示隐藏文本框内容

代码如下：

<body>
    <input type="text" value="请输入">
    <script>
        var text = document.querySelector('input');
        text.onfocus = function () {
   
            if (this.value === '请输入') {
   
                this.value = '';
            }
            // 获得焦点需要把文本框里的文字颜色变黑
            this.style.color = '#333';
        }
        text.onblur = function () {
   
            if (this.value === '') {
   
                this.value = '请输入';
            }
            // 失去焦点把文字颜色变浅
            this.style.color = '#999';
        }
    </script>
</body>

2.密码框格式提示错误信息

密码框格式提示错误信息

代码如下：

<style>
	div {
   
		width: 600px;
		margin: 100px auto;
	}
	.message {
   
		display: inline-block;
		font-size: 12px;
		color: #999;
		background: url(../picture/JS/tips.png) no-repeat left center;
		background-size: 15px 15px;
		padding-left: 20px;
	}
	.wrong {
   
		color: red;
		background-image: url(../picture/JS/wrong.png);
	}
	.right {
   
		color: green;
		background-image: url(../picture/JS/right.png);
	}
</style>
<body>
    <div class="register">
        <input type="text" class="inp">
        <p class="message">请输入6~16位密码</p>
    </div>
    <script>
        var inp = document.querySelector('.inp');
        var message = document.querySelector('.message');
        inp.onblur = function() {
   
            if (this.value.length < 6 || this.value.length >16) {
   
                message.className = 'message wrong';
                message.innerHTML = '您输入的字数不对，要求6~16位';
            } else {
   
                message.className = 'message right';
                message.innerHTML = '输入正确';
            }
        }
    </script>
</body>

3.排他思想

排他思想

如上图所示，给一组元素都添加点击事件，采用for循环，有四个按钮，当我们点击其中的一个时，它会变色，每次都只有一个按钮的颜色会发生变化。（意味着下一次点击时，上一次因点击而改变的颜色会消失。）
代码如下：

<button>按钮1</button>
<button>按钮2</button>
<button>按钮3</button>
<button>按钮4</button>
<script>
	var btns = document. getElementsByTagName('button');
	for (var i = 0; i < btns.length; i++) {
   
		btns[i].onclick = function() {
   
			// 先把所有按钮的背景颜色去掉
			for (var i = 0; i < btns.length; i++){
   
			btns[i].style.backgroundColor = '';
			}
			this.style.backgroundColor = 'gray';
		}
	}
</script>

4.多个点击事件-背景图片换肤效果

背景图片换肤效果

<style>
	* {
   
		margin: 0;
		padding: 0;
	}
	body {
   
		background: url(../picture/7.7jd/1.jpg.webp) no-repeat center top;
	}
	li {
   
		list-style: none;
	}
	.pic-wrapper {
   
		overflow: hidden;
		margin: 100px auto;
		background-color: #fff;
		width: 410px;
		padding-top:

最低0.47元/天解锁文章