首页 文章 精选 留言 我的

精选列表

搜索[js框架]，共10000篇文章
优秀的个人博客,低调大师

js数据类型和typeof

一、6种数据类型（一说7种） <meta charset="utf-8" /> <script type="text/javascript"> // 数据类型 数字、字符串、布尔、对象、null、undefined、数组 // 数字 var num = 2; var num2 = 2.30; show(typeof num); // 字符串 var str = 'abc'; var str2 = "123"; show(typeof str); // 布尔 var boo1 = true; var boo2 = false; show(typeof boo1); // 对象 var obj = { name: '张三', age: 18 } show(typeof obj); // null var aa = null; show(typeof aa); // undefined var bb; show(typeof bb); // 数组 var arr = ['a', 2, null]; show(typeof arr); function show(data) { document.write(data); document.write('<br />'); } </script> 基本数据类型和引用数据类型 基本数据类型 引用数据类型
2018-07-24
优秀的个人博客,低调大师

js随机切换背景音乐

1.通过触发onended事件调用函数改变音频的src(地址)来达到切歌 <audio autoplay="autoplay" src="cfc.mp3" id="song" onended="change()"></audio> #onended DOM事件对象 <script type="text/javascript"> var song = document.getElementById('song'); music =new Array('音乐存放的地址eg:media/xxx.mp3','xxxxxx','xxxx'); function change() { if(song.ended){#判断音乐是否播放完 index = Math.floor(Math.random()*music.length); #Math.floor()就近取整 #Math.random() 0-1内的随机数 Math.random()*10代表0-10内的随机数 song.src=music[index]; song.play(); } } </script> 2.通过设置监听事件 <script type="text/javascript"> var song = document.getElementById('song'); music =new Array('media/cfc.mp3','media/fhm.mp3'); song.addEventListener("onended" ,function(){ if(song.ended){ index = Math.floor(Math.random()*music.length); song.src=music[index]; song.play(); } }); </script> 照搬以上代码是运行不了的，把他放到window.onload=function(){ } 去,才能运行 element.addEventListener(event, function, useCapture)
2018-05-26
优秀的个人博客,低调大师

使用js切割URL的参数

