原生js实现宽度计数器
更新时间:2022年09月01日 14:56:22 作者:梦幻之光_dream
这篇文章主要为大家详细介绍了原生js实现宽度计数器,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
本文实例为大家分享了js实现宽度计数器的具体代码,供大家参考,具体内容如下
一.用原生js实现宽度计数器
1.源码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>计数器-原生js</title> <style> #box{ width: 200px; height: 200px; border: 1px solid white; background-color: #878080; } /* 并集选择器 */ button,span{ margin: 10px 7px; } </style> </head> <body> <div id="box"></div> <button id="minus" onclick="minusWidth()">-</button> <button id="add" onclick="addWidth()">+</button> <button onclick="reset()">还原</button> <span id="result">200px</span> </body> </html> <script> //修改数值 var count=200; document.getElementById('add').addEventListener('click',()=>{ if(count>500){ alert("宽度超出限制"); } else{ count+=10; } document.getElementById('result').innerText = count+'px'; }); document.getElementById('minus').addEventListener('click',()=>{ if(count<10){ alert("宽度超出限制"); } else{ count-=10; } document.getElementById('result').innerText = count+'px'; }); //修改盒子宽度 var boxWidth=200; var box=document.getElementById('box'); function addWidth(){ if(boxWidth>500){ alert("图片宽度无法增加"); } else{ boxWidth+=10; } box.style.width=boxWidth+"px"; }; function minusWidth(){ if(boxWidth<10){ alert("图片宽度无法减少"); } else{ boxWidth-=10; } box.style.width=boxWidth+'px'; }; function reset(){ document.getElementById('box').style='200px'; document.getElementById('result').innerHTML='200px'; count=200; boxWidth=200; }; </script>
2.效果图
二.总结
addEventListener:用于监听事件并进行处理的函数。
innerText:用于获取文本内容的属性。(不包含html标签)
innerHTML:用于获取html标签内容的属性。(识别所有html标签)
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
相关文章
JavaScript WebAPI、DOM、事件和操作元素实例详解
这篇文章主要给大家介绍了关于JavaScript WebAPI、DOM、事件和操作元素的相关资料,文中通过示例代码介绍的非常详细,对大家学习或者使用js具有一定的参考学习价值,需要的朋友可以参考下2021-06-06Javascript类定义语法,私有成员、受保护成员、静态成员等介绍
JS只是一门支持面向对象编程的语言,通过OO可以让我们的代码组织更加人性化。可是与传统基与类的面向对编程语言不同它没有类概念并且没成员访问修饰符。这多少会给我们编程工作会带来一些束缚2011-12-12JavaScript高级程序设计 阅读笔记(十五) 浏览器中的JavaScript
Window对象对操作浏览器窗口非常有用,开发者可以移动或调整浏览器窗口的大小2012-08-08
最新评论