阅读目录
一、9x9乘法表
二、猜字游戏
三、运行的时钟
四、倒计时的实现
五、实现某一天的倒计时
六、图片切换
一、9x9乘法表
<style>
table{
width:600px;
border-collapse:collapse;
}
td{
border: 2px solid grey;
}
</style>
<body>
<table>
<script type="text/javascript">
for(var i=0;i<10;i++){
document.write("<tr>");
for(j=1;j<10;j++)
if(j<=i)
document.write("<td>"+i+"*"+j+"="+(i*j)+"</td>");
document.write("</tr>");
}
</script>
</table>
</body
二、猜字游戏
<script type="text/javascript">
var num = Math.floor(Math.random()*100+1);//产生1-100之间的随机整数
do{
var guess =parseInt(prompt("下面进行猜数游戏\n请输入1-100之间的整数：",""));
if(guess == num){
alert("恭喜你，猜对了，幸运数字是："+num);
break;
}
else{
if(guess>num){
alert("你猜的数字大了");
go_on=confirm("是否继续游戏");
}
else{
alert("你猜的数字小了");
go_on=confirm("是否继续游戏");
}
}
}
while (go_on);
alert("谢谢参与游戏");
</script>
三、运行的时钟
<style>
#clock{
font-size: 30px;
font-weight: 900;
color: white;
background-color: #930;
border: 8px double #900;
}
</style>
<body onLoad="disptime()">
<span id="clock"></span>
<script type="text/javascript">
function disptime() {
var time = new Date();
var year = time.getFullYear();
var month = time.getMonth();
var data = time.getDate();
var hour = time.getHours();
var minute = time.getMinutes();
var second = time.getSeconds();
if(minute <10)
minute="0"+minute;
if(second<10)
second="0"+second;
document.getElementById("clock").innerHTML=year+"年"+month+"月"+data+"日 "+hour+":"+minute+":"+second;
var myTime = setTimeout("disptime()",1000);
}
</script>
</body>
四、倒计时的实现
<style>
#time{
height: 200px;
background: url("image/6.jpg") no-repeat;
padding: 70px 5px 5px 210px;
color: green;
font-size: 28px;
}
</style>
<body>
<div id="time"></div>
<script type="text/javascript">
var time = document.getElementById('time');
var ks = new Date();
var msks = ks.getTime();//换成毫秒数
var js = msks+60*60*1000;
function jsover() {
var syfz=Math.floor((js-new Date().getTime())/(1000*60));
var sym=Math.floor((js-new Date().getTime()-syfz*1000*60)/(1000));
if(syfz<0)
{
time.innerHTML="";
clearInterval(timeID);
}
else
time.innerHTML="距离考试结束还剩"+syfz+"分"+sym+"秒";
}
timeID = setInterval("jsover()",1000)
</script>
</body>
五、实现某一天的倒计时
<style>
#date{
font-size: 25px;
font-weight: bold;
color:blue ;
width: 400px;
height: 400px;
padding-top: 100px;
background: url("image/7.jpg") no-repeat;
}
</style>
<body>
<div id="date"> </div>
<script>
var endtime = new Date("2020-6-7 00:00:00");
var s = "今天离2020高考6月7日";
var nowtime= new Date();
var ile = endtime.getTime() -nowtime.getTime();
var dni = Math.floor(ile /(1000*60*60*24));
var datashow = document.getElementById("date");
if(dni>1)
datashow.innerHTML=s+"还有"+dni+"天";
else if(dni ==0)
document.innerHTML=s+"只有1天了";
else
datashow.innerHTML=s+"好像已经过了哦"
</script>
</body>
六、图片切换
<style type="text/css">
#main{
width: 300px;
padding: 20px;
margin: 10px auto;
background-color: deepskyblue;
text-align: center;
}
#image{
display: block;
width: 300px;
height: 300px;
margin: 50px auto;
}
</style>
</head>
<body>
<div id="main">
<p id="info"></p>
<img src="image/1.jpg" id="image"/>
<button id="pre">上一张</button>
<button id="next">下一张</button>
</div>
<script type="text/javascript">
var pre=document.getElementById("pre");
var next=document.getElementById("next");
var imgArr=["image/1.jpg","image/2.jpg","image/3.jpg","image/4.jpg"];
var img=document.getElementsByTagName("img")[0];
var index=0;
var info=document.getElementById("info");
function fun(){
info.innerHTML="总共 "+ imgArr.length + " 张，现在是第 "+(index+1)+" 张";
}
fun();
pre.onclick=function(){
index--;
if(index<0){
index=imgArr.length-1;
}
img.src=imgArr[index];
fun();
};
next.onclick=function(){
index++;
if(index>imgArr.length-1){
index=0;
}
img.src=imgArr[index];
fun();
}
</script>
</body>
七、验证数字输入
<body>
<h3>JavaScript 验证数字输入</h3>
<p>请输入 1 到 10 之间的数字：</p>
<input id="num">
<button type="button" onclick="myFunction()">提交</button>
<script>
function myFunction() {
var x;
// 获取 id="num" 的值
x = document.getElementById("num").value;
// 如果输入的值 x 不是数字或者小于 1 或者大于 10，则提示错误 Not a Number or less than one or greater than 10
if (isNaN(x) || x < 1 || x > 10) {
alert( "输入错误");
} else {
alert("输入正确");
}
}
</script>
</body>
更新中……