对于一些开发场景，不使用Jsp或freemarker及其其他的模板引擎时，通常通过切割url获得对应的参数，然后通过AJAX与后台交互得到对应的数据 下面是演示实例: test.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>切割URL</title> </head> <body> <a href="/LMS/test?userId=1">点击</a> </body> </html> test2.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>三级联动效果</title> <style type="text/css"> select{ width:100px; text-align:center;} </style> <script type="text/javascript"> window.onload=function(){ GetRequest(); }; function GetRequest() { var fullURL = window.location.href; alert(fullURL); var url = location.search; //获取url中"?"符后的字串 var theRequest = new Object(); alert(url); if (url.indexOf("?") != -1) { var str = url.substr(1); strs = str.split("&"); alert(strs) for(var i = 0; i < strs.length; i ++) { theRequest[strs[i].split("=")[0]]=unescape(strs[i].split("=")[1]); alert(theRequest[strs[i].split("=")[0]]); } } return theRequest; } </script> </head> <body> <p>测试:</p> </body> </html>
2018-04-27
优秀的个人博客,低调大师

JS--DOM(文档对象模型)

含义 DOM（文档对象模型）是针对 HTML 和 XML 文档的一个 API，通过 DOM 可以去改变文档。 简单的说，一个 web 网页就是一个文档，使用 DOM 改变文档就是使用 DOM 定义的一些方法操作具体的节点。比如用getElementById 来根据元素 id 来查找元素节点。 当浏览器载入HTML时，会生成相应的 DOM 树，大概长这样 image.png 转化为代码就是如下： <html> <head> <title>我是title</title> </head> <body> <a herf="">我是超链接</a> <p id="test">我是p标签</p> </body> </html> 对DOM的定义 对于一个 HTML 来说，文档节点 Document （是看不到的）就是它的根节点，这个根节点对应的对象就是 document ，我们可以通过根节点来访问它的子节点(Element 、Text)。 Document 类型 刚才说到 Document 是整个文档的根节点，我们想要访问某个节点的时候都必须通过 document 这个实例对象。 document 对象的常用属性： document.documentElement //可以直接拿到html的节点的引用 document.title //直接获取title节点的文本 即 我是title document.url //获取url doucument常用方法 2018-04-24 10-26-44屏幕截图.png document.getElementById() //docment.getElementById('test') 可以获取到属性 id 为 ‘myId’ 的节点，在上面的代码中获取的也就是 p 节点 document.getElementsByTagName //docment.getElementByTagName('p') 可以获取到节点为 p 的所有节点集 document.documentElement // 全部文档 document.body //文档的主体 以上的方法就使我们根据 document 对象中的方法获取到 HTML 中任意节点了 Element 类型 通常我们在使用 document 对象来获取节点时，返回的节点类型就是 Element 类型，所以我们想要对获取的节点进行操作，我们只需要使用 Element 包含的属性和方法即可。 常用的属性 var myNode = document.getElementById('myId'); myNode.id // 获取该节点的 id ，即 ‘myId‘ myNode.tagName // 获取该节点的节点名，即 'P'，大部分浏览器返回的标签名都是大写 myNode.className //获取该节点的 class 操作节点属性的常用方法 //假如我们有一个 input，我们想要获取 input 的 type 属性，并对 type 属性进行操作 <input type='text' id='input'/> var myNode = document.getElementById('input') myNode.getAttribute('type') // 获取属性值，即 ‘text’ myNode.setAttribute('type','password') // 将 type 属性值改为 password 类型 myNode.removeAttribute('type') // 移除 type 属性 实例 对事件做出反应 要求： 当事件发生时，可以执行 JavaScript，比如当用户点击一个 HTML 元素时。 如需在用户点击某个元素时执行代码，请把 JavaScript 代码添加到 HTML 事件属性中：onclick=JavaScript html事件的例子 当用户点击鼠标时 当网页已加载时 当图片已加载时 当鼠标移动到元素上时 当输入字段被改变时 当 HTML 表单被提交时 当用户触发按键时 <!DOCTYPE html> <html> <body> <h1 onclick="this.innerHTML='hello!'">请点击这段文本!</h1> </body> </html> // **相当于点击按钮时给h1进行赋值** 从事件处理程序中调用函数： <!DOCTYPE html> <html> <head> <script> function changetext(id) { id.innerHTML="hello!"; } </script> </head> <body> <h1 onclick="changetext(this)">请点击这段文本!</h1> </body> </html> HTML 事件属性 如需向 HTML 元素分配事件，您可以使用事件属性。 向 button 元素分配一个 onclick 事件： <!DOCTYPE html> <html> <body> <p>点击按钮来执行 <b>displayDate()</b> 函数。</p> <button onclick="displayDate()">试一试</button> <script> function displayDate() { document.getElementById("demo").innerHTML=Date(); } </script> <p id="demo"></p> </body> </html> 使用 HTML DOM 来分配事件 HTML DOM 允许您使用 JavaScript 向 HTML 元素分配事件：为 button 元素分配 onclick 事件： <!DOCTYPE html> <html> <dody> <p>点击按钮来执行<b>displayDate()</b></p> <button id="myBtn">点击试一试</button> <script> document.getElementById("myBtn").onclik = function(){displayDate()} function displayDate(){ document.getElementById('demo').innerHTML = Date(); } </script> <p id=""demo></p> </body> </html> 在上面的例子中，名为 displayDate 的函数被分配给了 id=myButn" 的 HTML 元素。 当按钮被点击时，将执行函数。 onload 和 onunload 事件 当用户进入或离开页面时，会触发 onload 和 onunload 事件。 onload 事件可用于检查访客的浏览器类型和版本，以便基于这些信息来加载不同版本的网页。 onload 和 onunload 事件可用于处理 cookies。 <!DOCTYPE html> <html> <body onload="checkCookies()"> <script> function checkCookies() { if (navigator.cookieEnabled==true) { alert("Cookies are enabled") } else { alert("Cookies are not enabled") } } </script> <p>弹出的提示框会告诉你浏览器是否已启用 cookie。</p> </body> </html> onchange 事件 onchange 事件常用于输入字段的验证。 下面的例子展示了如何使用 onchange。当用户改变输入字段的内容时，将调用 upperCase() 函数。 <!DOCTYPE html> <html> <head> <script> function myFunction(){ var x = document.getElementById("fname"); x.value = x.value.toUpperCase(); } </script> </head> <body> 请输入你的英文名：<input type="text" id="fname" onchange="myFunction()"> <p>当你离开输入框时，被触发的函数会把你输入的文本转换为大写字母。</p> </body> </html> onmouseover 和 onmouseout 事件 onmouseover 和 onmouseout 事件可用于在鼠标指针移动到或离开元素时触发函数 <!DOCTYPE html> <html> <body> <div onmouseover="mOver(this)" onmouseout="mOut(this)" style="background-color:#D94A38;width:200px;height:50px;padding-top:25px;text-align:center;"> Mouse Over Me </div> <script> function mOver(obj) { obj.innerHTML="谢谢你" } function mOut(obj) { obj.innerHTML="把鼠标指针移动到上面" } </script> </body> </html> onmousedown、onmouseup 以及 onclick 事件 onmousedown、onmouseup 以及 onclick 事件是鼠标点击的全部过程。首先当某个鼠标按钮被点击时，触发 onmousedown 事件，然后，当鼠标按钮被松开时，会触发 onmouseup 事件，最后，当鼠标点击完成时，触发 onclick 事件。 <!DOCTYPE html> <html> <body> <div onmousedown="mDown(this)" onmouseup="mUp(this)" style="background-color:#D94A38;width:200px;height:50px;padding-top:25px;text-align:center;"> 点击这里 </div> <script> function mDown(obj) { obj.style.backgroundColor="#1ec5e5"; obj.innerHTML="松开鼠标" } function mUp(obj) { obj.style.backgroundColor="#D94A38"; obj.innerHTML="谢谢你" } </script> </body> </html>
2018-04-23

资源下载

更多资源
Mario

Mario

马里奥是站在游戏界顶峰的超人气多面角色。马里奥靠吃蘑菇成长，特征是大鼻子、头戴帽子、身穿背带裤，还留着胡子。与他的双胞胎兄弟路易基一起，长年担任任天堂的招牌角色。

时间: 2026-04-11 大小: 211.28KB 下载: 56次
腾讯云软件源

腾讯云软件源

为解决软件依赖安装时官方源访问速度慢的问题，腾讯云为一些软件搭建了缓存服务。您可以通过使用腾讯云软件源站来提升依赖包的安装速度。为了方便用户自由搭建服务架构，目前腾讯云软件源站支持公网访问和内网访问。

时间: 2026-08-21 大小: 1MB 下载: 10次
Rocky Linux

Rocky Linux

Rocky Linux（中文名：洛基）是由Gregory Kurtzer于2020年12月发起的企业级Linux发行版，作为CentOS稳定版停止维护后与RHEL（Red Hat Enterprise Linux）完全兼容的开源替代方案，由社区拥有并管理，支持x86_64、aarch64等架构。其通过重新编译RHEL源代码提供长期稳定性，采用模块化包装和SELinux安全架构，默认包含GNOME桌面环境及XFS文件系统，支持十年生命周期更新。

时间: 2026-08-21 大小: 1.42GB 下载: 6次
WebStorm

WebStorm

WebStorm 是jetbrains公司旗下一款JavaScript 开发工具。目前已经被广大中国JS开发者誉为“Web前端开发神器”、“最强大的HTML5编辑器”、“最智能的JavaScript IDE”等。与IntelliJ IDEA同源，继承了IntelliJ IDEA强大的JS部分的功能。

时间: 2025-12-13 大小: 249.54MB 下载: 22次
热门标签
DeepSeek Jdk25 OpenAi HarmonyOS6 Nacos3 SpringBoot4 SpringCloud Docker Kubernetes Service Mesh Redis Gemini3 Rocky

欢迎您来访！

登录后，您将获得更多功能！
热门文章
联系我们

有任何问题或合作意向欢迎联系我们

Email: 99873273@qq.com

QQ: 99873273

用户登录
用户注册