htm+JS实现绘制数学函数绘图

news2024/11/13 15:13:03

htm+JS实现绘制数学函数绘图

其中常用的函数可参见,JS中常用的Math方法 https://blog.51cto.com/u_10725738/5253407

https://www.jb51.net/article/9151.htm

JS(JavaScript)常用Math函数与用法说明

方法描述示例
abs(x)返回数的绝对值。Math.abs(-10)//返回10
acos(x)返回数的反余弦值。Math.acos(1)//返回0
asin(x)返回数的反正弦值。Math.asin(1)//返回1.5707963267948965
atan(x)以介于 -PI/2 与 PI/2 弧度之间的数值来返回 x 的反正切值。Math.atan(0.50)//返回0.4636476090008061
atan2(y,x)返回从 x 轴到点 (x,y) 的角度(介于 -PI/2 与 PI/2 弧度之间)。Math.atan2(5,5)//输出0.7853981633974483
ceil(x)对数进行上舍入。

Math.ceil(0.60)
Math.ceil(-5.1) 

//返回1
//返回-5
cos(x)返回数的余弦。Math.cos(0)//返回1
exp(x)返回 e 的指数。Math.exp(5)//返回148.4131591025766
floor(x)对数进行下舍入。Math.floor(0.60)
Math.floor(-5.1)
//返回0
//返回-6
log(x)返回数的自然对数(底为e)。Math.log(1)//返回0
max(x,y)返回 x 和 y 中的最高值。Math.max(5,7)//返回7
min(x,y)返回 x 和 y 中的最低值。Math.min(5,7)//返回5
pow(x,y)返回 x 的 y 次幂。Math.pow(2,4)//返回16
random()返回 0 ~ 1 之间的随机数。Math.random()//返回类似0.6654807284142312的随机数
round(x)把数四舍五入为最接近的整数。Math.round(0.60)
Math.round(-4.40)
//返回1
//返回-4
sin(x)返回数的正弦。Math.sin(0)//返回0
sqrt(x)返回数的平方根。Math.sqrt(0.64)//返回0.8
tan(x)返回角的正切。Math.tan(10)//返回0.6483608274590866

运行效果

 项目目录结构

 特别说明源码取自网络。

数学函数绘图.html 源码:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>函数图像绘制工具</title>
		<script type="text/javascript" src="js/funcImg.js"></script>
		<style>
			#div-img {
				/* 此决定画布的宽高 */
				width: 500px;
				height: 500px;
			}
			#input-controller {
				padding: 10px;
				background-color: azure;
			}
		</style>
	</head>
	<body>
		<div id="input-controller">
			<div id="function">
				<button onclick="Add()">添加函数</button>
				<span id="mod" style="display:none" name="0">
					<input type="color"/>y=
					<input type="text" value="x^3" name="Fun"/>
					<button onclick="Delete(this.parentNode)">Delete</button>
	                <input type="checkbox" onclick="reDraw()" checked="checked"/>Draw Line
				</span>
			</div>
			<div id="option">
				X:<input id="xLeftValue" /> ~
				<input id="xRightValue" />
				<br> Y:
				<input id="yLeftValue" /> ~
				<input id="yRightValue" />
				<br>
				<span id="show-size">Size:</span>
			</div>
			<button onclick="change()">画图</button>
		</div>
		<div id="main">
			<h1>函数图像绘制工具</h1>
			<div id="div-img">
				<canvas id="graph"></canvas>
			</div>
		</div>
	</body>
	<script>
		const FONT_STYLE = "10px 黑体";
		const MIN = 1e-4;
		const MAX = 1e8;
		const EPS = 1e-12;
		const CANVAS = $("graph");
		const CONTEXT_2D = CANVAS.getContext("2d");
		const FUN_IMG_WIDTH = CANVAS.parentNode.clientWidth;
		const FUN_IMG_HEIGHT = CANVAS.parentNode.clientHeight;
		var xLeftValue = -FUN_IMG_WIDTH / 100; // x最左的值
		var xRightValue = FUN_IMG_WIDTH / 100;
		var yLeftValue = -FUN_IMG_HEIGHT / 100;
		var yRightValue = FUN_IMG_HEIGHT / 100;
		var tableX, tableY, countX, countY;
		var funStage = 0,
			mouseX, mouseY;
		var tmp;
	</script>
	<script>
		CANVAS.width = FUN_IMG_WIDTH;
		CANVAS.height = FUN_IMG_HEIGHT;
		$("show-size").innerHTML = "Size:" + FUN_IMG_WIDTH + "*" + FUN_IMG_HEIGHT;
		CANVAS.onmousedown = function(ob) {
			mouseX = ob.layerX;
			mouseY = ob.layerY;
			funStage = 1;
		}
		CANVAS.onmousemove = function(ob) {
			if(funStage != 1) {
				return;
			}
			var NoX, NoY, det;
			NoX = ob.layerX;
			NoY = ob.layerY;
			det = (mouseX - NoX) / FUN_IMG_WIDTH * (xRightValue - xLeftValue);
			xLeftValue += det;
			xRightValue += det;
			det = (NoY - mouseY) / FUN_IMG_HEIGHT * (yRightValue - yLeftValue);
			yLeftValue += det;
			yRightValue += det;
			mouseX = NoX;
			mouseY = NoY;
			reDraw();
			update();
		}
		CANVAS.onmouseup = function(ob) {
			if(funStage == 1) {
				funStage = 0;
				reDraw();
			}
		}
		CANVAS.onmouseleave = function(ob) {
			if(funStage == 1) {
				funStage = 0;
				reDraw();
			}
		}
		CANVAS.onmousewheel = function(ob) {
			// 取消事件的默认动作
			ob.preventDefault();
			// 放大的比例
			var ScaleRate = 0.9;
			var detail;
			if(ob.wheelDelta) {
				detail = ob.wheelDelta;
			} else if(ob.detail) {
				detail = ob.detail;
			}
			if(detail > 0) {
				scale(ob.layerX, FUN_IMG_HEIGHT - 1 - ob.layerY, ScaleRate);
			} else {
				scale(ob.layerX, FUN_IMG_HEIGHT - 1 - ob.layerY, 1 / ScaleRate);
			}
			reDraw();
			update();
		}
		// 初始化
		reDraw();
		update();
		Add();
	</script>
