原生js实现唯美九九乘法表

最新推荐文章于 2024-05-03 11:47:20 发布

是你那

最新推荐文章于 2024-05-03 11:47:20 发布

阅读量201

点赞数 1

文章标签： javascript 前端 css3

本文链接：https://blog.csdn.net/jsmylo/article/details/124951345

版权

一.原生js实现九九乘法表，带简单的css样式。dom完全是js动态生成。
思路：
第一行生成一个span元素
第二行生成2个span元素
第三行生成3个span元素
第四行生成4个span元素
…
第九行生成9个span元素
第几行，被乘数就是几
二.效果图片
在这里插入图片描述
三.废话不说，上代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>原生js实现乘法表</title>
	</head>
	<body>
		<script src="js/index.js" type="text/javascript" charset="utf-8"></script>
	</body>
</html>

//原生js实现九九乘法表
function nine() {
	for(var x = 1; x <= 9; x++) {
		var p = document.createElement('p');
		for(var y = 1; y <= x; y++) {
			var span = document.createElement('span');
			p.appendChild(span);
			span.style.background = "linear-gradient(to right,#ff007f,#008282)";
			span.style.color = 'white';
			span.style.display = 'inline-block';
			span.style.letterSpacing = 3+"px";
			span.style.textAlign = 'center';
			span.style.width = 100+"px";
			span.style.marginLeft = 10 + "px";
			span.innerHTML = y +'x'+ x + '=' + x*y;
		}
		document.body.appendChild(p);
		document.body.style.background = "url('./img/360wallpaper.jpg')";//替换为你自己的图片路径
	}
}
nine();