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 IP及IP段进行访问限制的代码
Dec 17 PHP
深入php define()函数以及defined()函数的用法详解
Jun 05 PHP
PHP设计模式之调解者模式的深入解析
Jun 13 PHP
php导入模块文件分享
Mar 17 PHP
php修改文件上传限制方法汇总
Apr 07 PHP
PHP中的traits实现代码复用使用实例
May 13 PHP
PHP中文竖排转换实现方法
Oct 23 PHP
[原创]CI(CodeIgniter)简单统计访问人数实现方法
Jan 19 PHP
PHP递归实现快速排序的方法示例
Dec 18 PHP
laravel项目利用twemproxy部署redis集群的完整步骤
May 11 PHP
laravel实现按时间日期进行分组统计方法示例
Mar 23 PHP
解决php扩展安装不生效问题
Oct 25 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中设置时区,记录日志文件的实现代码
2013/01/07 PHP
Zend Framework校验器Zend_Validate用法详解
2016/12/09 PHP
Json_decode 解析json字符串为NULL的解决方法(必看)
2017/02/17 PHP
浅谈PHP表单提交(POST&amp;GET&amp;URL编/解码)
2017/04/03 PHP
Yii2.0框架模型添加/修改/删除数据操作示例
2019/07/18 PHP
javascript xml为数据源的下拉框控件
2009/07/07 Javascript
JS仿flash上传头像效果实现代码
2011/07/18 Javascript
一个简单的JS时间控件示例代码(JS时分秒时间控件)
2013/11/22 Javascript
js 跳出页面的frameset框架示例介绍
2013/12/23 Javascript
js,jquery滚动/跳转页面到指定位置的实现思路
2014/06/03 Javascript
Bootstrap+jfinal实现省市级联下拉菜单
2016/05/30 Javascript
js css+html实现简单的日历
2016/07/14 Javascript
KnockoutJS 3.X API 第四章之数据控制流if绑定和ifnot绑定
2016/10/10 Javascript
Angular.js中ng-if、ng-show和ng-hide的区别介绍
2017/01/20 Javascript
基于jQuery实现咖啡订单管理简单应用
2017/02/10 Javascript
原生Aajax 和jQuery Ajax 写法个人总结
2017/03/24 jQuery
js 函数式编程学习笔记
2017/03/25 Javascript
react实现菜单权限控制的方法
2017/12/11 Javascript
在Vue中使用Compass的方法
2018/03/02 Javascript
[01:19:11]Ti4 循环赛第二日 NaVi.us vs iG
2014/07/11 DOTA
使用Python构建Hopfield网络的教程
2015/04/14 Python
使用70行Python代码实现一个递归下降解析器的教程
2015/04/17 Python
pytz格式化北京时间多出6分钟问题的解决方法
2019/06/21 Python
django框架面向对象ORM模型继承用法实例分析
2019/07/29 Python
python next()和iter()函数原理解析
2020/02/07 Python
详解基于 Canvas 手撸一个六边形能力图
2019/09/02 HTML / CSS
Html5百叶窗效果的示例代码
2017/12/11 HTML / CSS
PHP高级工程师面试问题推荐
2013/01/18 面试题
Vector, ArrayList, HashTable, HashMap哪些是线程安全的,哪些不是
2015/10/12 面试题
女大学生个人求职信
2013/12/09 职场文书
《逃家小兔》教学反思
2014/02/23 职场文书
合伙开公司协议书范本
2014/10/28 职场文书
2014年作风建设工作总结
2014/10/29 职场文书
初三毕业评语
2014/12/26 职场文书
浅谈pytorch中的dropout的概率p
2021/05/27 Python
pycharm代码删除恢复的方法
2021/06/26 Python