JS+PHP实现用户输入数字后显示最大的值及所在位置


Posted in PHP onJune 19, 2017

本文主要给大家介绍的是关于JS+PHP实现用户输入数字后显示最大的值及所在位置的相关内容,目的:分清JS PHP的区别,拓宽思维,下面来一起看看详细的介绍:

分析

       1.利用JS的prompt输入用户想要输入的值.

       2.利用HTML表单的text标签将输入的值传递给PHP处理文件

       3.PHP进行数值判定,选出最大值和位置.

由浅入深:

1.在JS实现获取数组的最大值.

var a=[10,20,40,30];
 // var max=0;
 var max=a[0];
 for(var i=0;i<a.length;i++){
 if(max<a[i]){
  max=a[i];
 }
 }
 alert("最大数为"+max);

这里值得注意的是:不可以直接设置一个变量max=0,因为你不确定以后输入的数字是小于0的还是大于0的[案列是大于0的],所以应该选择数组里面的一个数,就数组的第一个好了max=a[0] .

因为JS语言是基于对象面向过程的,JS里面所有的事物都可以是对象,所以它的数组有属性,length就是JS数组的一个获得数组长度的属性,有了这个属性就可以遍历数组,然后进行一一比较.

2.在JS实现获得数组的最大值最小值和他们的位置(即在数组中第几个)

[注:本案例位置+1是为了方便查看,JS数组开始也是0]

var a=[10,20,40,30];
 var max=a[0];//不能指定一个数为最大值[var max=0](除非是确定的情况下),应该用数组里面的值,a[0]即让数组第一个值作为比较的最大值.
 var maxaddress=0;
 var min=a[0];
 var minaddress=0;
 for(var i=0;i<a.length;i++){
  if(max<a[i]){
   max=a[i];
   maxaddress=i
  }
  if(min>a[i]){
   min=a[i];
   minaddress=i
  }
 }
 alert("最大数为"+max+"位置为第"+(maxaddress+1)+"个");
 alert("最小数为"+min+"位置为第"+(minaddress+1)+"个");

3.现在改成用prompt来进行用户输入获得值来求最大值等等.

难点:

       1.如何输入,用prompt

       2.如何将一个字符串转为数组,并且要转换格式呢?

前提知识:

       1.将字符串分割 用到的是JS的string对象的spilt方法(注意,JS一切皆是对象,因此叫方法,不叫函数)

       2.让一个"abc"字符串转为number类型,怎么转.

字符串转数字类型

◆Number

★数字类型的字符串,转换之后得到的数字。var n1="123"; var n2=Number(n1);//123

★★非数字字符串,转换之后得到是NaN。var n1="123abc"; var n2=Number(n1);//Nan 

★小数类型的字符串,转换之后得到的是原数字。var n1="123.23"; var n2=Number(n1);//123.23

 

◆parseInt

★整数数字类型的字符串,转换之后得到的整数数字。var n1="123"; var n2=parseInt(n1);//123

★数字开头的字符串,转换之后得到的是前边的数字。var n1="123abc"; var n2=parseInt(n1);//123

★非数字开头的字符串,转换之后得到的是NaN。。var n1="abc123"; var n2=parseInt(n1);//NaN

★★小数类型的字符串,转换之后取整(小数点直接省略)。var n1="123.53"; var n2=parseInt(n1);//123 var n1="-5.93"; var n2=parseInt(n1);//-5

 

◆parseFloat

★整数数字类型的字符串,转换之后得到的整数数字。var n1="123"; var n2=parseFloat(n1);//123

★数字开头的字符串,转换之后得到的是前边的数字。var n1="123abc"; var n2=parseFloat(n1);//123

★非数字开头的字符串,转换之后得到的是NaN。var n1="abc123"; var n2=parseFloat(n1);//NaN

★★小数类型的字符串,转换之后得到的是原数字。var n1="123.23"; var n2=parseFloat(n1);//123.23

 

转布尔类型

★数字和字符串转完之后为true。

★undefined、null、0转完之后为false.