</html>

funcImg.js 源码:

function $(id) {
	return document.getElementById(id);
}
function getRandomColor() {
	var color = '#' + ('00000' + (Math.random() * 0x1000000 << 0).toString(16)).substr(-6);
	return color;
}
function FunWork(f, x) {
	switch(f) {
		case "":
			{
				return x;
				break;
			}
		case "sin":
			{
				return Math.sin(x);
				break;
			}
		case "cos":
			{
				return Math.cos(x);
				break;
			}
		case "tan":
			{
				return Math.tan(x);
				break;
			}
		case "abs":
			{
				return Math.abs(x);
				break;
			}
		case "sqrt":
			{
				return Math.sqrt(x);
				break;
			}
		case "ln":
			{
				return Math.log(x);
				break;
			}
		case "log":
			{
				return Math.log(x) / Math.LN2;
				break;
			} //2为底
		case "lg":
			{
				return Math.log(x) / Math.LN10;
				break;
			} //10为底
		case "floor":
			{
				return Math.floor(x);
				break;
			}
		case "ceil":
			{
				return Math.ceil(x);
				break;
			}
		case "int":
			{
				return parseInt(x);
				break;
			}
		default:
			{
				return NaN;
				break;
			}
	}
}
function ChangeToPointY(y) {
	return FUN_IMG_HEIGHT - 1 - parseInt((y - yLeftValue) / (yRightValue - yLeftValue) * FUN_IMG_HEIGHT);
}
function isChar(c) {
	return(c >= 'a' && c <= 'z') || (c >= 'A' && c <= 'Z');
}
function isDigit(c) {
	return c >= '0' && c <= '9';
}
function priority(c) {
	switch(c) {
		case '(':
			return 0;
			break;
		case '+':
			return 1;
			break;
		case '-':
			return 1;
			break;
		case '*':
			return 2;
			break;
		case '/':
			return 2;
			break;
		case '^':
			return 3;
			break;
		default:
			return -1;
			break;
	}
}
// 是运算符
function isOpt(c) {
	return priority(c) != -1;
}
function singleCalc(c, a, b) {
	if(c == '+') {
		return a + b;
	} else
	if(c == '-') {
		return a - b;
	} else
	if(c == '*') {
		return a * b;
	} else
	if(c == '/') {
		return a / b;
	} else
	if(c == '^') {
		return Math.pow(a, b);
	} else {
		return NaN;
	}
}
function getTable() {
	tmp = (xRightValue - xLeftValue + EPS) / 20;
	tableX = 1;
	countX = 0;
	countY = 0;
	while(tableX < tmp) {
		tableX *= 10;
	}
	while(tableX / 10 > tmp) {
		tableX /= 10;
		countX++;
	}
	if(tableX >= 1) {
		countX = 0;
	}
	if(tableX / 5 > tmp) {
		tableX /= 5;
		countX++;
	} else if(tableX / 2 > tmp) {
		tableX /= 2;
		countX++;
	}
	var i = parseInt(xLeftValue / tableX) + (xLeftValue > 0)
	for(; i * tableX < xRightValue; i++) {
		if(i == 0) {
			// y轴
			CONTEXT_2D.fillStyle = "black";
		} else {
			// 普通竖线
			CONTEXT_2D.fillStyle = "#CDB7B5";
		}
		tmp = (i * tableX - xLeftValue) / (xRightValue - xLeftValue) * FUN_IMG_WIDTH;
		var _width = 1;
		var _height = FUN_IMG_HEIGHT;
		CONTEXT_2D.fillRect(tmp, 0, _width, _height);
		// 竖线上的数字
		CONTEXT_2D.fillStyle = "red";
		CONTEXT_2D.font = FONT_STYLE;
		var _text = (i * tableX).toFixed(countX);
		var _x = tmp + 2;
		var _y = 10;
		CONTEXT_2D.fillText(_text, _x, _y);
	}
	tmp = (yRightValue - yLeftValue + EPS) / 20;
	tableY = 1;
	while(tableY < tmp) {
		tableY *= 10;
	}
	while(tableY / 10 > tmp) {
		tableY /= 10, countY++;
	}
	if(tableY / 5 > tmp) {
		tableY /= 5, countY++;
	} else if(tableY / 2 > tmp) {
		tableY /= 2, countY++;
	}
	if(tableY >= 1) {
		countY = 0;
	}
	var i = parseInt(yLeftValue / tableY) + (yLeftValue > 0);
	for(; i * tableY < yRightValue; i++) {
		// 横线
		if(i == 0) {
			// x轴
			CONTEXT_2D.fillStyle = "black";
		} else {
			// 普通横线
			CONTEXT_2D.fillStyle = "#CDB7B5";
		}
		tmp = (i * tableY - yLeftValue) / (yRightValue - yLeftValue) * FUN_IMG_HEIGHT;
		CONTEXT_2D.fillRect(0, FUN_IMG_HEIGHT - 1 - tmp, FUN_IMG_WIDTH, 1);
		// 横线上的数字
		CONTEXT_2D.fillStyle = "blue";
		CONTEXT_2D.font = FONT_STYLE;
		CONTEXT_2D.fillText((i * tableY).toFixed(countY), 0, FUN_IMG_HEIGHT - 1 - tmp);
	}
}
function drawArc(x, y) {
	CONTEXT_2D.beginPath();
	// arc(弧形),画圆
	CONTEXT_2D.arc(x, y, 1, 0, Math.PI * 2);
	CONTEXT_2D.closePath();
	CONTEXT_2D.fill();
}
function drawLine(lx, ly, px, py) {
	CONTEXT_2D.beginPath();
	CONTEXT_2D.moveTo(lx, ly);
	CONTEXT_2D.lineTo(px, py);
	CONTEXT_2D.closePath();
	CONTEXT_2D.stroke(); // 绘制
}
function reDraw() {
	CONTEXT_2D.clearRect(0, 0, FUN_IMG_WIDTH, FUN_IMG_HEIGHT);
	getTable();
	getFunction();
}
function change() {
	xLeftValue = parseFloat($("xLeftValue").value);
	xRightValue = parseFloat($("xRightValue").value);
	yLeftValue = parseFloat($("yLeftValue").value);
	yRightValue = parseFloat($("yRightValue").value);
	reDraw();
}
function update() {
	$("xLeftValue").value = xLeftValue;
	$("xRightValue").value = xRightValue;
	$("yLeftValue").value = yLeftValue;
	$("yRightValue").value = yRightValue;
}
function scale(x, y, times) {
	if(x < 0 || x >= FUN_IMG_WIDTH || y < 0 || y >= FUN_IMG_HEIGHT) return;
	if(times < 1 && (xRightValue - xLeftValue < MIN || yRightValue - yLeftValue < MIN)) {
		return;
	}
	if(times > 1 && (xRightValue - xLeftValue > MAX || yRightValue - yLeftValue > MAX)) {
		return;
	}
	x = xLeftValue + (xRightValue - xLeftValue) / FUN_IMG_WIDTH * x;
	y = yLeftValue + (yRightValue - yLeftValue) / FUN_IMG_HEIGHT * y;
	xLeftValue = x - (x - xLeftValue) * times;
	xRightValue = x + (xRightValue - x) * times;
	yLeftValue = y - (y - yLeftValue) * times;
	yRightValue = y + (yRightValue - y) * times;
}
function Calc(fun, X, Value) {
	var number = new Array(),
		opt = new Array(),
		F = new Array(),
		now = 0,
		f = "",
		tmp, a, b, sign = 1,
		base = 0,
		j;
	for(var i = 0; i < fun.length; i++) {
		for(j = 0; j < X.length; j++)
			if(X[j] == fun[i]) {
				if(i == 0 || isOpt(fun[i - 1])) now = Value[j];
				else now *= Value[j];
				break;
			}
		if(j == X.length)
			if(fun[i] == '(') F.push(f), f = "", opt.push('(');
			else
		if(fun[i] == ')') {
			number.push(now * sign);
			now = 0;
			sign = 1;
			base = 0;
			while((tmp = opt.pop()) != '(') {
				b = number.pop();
				a = number.pop();
				tmp = singleCalc(tmp, a, b);
				number.push(tmp);
			}
			now = FunWork(F.pop(), number.pop());
		} else
		if(fun[i] == '.') base = 1;
		else
		if(fun[i] == '+' && (i == 0 || priority(fun[i - 1]) != -1));
		else
		if(fun[i] == '-' && (i == 0 || priority(fun[i - 1]) != -1)) sign = -1;
		else
		if(fun[i] == 'e')
			if(i == 0 || isOpt(fun[i - 1])) now = Math.E;
			else now *= Math.E;
		else
		if(fun[i] == 'p' && fun[i + 1] == 'i') {
			if(i == 0 || isOpt(fun[i - 1])) now = Math.PI;
			else now *= Math.PI;
			i += 1;
		} else
		if(isDigit(fun[i]))
			if(base == 0) now = now * 10 + (fun[i] - '0');
			else base /= 10, now += base * (fun[i] - '0');
		else
		if(isChar(fun[i])) f += fun[i];
		else if(isOpt(fun[i])) {
			number.push(now * sign);
			now = 0;
			sign = 1;
			base = 0;
			var s = priority(fun[i]);
			if(s == -1) return 0;
			while(s <= priority(opt[opt.length - 1])) {
				b = number.pop();
				a = number.pop();
				tmp = singleCalc(opt.pop(), a, b);
				number.push(tmp);
			}
			opt.push(fun[i]);
		}
	}
	number.push(now * sign);
	while(opt.length > 0) {
		b = number.pop();
		a = number.pop();
		tmp = singleCalc(opt.pop(), a, b);
		number.push(tmp);
	}
	return number.pop();
}
function getFunction() {
	// group:函数(可能是复数)
	var group = document.getElementsByName("Fun");
	var x, y;
	var lax, lay;
	var px, py
	var color, outSide, type
	var ValueL, ValueR, ValueS, isDrawLine, tmp, TMP;
	for(var k = 1; k < group.length; k++) {
		var _funcItem = group[k].parentNode;
		outSide = 1;
		//type = _funcItem.children[0].value;
		// 颜色
		color = _funcItem.children[0].value;
		// 函数表达式
		funcExpression = group[k].value;
		// 是否画线(默认画点)
		isDrawLine = _funcItem.children[3].checked;
		CONTEXT_2D.fillStyle = CONTEXT_2D.strokeStyle = color;
		for(var i = 0; i < FUN_IMG_WIDTH; i++) {
			x = xLeftValue + (xRightValue - xLeftValue) / FUN_IMG_WIDTH * i;
			y = Calc(funcExpression, ['x'], [x]);
			if(isNaN(y)) {
				continue;
			}
			px = i;
			py = ChangeToPointY(y);
			if(y >= yLeftValue && y < yRightValue) {
				// 画圆
				drawArc(px, py);
				if(isDrawLine) {
					drawLine(lax, lay, px, py);
				}
				outSide = 0;
			} else {
				if(isDrawLine) {
					if(!outSide) {
						drawLine(lax, lay, px, py);
					}
				} else {}
				outSide = 1;
			}
			lax = px;
			lay = py;
		}
	}
}
function Add() {
	var newInput = $("mod").cloneNode(true);
	newInput.style.display = "block";
	newInput.children[0].value = getRandomColor();
	$("function").appendChild(newInput);
}
function Delete(node) {
	node.parentNode.removeChild(node);
}

