1 <script type="text/javascript"> 2 3 function getuserinput() { 4 //获取用户输入的内容 5 var val = document.getelementbyid("userinput").value 6 //根据用户输入的内容播放相应的动画 7 playanimate(val); 8 } 9 function playanimate(str){ 10 if(str=="黑洞"){ 11 alert("播放反转的动画") 12 }else if(str=="反转"){ 13 alert("播放反转动画"); 14 } 15 } 16 </script> 17 <body> 18 <input id="userinput" type="text"/> 19 <input type="button" value="百度一下" onclick="getuserinput();"> 20 21 </body>
1 //一个事件可以触发多个函数 2 function test1() { 3 //单击事件onclick:常用html标签是button标签、a标签、img标签 4 alert('nihao') 5 } 6 function test2() { 7 alert("世界"); 8 }
9 <button type="button" onclick="test();">点我测试</button> 10 <a href="javascript:void(0);" onclick="test1();test2();">点我测试2</a>
1 //一个html元素可以绑定多个事件 2 function testdouble() { 3 //双击事件ondblclick:常用html标签是button标签、a标签、img标签 4 alert("我被双击了!") 5 } 6 <input type="button" value="点我测试双击" ondblclick="testdouble()"> 7 <button type="button" ondblclick="testdouble();">点我测试双击</button>
function testfocus() { //获取焦点事件onfocus:常用的html标签有<input type="text"> console.log("万众瞩目"); } function testonblur(){ //丢失焦点事件onblur: 常用的html标签有<input type="text"> console.log("无人问津") } <input type="text" onfocus="testfocus();" onblur="testonblur()"/>
function testonchange() { //html的value发生变化的事件:常用html标签有select console.log("用户重新选择了城市") } <select onchange="testonchange()"> <option value="1">广州</option> <option value="2">上海</option> <option value="3">北京</option> </select> <input type="text" onchange="testonchange()"/>
function testonload() { //页面加载事件:常用的html标签是body console.log("页面加载...") } <body onload="testonload()">
<style type="text/css"> #mydiv { width: 300px; height: 500px; border: 1px solid grey; background-image: url("timg.jpg"); } </style> <script type="text/javascript"> function fj(eve) { var e = window.event || eve; var x = e.pagex || e.x; var y = e.pagey || e.y; console.log(x + "--" + y); } </script> <div id='mydiv' onmousemove="fj(event);"> </div>
如对本文有疑问, 点击进行留言回复!!
海创软件组--20200712--axios上传文件获取进度--js对多个四边形的点对象数组分别按顺时针排序--定义上传视频并可预览
vue脚手架安装以及vue脚手架创建项目(详细步骤),看这篇文章就行了,小白也能创建自己的项目
JavaScript递归函数详解:如何使用递归及简单的递归案例
网友评论