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实现二分查找算法代码分享
Jun 24 PHP
PHP设计模式之装饰者模式
Feb 29 PHP
深入了解 register_globals (附register_globals=off 网站打不开的解决方法)
Jun 27 PHP
PHP APC的安装与使用详解
Jun 13 PHP
解析php扩展php_curl.dll不加载的解决方法
Jun 26 PHP
PHP简单获取视频预览图的方法
Mar 12 PHP
程序员的表白神器“520”大声喊出来
May 20 PHP
php封装的mongodb操作类代码
Aug 06 PHP
PHP设计模式之注册树模式分析
Jan 26 PHP
PHP使用openssl扩展实现加解密方法示例
Feb 20 PHP
PHP程序员必须知道的两种日志实例分析
May 14 PHP
PHP程序员简单的开展服务治理架构操作详解(一)
May 14 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添加数据到xml文件的简单例子
2016/09/08 PHP
php解决crontab定时任务不能写入文件问题的方法分析
2019/09/16 PHP
yii 框架实现按天,月,年,自定义时间段统计数据的方法分析
2020/04/04 PHP
通过js简单实现将一个文本内容转译成加密文本
2013/10/22 Javascript
setInterval计时器不准的问题解决方法
2014/05/08 Javascript
JavaScript link方法入门实例(给字符串加上超链接)
2014/10/17 Javascript
jQuery中live()方法用法实例
2015/01/19 Javascript
在Ubuntu系统上安装Node.JS的教程
2015/10/15 Javascript
jQuery实现的自定义滚动条实例详解
2016/09/20 Javascript
利用vue-router实现二级菜单内容转换
2016/11/30 Javascript
JQuery实现动态操作表格
2017/01/11 Javascript
原生js二级联动效果
2017/06/20 Javascript
使用vue构建一个上传图片表单
2017/07/04 Javascript
easyui简介_动力节点Java学院整理
2017/07/14 Javascript
jquery版轮播图效果和extend扩展
2017/07/18 jQuery
JavaScript递归算法生成树形菜单
2017/08/15 Javascript
webpack打包node.js后端项目的方法
2018/03/10 Javascript
jQuery实现点击图标div循环放大缩小功能
2018/09/30 jQuery
Vue源码解析之Template转化为AST的实现方法
2018/12/14 Javascript
深入理解Vue keep-alive及实践总结
2019/08/21 Javascript
图解NodeJS实现登录注册功能
2019/09/16 NodeJs
[02:32]DOTA2英雄基础教程 祸乱之源
2013/12/23 DOTA
[37:22]DOTA2上海特级锦标赛D组资格赛#2 Liquid VS VP第一局
2016/02/28 DOTA
Python基础入门之seed()方法的使用
2015/05/15 Python
Python优化技巧之利用ctypes提高执行速度
2016/09/11 Python
PyTorch CNN实战之MNIST手写数字识别示例
2018/05/29 Python
Python使用jsonpath-rw模块处理Json对象操作示例
2018/07/31 Python
django模板加载静态文件的方法步骤
2019/03/01 Python
python 爬虫基本使用——统计杭电oj题目正确率并排序
2020/10/26 Python
AP澳洲中文网:澳洲正品直邮,包税收件无忧
2019/07/12 全球购物
会计专业应届生自荐信
2014/02/07 职场文书
房地产置业顾问岗位职责
2015/04/11 职场文书
内勤岗位职责范本
2015/04/13 职场文书
公司2015年终工作总结
2015/05/26 职场文书
Python机器学习应用之基于线性判别模型的分类篇详解
2022/01/18 Python
JavaScript正则表达式实现注册信息校验功能
2022/05/30 Java/Android