附学习资料
https://blog.csdn.net/Mingyueyixi/article/details/80964430

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1972.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

【Linux】--谈谈冯诺依曼体系结构和操作系统

文章目录冯诺依曼体系组成部分数据层面CPU存储器外设结论操作系统什么是操作系统为什么要有操作系统怎么去管理总结冯诺依曼体系 冯诺依曼结构是一种将程序指令存储器和数据存储器合并在一起的存储器结构&#xff0c;数学家冯诺依曼提出了计算机制造的三个基本原则&#xff0c…

C++继承、多继承及菱形继承

继承 继承是C面向对象的三大特性之一&#xff08;封装、继承和多态&#xff09;。 一、构造和析构顺序 先执行父类构造函数&#xff0c;再执行子类构造函数&#xff1b; 先执行子类析构函数&#xff0c;在执行父类析构函数。 二、同名隐藏 2.1 概念 子类中的同名属性和成…

vue父子组件传值记录

之前父子组件传值不太熟悉&#xff0c;组件间传值要么用vuex&#xff0c;要么用sessionStorage缓存&#xff0c;但是sessionStorage感觉用多了不太好&#xff0c;缓存太多容易混淆&#xff0c;vuex还是比较好用&#xff0c;&#xff0c;但是用的过程中好像有个问题&#xff0c;…

