【前端 HTML+CSS+JavaScript(JS)】DOM练习-数字预警的实现带注释/总结

_小鹰

已于 2022-02-17 20:21:50 修改

阅读量393

点赞数

分类专栏：前端文章标签：前端 javascript html css

于 2022-02-16 21:33:32 首次发布

本文链接：https://blog.youkuaiyun.com/cc2855816075/article/details/122972066

版权

前端专栏收录该内容

38 篇文章

订阅专栏

作业要求：

实现数字预警。逢7…

页面效果：

在这里插入图片描述

要求：用户随便输入一个数字，可以重复，将用户输入的数字罗列在页面中，如果这个数字是7的倍数就将字体调整为红色，并且字体大于其他字体。

代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div>
		    请输入一个数字：<input type="text" id="num" />
			<input onclick="addNum()" type="button" value="添加"/>
		</div>
		
		<div id="result">
		</div>
		
		<script>
		    function addNum(){
		        // 获取输入框DOM和DIV的DOM对象
		        // 取出数字  .value
		        // 动态的创建一个span对象。  document.createElement("span");
		       	// 将数字文本加入span中。  spanDom.append(xxx);
		        // 判断数字是否是7的倍数。  
		        // 如果是就设置span的字体为红色，并且设置字体大小为36px；  spanDom.style.color="red"
		        // 将span加入到result DIV中。
				var numDom = document.getElementById("num");
				var resDom = document.getElementById("result");
				//可以校验
				var num = numDom.value;
				var spanDom = document.createElement("span");
				spanDom.style.marginRight = "20px";
				spanDom.append(num);
				if(num % 7 ==0){
					spanDom.style.color = "red";
					spanDom.style.fontSize = "36px";
				}
				resDom.appendChild(spanDom);
		    }
		</script>
	</body>
</html>