博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
小白javascript做考试页(一)
阅读量:6187 次
发布时间:2019-06-21

本文共 2007 字,大约阅读时间需要 6 分钟。

hot3.png

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"  οnclick="">提交</button>

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

function clickbutton(){

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

}

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

function clickbutton(){

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

<button type="button"  οnclick="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!

待续......

转载于:https://my.oschina.net/oisanblog/blog/716144

你可能感兴趣的文章
Django 扩展User 编写自己的认证后台
查看>>
qt中实现单一启动qt程序的设置
查看>>
mysql 1449 : The user specified as a definer
查看>>
C#判断鼠标在某个区域内
查看>>
JDBC连接数据库(将库一中某表的数据复制到库二中)
查看>>
个人网站医院通发布
查看>>
Ubuntu上nfs的安装配置
查看>>
upgrade HPE server firmware
查看>>
JApiTest
查看>>
thrift php服务器端开发
查看>>
ES学习笔记之---从源码启动ES
查看>>
不等不靠不要,程序员自己减轻“辛苦”
查看>>
罗辑思维现象透析
查看>>
java与php rsa加密互通
查看>>
CountDownLatch和CyclicBarrier
查看>>
linux命令:cpio命令 系统裁剪之四busybox 进行linux系统制作
查看>>
Java初学知识点
查看>>
sewise发布HTML5开源播放器框架
查看>>
Linux进程的分析和执行过程
查看>>
Python 方法
查看>>