Shell之计算命令、流程控制、函数

文章目录&#x1f68f; Shell计算命令&#x1f680; Shell计算命令&#xff1a;expr命令详解&#x1f6ac; 求值表达式(整数 前面)&#x1f6ac; 字符串语法&#x1f6ac; 小结&#x1f684; Shell计算命令&#xff1a;(())命令详解&#x1f6ac; 小结&#x1f692; Shell计算命…

linux:2.3.4 查找/搜索命令(find+grep)+压缩/解压缩命令(gzipbzip2+tar+mv+mkdir)

2.3.4 查找/搜索命令 1. find 在 Windows 中搜索文件&#xff0c;一般查找文件需要传入两个条件&#xff1a;① 在哪些目录中查找&#xff1b; ② 查找的内容.。在 Linux 中&#xff0c;查找文件的也需要这两个条件&#xff0c;不同于 Windows 使用搜索框 查找&#xff0c;Li…

蓝桥杯单片机第九届省赛题详细讲解(电子钟)

看之前强烈建议先自己做一遍&#xff01;&#xff01;&#xff01;演示视频题目讲解完整程序main.conewire.honewire.cds1302.hds1302.c工程文件演示视频 题目讲解 首先还是一如既往从题目的程序框图准备起。 将ds18b20&#xff0c;独立按键&#xff0c;数码管显示&#xff0…

