JavaScript学习记录
随机点名器
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>随机点名器</title>
<style type="text/css">
#bodybj {
background: url(img/开灯.jpg) no-repeat center top;
}
#box {
margin: auto;
width: 550px;
font-size: 66px;
height: 94px;
color: #138eee;
text-align: center;
margin-top: 250px;
}
#bt {
margin: auto;
width: 200px;
text-align: center;
margin-top: 75px;
color:aquamarine;
font-size: 25px;
cursor: pointer;
}
</style>
</head>
<body id="bodybj" background="img/开灯.jpg">
<div id="box">亲，准备好点名了吗</div>
<div id="bt" onclick="doit()">开始点名</div>
<script>
var namelist=["王思聪","王健林","马云","赵丽颖","迪丽热巴","古力娜扎","马化腾"];
var mytime=null;
function doit(){
var bt=window.document.getElementById("bt");
if(mytime==null){
bt.innerHTML="停止点名";
show();
}else{
bt.innerHTML="开始点名";
clearInterval(mytime);
mytime=null;
}
}
function show(){
var box=window.document.getElementById("box");
var num=Math .floor(Math.random()*100000)%namelist.length;
box.innerHTML=namelist[num];
mytime=setTimeout("show()",1);
}
</script>
</body>
</html>
下拉列表框
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script>
function disable(){
x.disabled=true;
}
function enable(){
x.disabled=false;
}
function getlength(){
alert(x.length);
}
function changesize(){
x.size=4;
}
function selectmultiple(){
x.multiple=true;
}
function getindex(){
alert(x.selectedIndexx);
}
function getoptions(){
var txt="选中的选项";
var i;
for(i=0;i<x.length;i++){
if(x.options[i].selected){
txt=txt+"\n"+x.options[i].txt;
}
}
}
function changeText(){
x.options[x.selectedIndex].text="甜瓜";
}
function removeoption(){
x.remove(x.selectedIndex);
}
</script>
</head>
<body>
<form>
<select id="myselect">
<option value="水果1">苹果</option>
<option value="水果2">梨子</option>
<option vallue="水果3">梨子</option>
<option value="水果4">橙子</option>
</select>
<br /><br />
<input type="button" onclick="disable()" value="禁用列表" />
<input type="button" onclick="enable()" value="启用列表" />
<input type="button" onclick="getlength()" value="列表有几种选择" />
<input type="button" onclick="changesize()" value="修改列表大小" />
<input type="button" onclick="selectmultiple()" value="选择多个" />
<p>在你点击“选择多个”按钮之前，尽量选择一个以上的选项（通过按shift或ctrl键）然后尝试点击</p>
<input type="button" onclick="getindex()" value="弹出选中索引" />
<input type="button" onclick="getoptions()" value="输出选中选项" />
<input type="button" onclick="changeText()" value="设置你的选项" />
<input type="button" onclick="removeoption()" value="移除你的选项" />
</form>
<script>
var x=document.getElementById("myselect");
document.write(alert("form的子对象select的值是：",x.value));
x.onchange=function(){
alert("from的子对象select的值是："+x.value);
}
</script>
</body>
</html>
浙公网安备 33010602011771号