面向对象实列

落日映苍穹つ 2024-04-19 12:10 3阅读 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 条评论，3人围观）

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

相关阅读

相关面向对象实列

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

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

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

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

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

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

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

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

相关面向过程，面向对象

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

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

相关面向过程、面向对象

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

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

相关面向对象

问题1：面向对象是什么？面向对象(Object Oriented, OO)是一种思想，是对现实世界的理解和抽象，用以解决现实问题。面向对象是对面向过程的一种自然演进，面向

灰太狼/ 2022年03月18日 06:35/ 0 赞/ 156 阅读

相关面向对象

面向对象 1.面向过程（函数式编程）把一个项目按过程，一步一步去做，先做什么再做什么，直到完成这个项目 2.面向对象（oop 一种思想）把一个项目分成几部分，每

梦里梦外;/ 2021年11月16日 11:50/ 0 赞/ 246 阅读

相关面向对象

dog例子开头 class Dog: def \_\_init\_\_(self,name): self.name = name

港控/mmm°/ 2021年09月20日 03:50/ 0 赞/ 389 阅读

相关面向对象

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

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

相关面向对象

第四章面向对象 1.面向对象初识 1.1 面向对象过程vs函数式编程vs面向对象编程 s1 = 'fkjgkrsge' count = 1 for

灰太狼/ 2021年07月25日 22:45/ 0 赞/ 495 阅读