弹指间计算机协会 2021“千里码”程序设计竞赛 题面

A.Hello World! Description 为保证所有参赛人员在比赛中都能拿到分数&#xff0c;本题只考察c的输出。 算法比赛不仅考察思考问题的能力&#xff0c;也需要一定的细心程度。 直接输出" HelI0 Wor1d!&#xff01;" &#xff0c;您将获得此题的全部分数。 Input 本…

django基于python的旅游网站--python-计算机毕业设计

项目介绍 旅游网站系统的用户分管理员和用户两个角色的权限子模块。 管理员所能使用的功能主要有&#xff1a;首页、个人中心、用户管理、景点分类管理、景点信息管理、门票预订管理、酒店信息管理、客房信息管理、客房预订管理、美食信息管理、用户分享、系统管理等。 用户可…

[MySQL]变量

文章目录1. 变量1.1 系统变量1.1.1 系统变量分类1.1.2 查看系统变量查看所有系统变量查询部分系统变量查看指定系统变量1.1.3 修改系统变量方式一&#xff1a;修改配置文件方式二&#xff1a;使用 set 设置系统变量的值1.2 用户变量1.2.1 用户变量的分类1.2.2 会话用户变量变量…

Maven

Maven是专门用于管理和构建Java项目的工具&#xff0c;它的主要功能有&#xff1a; 提供了一套标准化的项目结构提供了一套标准化的构建流程&#xff08;编译&#xff0c;测试&#xff0c;打包&#xff0c;发布...&#xff09;提供了一套依赖管理机制标准化的项目结构 不同IDE之…

