
<script type="text/javascript">
function choice(obj){
var checkbox = document.getElementsByName('music');
for(var i=0;i<checkbox.length;i++){
if(obj=='全选'){
checkbox[i].checked=true;
}
if(obj=='全不选'){
checkbox[i].checked=false;
}
if(obj=='反选'){
checkbox[i].checked=!checkbox[i].checked;
}
}
}
</script>
</head>
<body>
<h1>添加音乐</h1>
<input type="checkbox" name="music" />哪里都是你<br/>
<input type="checkbox" name="music" />关于你<br/>
<input type="checkbox" name="music" />偏爱<br/>
<input type="checkbox" name="music" />Love Story(Taylor's Version)<br/>
<input type="checkbox" name="music" />晚风<br/>
<input type="checkbox" name="music" />蜜蜂<br/>
<input type="checkbox" name="music" />这首歌没唱直接听<br/>
<input type="button" value="全选" onclick="choice('全选')" />
<input type="button" value="全不选" onclick="choice('全不选')" />
<input type="button" value="反选" onclick="choice('反选')" />
</body>
</html>
获取下拉框选中的值
<script type="text/javascript">
function test(){
var sel = document.getElementById('sel');
// console.log(sel.value); // 获取到你选择的选择对应的value值
var options = sel.options;
for(var i=0;i<options.length;i++){
// options[i] 可以获得到每个下拉选项,但是想过滤出被选中的那个
if(options[i].selected == true){ //过滤出被选中的那个
alert(options[i].value+'----'+options[i].text);
}
}
}
</script>
</head>
<body>
<select id="sel" onchange="test()">
<option value="0">青铜班</option>
<option value="1">白银班</option>
<option value="2">黄金班</option>
<option value="3">铂金班</option>
<option value="4">钻石班</option>
</select>
</body>
</html>
页面加载获得焦点
<body onload="document.getElementById('username').focus();"> <!--onload页面加载 focus获得焦点-->
用户名:<input type="text" id="username"/>
密码:<input type="password"/>
</body>
实现点赞动画
<script type="text/javascript">
function addGreat(){
// 创建一个动图:
var imgNode = document.createElement('img');
imgNode.src="./emoji.gif";
//获取div
var mydiv = document.getElementById('mydiv');
// 将动图放入div中:
mydiv.appendChild(imgNode);
// 调整动图大小
imgNode.style.width="85px";
// 给动图设置一定绝对定位
imgNode.style.position="absolute";
imgNode.style.top="200px";
imgNode.style.left="200px"
// 让emoji往上走,边走边消失
// 设置图片的饱和度:
imgNode.style.opacity= 1 ;
var id =setInterval(function(){
// 饱和度一直在减少:
imgNode.style.opacity-=0.01;
// 距离上边距的高度也应该逐渐减少:
imgNode.style.top=(imgNode.offsetTop-2)+"px";
console.log('aaa');
if(imgNode.style.opacity <=0){
clearInterval(id);
}
},15);
}
</script>
</head>
<body>
<input type="button" value="点赞" onclick="addGreat()" />
<div id="mydiv"></div>
</body>
</html>