JS DOM操作练习

最新推荐文章于 2022-11-04 13:00:00 发布

Jerem1ah

最新推荐文章于 2022-11-04 13:00:00 发布

阅读量554

点赞数 1

文章标签： javascript 前端开发语言 html

本文链接：https://blog.csdn.net/qq_46266956/article/details/122397398

版权

JS和数学图像结合，dom操作练习

效果图如下

代码冗杂，功能也不太完善，还有很多缺点

<!DOCTYPE html>
<html>
<head>
	<title>demo</title>
</head>
<body>

	<input id="btnClick1" type="button" value="sin" onclick="sin1();sin2();"/>
	
	<input id="btnClick3" type="button" value="paowuxian" onclick="paowuxian1();paowuxian2();"/>
<script> 

//初始化数据
var top0 = 300;//定义·原定坐标--此坐标以浏览器为基准
var left0 = 600;//定义·原定坐标--此坐标以浏览器为基准
var xn = 580;//定义 格点数
var yn = 280;//定义 格点数
var box = 2;//定义盒子宽度 高度



//定义一个坐标轴
function zuobiao(){

//x轴
var count=0;//计数器
var div=[];
for(var i=0;i<xn;i++){
	count+=box;
	div[i]=document.createElement("div");
	document.body.appendChild(div[i]);
	div[i].style.width=box+"px";
    div[i].style.height=box+"px";
    div[i].style.position="absolute";
    //图形 算法_基础
    //抛物线
    div[i].style.left= left0-(xn*box/2)+count +"px";
    div[i].style.top= top0+"px";

    div[i].style.backgroundColor="black";

}
//y轴
var count=0;//计数器
var div=[];
for(var i=0;i<yn;i++){
	count+=box;
	div[i]=document.createElement("div");
	document.body.appendChild(div[i]);
	div[i].style.width=box+"px";
    div[i].style.height=box+"px";
    div[i].style.position="absolute";
    //图形 算法_基础
    //抛物线
    div[i].style.left= left0 +"px";
    div[i].style.top= top0-(yn*box/2)+count +"px";
    div[i].style.backgroundColor="black";

}

}


//创建规律盒子
var box2=15;//坐标点的宽度 高度
var shuru=1000;//打印到第n个点
var danweichangdu=20;//定义一个单位长度
var zhongxin_top=top0+box/2;//中心点
var zhongxin_left=left0+box/2;//中心点
var zhongxinyuansu_top=zhongxin_top-box2/2;//原点位置展示
var zhongxinyuansu_left=zhongxin_left-box2/2;//原点位置展示
 


//定义右边图像
function paowuxian1(){

var div=[];
for(var i=1;i<shuru;i++){
	//count=0;
	div[i]=document.createElement("div");
	document.body.appendChild(div[i]);
	div[i].style.width="2px";
    div[i].style.height="2px";
    div[i].style.position="absolute";
    //图形 算法_基础
    //抛物线 
    div[i].style.left=zhongxin_left-1+i+"px";
    div[i].style.top=zhongxin_top-1-i*i*0.02+"px";//实现抛物线图像
    //div[i].style.top=zhongxin_top-1-i+"px";//实现正比例函数
    //div[i].style.top=zhongxin_top-1-30*Math.sin(i/20)+"px";//实现正弦函数
   //div[i].style.top=zhongxin_top-1-50*Math.log(i/30)+"px";//ln函数
    div[i].style.backgroundColor="red";

}


}


//定义右边图像
function sin1(){

var div=[];
for(var i=1;i<shuru;i++){
	//count=0;
	div[i]=document.createElement("div");
	document.body.appendChild(div[i]);
	div[i].style.width="2px";
    div[i].style.height="2px";
    div[i].style.position="absolute";
    //图形 算法_基础
    //div[i].style.left=300+i*0.1+"px";
    //div[i].style.top=300-i*0.1+"px";
    //抛物线 
    div[i].style.left=zhongxin_left-1+i+"px";
    //div[i].style.top=zhongxin_top-1-i*i*0.02+"px";//实现抛物线图像
    //div[i].style.top=zhongxin_top-1-i+"px";//实现正比例函数
    div[i].style.top=zhongxin_top-1-30*Math.sin(i/20)+"px";//实现正弦函数
   //div[i].style.top=zhongxin_top-1-50*Math.log(i/30)+"px";//ln函数
    div[i].style.backgroundColor="red";

}

}


//定义左边图像
function paowuxian2(){

var div=[];
for(var i=0;i<shuru;i++){
	//count=0;
	div[i]=document.createElement("div");
	document.body.appendChild(div[i]);
	div[i].style.width="2px";
    div[i].style.height="2px";
    div[i].style.position="absolute";
    //图形 算法_基础
    //div[i].style.left=300+i*0.1+"px";
    //div[i].style.top=300-i*0.1+"px";
    //抛物线 
    div[i].style.left=zhongxin_left-1-i+"px";
    div[i].style.top=zhongxin_top-1-i*i*0.02+"px";//实现抛物线图像
    //div[i].style.top=zhongxin_top-1-i+"px";//实现正比例函数
    //div[i].style.top=zhongxin_top-1+30*Math.sin(i/20)+"px";//实现正弦函数//为了实现完整图像，-号要变为+号
    div[i].style.backgroundColor="red";

}

}


//定义左边图像
function sin2(){


var div=[];
for(var i=0;i<shuru;i++){
	//count=0;
	div[i]=document.createElement("div");
	document.body.appendChild(div[i]);
	div[i].style.width="2px";
    div[i].style.height="2px";
    div[i].style.position="absolute";
    //图形 算法_基础
    //div[i].style.left=300+i*0.1+"px";
    //div[i].style.top=300-i*0.1+"px";
    //抛物线 
    div[i].style.left=zhongxin_left-1-i+"px";
    //div[i].style.top=zhongxin_top-1-i*i*0.02+"px";//实现抛物线图像
    //div[i].style.top=zhongxin_top-1-i+"px";//实现正比例函数
    div[i].style.top=zhongxin_top-1+30*Math.sin(i/20)+"px";//实现正弦函数//为了实现完整图像，-号要变为+号
    div[i].style.backgroundColor="red";

}

}


zuobiao();

</script>
</body>
</html>

Jerem1ah

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
JS DOM操作练习

JS和数学图像结合，dom操作练习效果图如下代码冗杂，功能也不太完善，还有很多缺点<!DOCTYPE html><html><head> <title>demo</title></head><body> <input id="btnClick1" type="button" value="sin" onclick="sin1();sin2();"/> <inpu..
复制链接

扫一扫