var n1=123; var n2=Boolean(n1);//true

var n1="123"; var n2=Boolean(n1);//true

var n1="0"; var n2=Boolean(n1);alert(n2);//true

var n1; var n2=Boolean(n1);//false

var n1=null; var n2=Boolean(n1);//false

var n1=0; var n2=Boolean(n1);//false

以上分析完毕,开始书写代码

<script>
  //var a=new Array(-12,34,56,88,32,"aa","-34.33","-34.34",12.23);
  /*var a=new Array(prompt("请输入数字"));
  document.write(a);*/
  var b=prompt("请输入要比较的数,用\",\"号隔开");
  var a=new Array();
  a=b.split(",");
  // for(var j=0;j<a.length;j++){
  //   document.write(a[j]);
  // }
  alert(typeof(a)+" JS数组本质是对象啊!!");//本质是对象 PHP数组就是数组,没有属性(比如length)
  document.write(a+"<br>");
  console.log(a+"<br>");
  var max=parseFloat(a[0]);
  //document.write(max);
  var maxaddress=0;
  var min=parseFloat(a[0]);
  var minaddress=0;
  
  for(var i=0;i<=a.length;i++){
   var shu=parseFloat(a[i]);
   if(shu>max){
    max=shu;
    maxaddress=i;
   }
   if(shu<min){
    min=a[i];
    minaddress=i;
   }
  }
  document.write("最大数为"+max+"位置为第"+(maxaddress+1)+"个"+"<br>");
  document.write("最小数为"+min+"位置为第"+(minaddress+1)+"个");
 </script>

4.以上是JS做处理,我的目的是让JS+PHP+HTML联动起来.

PHP是无法直接前端交互的,即他不能直接获取用户输入的值,而要通过html 的form表单

JS数据传给PHP,你可以用AJAX,但我以后再讲,今天看看有什么方法.

1.制作HTML表单:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Document</title>
 
</head>
<body>
 <form action="deal.php" method="post">
 请输入数字:<input type="text" id="shu" name="shuzi" value="">
 <input type="submit" value="提交">
 </form>
 
</body>
</html>

2.JS传值给HTML:

<script type="text/javascript">
  var a=prompt("请输入数字");
  document.getElementById("shu").value=a;
 </script>

这里有个坑,如果将JS代码写在HTML的header处,会报错,说Uncaught TypeError: Cannot set property 'value' of null

因为浏览器解析顺序,在浏览器解析JS的时候(输入数字完成的时候),浏览器开始解析HTML,虽然JS赋值了text的value,但被后面HTML的解析成了text的value为NULL,这是自相矛盾的.

所以尽可能的让JS代码写在后面,你先解析HTML,然后我再给你值.(具体情况具体分析,不一定JS代码都在头部)

5.好了,HTML传值了,现在看PHP

<?php
header("Content-type:text/html;charset=utf-8");
$a=$_POST['shuzi'];
//var_dump($a);
$b=explode(',',$a);
for($i=0;$i<count($b);$i++){
 echo $b[$i];
}
var_dump($b);

$max=$b[0];
$maxaddress=0;
for($j=0;$j<count($b);$j++){
 if($b[$j]>$max){
  $max=$b[$j];
  $maxaddress=$j;
 }

}
echo "最大值是".$max."<br>";
echo "位置为第".($maxaddress+1)."个";


?>

这里主要是看explode(将字符串拆分成数组) count(获得数组的个数)

还有注意类型转换问题,以后补充或者你自己写写吧.

最后上图:

JS+PHP实现用户输入数字后显示最大的值及所在位置

JS+PHP实现用户输入数字后显示最大的值及所在位置

JS+PHP实现用户输入数字后显示最大的值及所在位置

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

