面向对象实列

落日映苍穹つ 2024-04-19 12:10 46阅读 0赞

<style type="text/css">
    			.active div {
    				position: absolute;
    				top: 10;
    				left: 10;
    				width: 100px;
    				height: 100px;
    				background-color: red;
    			}
    		</style>
    	</head>
    
    	<body>
    
    		<div class="active">
    			<input type="text" placeholder="输入id" />
    			<button>生成一个方块</button>
    		</div>
    
    	</body>
    	<script type="text/javascript">
    		var ipt = document.getElementsByTagName('input')[0];
    		var btn = document.getElementsByTagName('button')[0];
    		var active = document.getElementsByClassName('active')[0];
    		//点击事件  
    		btn.onclick = function() {
    			if(document.getElementById(ipt.value) == undefined) {
    				//  创建构造函数
    				function tabswitch(id) {
    					this.odiv = null;
    					this.id = id;
    					//创建div标签
    					this.abbr = function() {
    						this.odiv = document.createElement('div');
    						this.odiv.id = this.id;
    						active.appendChild(this.odiv);
    						console.log(this.odiv);
    					}
    					this.abbr();
    					tabswitch.prototype.move = function() {
    						var odiv = this.odiv;
    						//给需要移动的元素添加onmousedown事件
    						odiv.onmousedown = function(ev) {
    							var event = window.event || ev;
    							// 获取屏幕中可视化的宽高的坐标
    							var dx = event.clientX - odiv.offsetLeft;
    							var dy = event.clientY - odiv.offsetTop;
    							console.log(event);
    							console.log(dy)
    							//实时改变目标元素odiv的位置
    							document.onmousemove = function(ev) {
    								var event = window.event || ev;
    								odiv.style.left = event.clientX - dx + 'px';
    								odiv.style.top = event.clientY - dy + 'px';
    							}
    
    							//抬起停止拖动
    							document.onmouseup = function() {
    								document.onmousemove = null;
    								document.onmouseup = null;
    
    							}
    						}
    					}
    				}
    
    				var obj = new tabswitch(ipt.value);
    				obj.move();
    			} else {
    				alert('id已存在！')
    
    			}
    
    		}
    	</script>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N0eWxlMjAxOTA0_size_16_color_FFFFFF_t_70]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N0eWxlMjAxOTA0_size_16_color_FFFFFF_t_70]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/6c8a56ba89124e6099e9fcb9603feef8.png

发表评论取消回复

表情：

评论列表（有 0 条评论，46人围观）

还没有评论，来说两句吧...

相关阅读

相关 Java面向对象编程原则违反引发的问题实操

在Java面向对象编程中，有几个基本原则可能会引发问题。下面我将举几个例子来实操这些问题： 1. **封装**：违背可能导致数据泄露或修改困难。例如： ```java pub

痛定思痛。/ 2024年11月30日 21:42/ 0 赞/ 60 阅读

相关面向对象实列

<style type="text/css"> .active div { position: absolute; t...

落日映苍穹つ/ 2024年04月19日 12:10/ 0 赞/ 47 阅读

相关 java中的实列是什么

Java中的实例是由类创建的对象。当定义一个类时，它只是一个抽象的概念。要使用类来执行具体的任务，必须创建一个实例或对象。实例是通过使用new关键字创建的，它可以访问类中的所有

我会带着你远行/ 2024年03月22日 15:47/ 0 赞/ 11 阅读

相关面向对象技术 -- 面向对象概念

背景看了部分软工视频，对面向对象的概念有了些许的了解。什么是 > 面向对象=对象+类+继承+通信若一个系统使用这样 4 个概念设计和实现的，则这个软件系统

た入场券/ 2023年10月17日 21:53/ 0 赞/ 54 阅读

相关【面向对象】基础（二）：面向对象 VS 面向过程

1.面向对象 1.1 面向对象编程面向对象编程是一种编程范式或编程风格。它以类或对象作为组织代码的基本单元将封装、抽象、继承、多态四个特性，作为

布满荆棘的人生/ 2023年01月14日 01:58/ 0 赞/ 247 阅读

相关 Java面向对象编程（14）形参和实参

一、区别： 1、函数定义方式不同形参出现在函数定义中，在整个函数体内都可以使用，离开该函数则不能使用。实参出现在主调函数中，进入被调函数后，实参变量也不能使

心已赠人/ 2022年10月31日 15:53/ 0 赞/ 219 阅读

相关面向过程，面向对象

面向过程: 注重事件进行的过程，根据步骤运行。面向对象：在java中万物皆对象。优点：方便扩展代码，提高代码的复用性。代码隐藏性，可以设置类、属性、方法的有

心已赠人/ 2022年09月01日 10:59/ 0 赞/ 396 阅读

相关面向过程、面向对象

面向过程 1. 以指令为中心，由指令处理数据 2. 组织代码解决问题面向对象 1. 以数据为中心，所有的处理代码都围绕数据展开 2. 设计数据结构组

悠悠/ 2022年05月27日 00:49/ 0 赞/ 445 阅读

相关银行接口Socket传输XML实列

银行接口Socket传输XML 因为项目需要，行方不提供http接口，只提供socket接口，并且用XML格式传输（并且没有联调，所以本地创建server端和client

小咪咪/ 2021年11月13日 15:32/ 0 赞/ 396 阅读

相关面向对象

面向对象Object 面向对象是一种思想使用计算机语言对事物的描述与现实世界中该事物的原本尽量一致类Class class 类名称\{ 属性名称；

╰半夏微凉°/ 2021年09月10日 23:10/ 0 赞/ 469 阅读