您的位置：首页 > Web前端 > JavaScript

小白javascript做考试页（一）

2016-07-22 00:00 417 查看

摘要: 从对javascript一无所知，慢慢学习javascript。写个简单考试页。

javascrip听得最多又一直觉得好高大上。

首先我并不是码农。是正在自学。在一些码农网站看的有一句话很流行，learning by doing!

下载好写码工具(防止自已忘记工具另外写一篇)，那我就要先有个想法写个简单的考试页然后实现。慢慢实现过程学习。

说做就做。

先html写两个题加两个框和一个提交键,查到怎么引用JS文件,同时也建了一个first.js（这里写的html当然也查过才写出来的了，网上看<p><button>应该这些就知道是什么了）。

<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>hello JSworld</title>
</head>
<script type="text/javascript" src="first.js"></script>

<body>
<p>
21+33=<input type="text" /> </p>
<p>
42x38=<input type="text" /></p>
<p>
<button type="button">提交</button>
</p>
</body>

</html>

然后开始想怎么实现提交显示分数了,现在点提交是没反应的，这个当然就到我学习的主角javascript.首先是要用JS获得输入框里面的值，怎么获得呢？查到原来JS有个getElementById() 方法，要在button里定义个id，从而获到对应这个值。

<p>
21+33=<input type="text" id="number1" /> </p>
<p>
42x38=<input type="text" id="number2" /></p>

点提交要有反应那么就要点击触发去做什么事，做什么事就要写个函数了。

<button type="button" onclick="">提交</button>

在first,js里面写，写什么呢，当然是要先取到值，getElementById(id).value取值。

function clickbutton(){
var input1=document.getElementById("number1").value;

}

验证一下有没有取到值怎样验证呢？上面说的点击触发去做什么事，这个函数是要跟在onclick=""后面了，那就先弹出值看看吧，弹出是alert()。

function clickbutton(){
var input1=document.getElementById("number1").value;
var input2=document.getElementById("number2").value;
alert(input1);
alert(input2);
}

<button type="button" onclick="clickbutton()">提交</button>

说明成功获取到值了。接下来要判断值对错和显示出来，也是在函数里面实现了，判断值是否能于答案等就得分。平时显示直接html里写的怎么通过JS显示？查查。有了getElementById().innerHTML。要取id说明html里面要加一行。<p id="score"></p>，然后在取值下面写
var score1=0;
var score2=0;//分数
var sum;
if(input1==54){
score1=10;
}
if(input2==1596){
score2=10;
}
sum=score1+score2;
document.getElementById("score").innerHTML=sum;

点提交成功显示分数。不过这么显示不知道20是什么。查查原来JS可以用+号字符串叠加。那就好办了，改一下显示那里的代码。

document.getElementById("score").innerHTML="你的分数："+sum;

这样就实现了之前的想法。一个简单的考试页。在实现过程中，学到了document.getElementById(id).value或.innerHTML是做什么用的。怎么令到点了按键后有反应onclick。当然也学习到了html，要写两个框和一个按钮就要查html。

当然对这个页面以后想法还会增多。比如现在就想到的，如果是考试的一打开就看到题不科学，还有提交后不能再提交，有时间规定到时间就不能再答等等。。。小白能力有限。以后边学边实现。learning by doing!

待续......

第（二）部分

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： 小白学习javascript 小白学习js javascript考试页面

相关文章推荐

新的分享

章节导航