PHP 相关文章推荐
php的curl实现get和post的代码
Aug 23 PHP
php array_intersect()函数使用代码
Jan 14 PHP
彻底杜绝PHP的session cookie错误
Aug 09 PHP
Destoon实现多表查询示例
Aug 21 PHP
PHP文件上传之多文件上传的实现思路
Jan 27 PHP
php判断用户是否关注微信公众号
Jul 22 PHP
php的PDO事务处理机制实例分析
Feb 16 PHP
php实时倒计时功能实现方法详解
Feb 27 PHP
删除PHP数组中的重复元素的实现代码
Apr 10 PHP
PHP读取并输出XML文件数据的简单实现方法
Dec 22 PHP
PHP设计模式之装饰器模式定义与用法简单示例
Aug 13 PHP
php7下的filesize函数
Sep 30 PHP
PHP利用Socket获取网站的SSL证书与公钥
Jun 18 #PHP
php实现批量上传数据到数据库(.csv格式)的案例
Jun 18 #PHP
PHP更安全的密码加密机制Bcrypt详解
Jun 18 #PHP
Laravel中log无法写入问题的解决
Jun 17 #PHP
php下载远程大文件(获取远程文件大小)的实例
Jun 17 #PHP
浅谈ThinkPHP5.0版本和ThinkPHP3.2版本的区别
Jun 17 #PHP
PHP 7安装调试工具Xdebug扩展的方法教程
Jun 17 #PHP
You might like
基于PHP的cURL快速入门教程 (小偷采集程序)
2011/06/02 PHP
PHP中PCRE正则解析代码详解
2019/04/26 PHP
Laravel 已登陆用户再次查看登陆页面的自动跳转设置方法
2019/09/30 PHP
获取HTML DOM节点元素的方法的总结
2009/08/21 Javascript
JS前端框架关于重构的失败经验分享
2013/03/17 Javascript
解决js数据包含加号+通过ajax传到后台时出现连接错误
2013/08/01 Javascript
js为数字添加逗号并格式化数字的代码
2013/08/23 Javascript
JSON中双引号的轮回使用过程中一定要小心
2014/03/05 Javascript
Javascript解析URL方法详解
2014/12/05 Javascript
详解AngularJS中的http拦截
2016/02/09 Javascript
原生js封装二级城市下拉列表的实现代码
2016/06/16 Javascript
说说如何在Vue.js中实现数字输入组件的方法
2019/01/08 Javascript
详解TypeScript+Vue 插件 vue-class-component的使用总结
2019/02/18 Javascript
说说如何利用 Node.js 代理解决跨域问题
2019/04/22 Javascript
nodejs中各种加密算法的实现详解
2019/07/11 NodeJs
vue将文件/图片批量打包下载zip的教程
2020/10/21 Javascript
[02:04]2018DOTA2亚洲邀请赛Secret赛前采访
2018/04/03 DOTA
[56:00]2018DOTA2亚洲邀请赛 4.6 淘汰赛 VP vs TNC 第二场
2018/04/10 DOTA
[33:19]完美世界DOTA2联赛PWL S2 PXG vs InkIce 第一场 11.26
2020/11/30 DOTA
200 行python 代码实现 2048 游戏
2018/01/12 Python
python实现m3u8格式转换为mp4视频格式
2018/02/28 Python
详解python 3.6 安装json 模块(simplejson)
2019/04/02 Python
基于Python的ModbusTCP客户端实现详解
2019/07/13 Python
Pytorch训练过程出现nan的解决方式
2020/01/02 Python
Pytorch 实现冻结指定卷积层的参数
2020/01/06 Python
Python气泡提示与标签的实现
2020/04/01 Python
jupyter实现重新加载模块
2020/04/16 Python
基于Python模拟浏览器发送http请求
2020/11/06 Python
百思买美国官网:Best Buy
2016/07/28 全球购物
《商鞅南门立木》教学反思
2014/02/16 职场文书
舞蹈专业大学生职业规划范文
2014/03/12 职场文书
机关作风整顿个人整改措施2014
2014/09/17 职场文书
群众路线教育实践活动学习心得体会
2014/10/30 职场文书
迎新晚会主持词开场白
2015/05/28 职场文书
​(迎国庆)作文之我爱我的祖国
2019/09/19 职场文书
Java实现经典游戏泡泡堂的示例代码
2022/04/04 Java/Android