html5之range

第一次以这种方式做笔记,希望可以加强自己对新知识的理解,更希望能得到更多朋友的指正.

言归正传:

<!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>

 

posted @ 2016-08-05 13:27  存钱罐  阅读(235)  评论(0)  编辑  收藏  举报