第一次以这种方式做笔记,希望可以加强自己对新知识的理解,更希望能得到更多朋友的指正.
言归正传:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html class="no-js"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Insert title here</title> </head> <style type="text/css"> .no-js selector{style properties} </style> <body> <p>新的控件类型</p> 生成滑动条:<input type="button" value="+" id="add" onclick="changeRange(this,'rg')"/> <input type="range" id="rg" min="10" max="100" step="10" onchange="change(this)"/> <input type="button" value="-" id="sub" onclick="changeRange(this,'rg')"/> <br/> <input type="text" id="show"/> <script type="text/javascript"> function change(elem){ var location=document.getElementById("show"); location.value=elem.value; } function changeRange(elem,rgp){ var targetId=elem.getAttribute("id"); var rg=document.getElementById(rgp); var show=document.getElementById("show"); if(targetId=='add'){ var num=~~(rg.value); rg.value=num+10; }else if(~~(rg.value)>10){ rg.value=~~(rg.value)-10; } show.value=rg.value; } </script> </body> </html>