C++语法——详细剖析多态与虚函数

目录 一.虚函数与多态的概念与基本使用 &#xff08;一&#xff09;.概念 &#xff08;二&#xff09;.基本使用 二.虚函数的底层 三.特殊的虚函数&#xff08;协变&#xff09; 四.多态在多继承、菱形继承与菱形虚拟继承中的使用。 &#xff08;一&#xff09;.多继承 …

C语言分支与循环实战篇-猜数字小游戏/关机小程序

前言 &#x1f47b;作者&#xff1a;龟龟不断向前 &#x1f47b;简介&#xff1a;宁愿做一只不停跑的慢乌龟&#xff0c;也不想当一只三分钟热度的兔子。 &#x1f47b;专栏&#xff1a;C初阶知识点 &#x1f47b;工具分享&#xff1a; 刷题&#xff1a; 牛客网 leetcode笔记软…

大一学生HTML5期末大作业——基于HTML+CSS制作传统节日美食13页(美食网站设计与实现)

&#x1f380; 精彩专栏推荐&#x1f447;&#x1f3fb;&#x1f447;&#x1f3fb;&#x1f447;&#x1f3fb; ✍️ 作者简介: 一个热爱把逻辑思维转变为代码的技术博主 &#x1f482; 作者主页: 【主页——&#x1f680;获取更多优质源码】 &#x1f393; web前端期末大作业…

[LeetCode周赛复盘] 第 317 场周赛20221030

[LeetCode周赛复盘] 第 317 场周赛20221030 一、本周周赛总结二、 [Easy] 6220. 可被三整除的偶数的平均值1. 题目描述2. 思路分析3. 代码实现三、[Medium] 6221. 最流行的视频创作者1. 题目描述2. 思路分析3. 代码实现四、[Medium] 6222. 美丽整数的最小增量1. 题目描述2. 思路…

终极Hadoop大数据教程

终极Hadoop大数据教程 包含 MapReduce、HDFS、Spark、Flink、Hive、HBase、MongoDB、Cassandra、Kafka 等的数据工程和 Hadoop 教程&#xff01; 课程英文名&#xff1a;The Ultimate Hands-On Hadoop - Tame your Big Data! 此视频教程共17.0小时&#xff0c;中英双语字幕&…

1.3 信号处理函数,创建worker进程

文章目录1、信号处理函数2、创建worker线程3、sigsuspend函数说明4、write函数思考1、信号处理函数 1、初始化信号的函数&#xff0c;用于注册信号处理程序 2、信号处理函数 初始化信号函数&#xff0c;遍历结构体数组&#xff0c;然后给结构体数组中的每个成员注册信号处理函数…

python实现自动检测核酸用码记录 ---- 自动化办公小技巧(摸鱼利器)

自动检测核酸用码记录&#x1f947;预备知识✈️os库os.path.exists()os.mkdir()os.remove()os.listdir()&#x1f47d;Python 3 查看字符编码方法⏰python3获取当前系统时间&#x1f424;读取图片&#xff0c;保存到指定目录&#x1f47c;将数据保存到csv文件中&#x1f948;p…

使用html+css实现一个静态页面(含源码)

HTML实例网页代码, 本实例适合于初学HTML的同学。该实例里面有设置了css的样式设置&#xff0c;有div的样式格局&#xff0c;这个实例比较全面&#xff0c;有助于同学的学习,本文将介绍如何通过从头开始设计个人网站并将其转换为代码的过程来实践设计。 文章目录一、网页介绍一…

freeRTOS学习(三)

任务管理 任务功能&#xff1a;任务以C函数的形式实现。唯一特别的地方是它们的原型&#xff0c;它必须返回void并接受一个void指针形参。 void ATaskFunction(void *pvParameters);**每个任务本身都是一个小程序。它有一个入口点&#xff0c;通常在无限循环中永远运行&#…

回归测试选择用例,看这里就可以了。

介绍 在软件生命周期中&#xff0c;软件经常发生变化&#xff0c;软件开发人员任何代码改动都会有引入故障的风险&#xff09;。 为了消除或减小这种风险&#xff0c;在软件迭代开发模式下&#xff0c;回归测试扮演着重要的角色&#xff1a;它能够帮助测试人员验证新增的功能…