目的:分清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实现用户输入数字后取得最大的值并显示为第几个的更多相关文章

  1. js正则实现用户输入银行卡号的控制及格式化

    //js正则实现用户输入银行卡号的控制及格式化 <script language="javascript" type="text/javascript"& ...

  2. js—input框中输入数字，动态生成内容的方法

    项目中需要在前端实现: 用户输入数字n,动态生成n个元素,删除n,自动清空n个元素(如图一): 用户输入数字n,失焦生成n个元素,再聚焦修改n,自动清空n个元素(如图二): 图一: 图二: 需求一实现 ...

  3. excel如何设置输入数字后单元格自动填充颜色

    在使用excel的过程中,有时需要在输入数字时,突出显示这些单元格,突出显示可以用有填充颜色的单元格来表示.为了实现这样的效果,需要借助excel的条件格式. 工具/原料 电脑 Excel 2010 ...

  4. js限制输入框只能输入数字

    分享下js限制输入框中只能输入数字的方法,包括整数与小数,分享几个例子,有需要的朋友参考下. 1.使用正则表达式限制输入框只能输入数字: <input type="text" ...

  5. 用户输入URL后发生了什么，以及优化问题

    用户角度:1.打开浏览器2.输入URL3.按下回车4.浏览器呈现画面 当用户输入页面地址后,浏览器获得用户希望访问的地址,便向该站点服务器发起一系列的请求,这些请求不光包括对页面的请求,还包括对页面中 ...

  6. 【web性能优化】当用户输入网址后发生了什么？

    简单叙述 这个过程可以大致分为两个部分:网络通信和页面渲染. 一.网络通信 互联网内各网络设备间的通信都遵循TCP/IP协议,利用TCP/IP协议族进行网络通信时,会通过分层顺序与对方进行通信.分层由 ...

  7. js实例:验证只能输入数字和一个小数点

    分享一个javascript脚本代码,用于验证只能输入数字和一个小数点,检测数字输入是否符合要求,效果不错,有用到的朋友拿去吧. 原文地址:http://www.jbxue.com/article/1 ...

  8. Js验证 ：只能输入数字和小数点 验证是否是数字 js取float型小数点后两位

    JS判断只能是数字和小数点 1.文本框只能输入数字代码(小数点也不能输入)<input onkeyup="this.value=this.value.replace(/\D/g,'') ...

  9. js打印保存用户输入的内容

    在用js打印局部页面时,遇到用户新输入的内容没能打印出来,经过观察,发现我采用的js打印方法是读取页面源代码,而用户输入的内容如果不将其写入到页面源代码中去,是打印不出来的,下面是我的解决方法: // ...

随机推荐

  1. [进程管理]linux 下 进程和线程的区别（baidu 面试)

    进程是程序执行时的一个实例,即它是程序已经执行到课中程度的数据结构的汇集.从内核的观点看,进程的目的就是担当分配系统资源(CPU时间.内存等)的基本单位. 线程是进程的一个执行流,是CPU调度和分派的 ...

  2. 金山助手流氓软件-被进程sjk_daemon.exe坑死

    修改完Android工程代码,进入调试阶段时DDMS中报错:The connection to adb is down, and a severe error has occured. 由于之前也碰到 ...

  3. app性能测试【通过loadrunner录制】

    随着智能手机近年来的快速增长,从游戏娱乐到移动办公的各式各样的手机APP软件渗透到我们的生活中,对于大型的手机APP测试不仅要关注它的功能性.易用性还要关注它的性能,最近发现LoadRunner12可 ...

  4. TP5学习基础二：目录结构、URL路由、数据操作

    一.安装1.使用git或者composer(composer update)进行实时更新,区别在于git不会清空核心框架目录而composer会清空.2.使用官网打包好的TP压缩包(解压即可用)-&g ...

  5. MarkDown本地图片上传工具制作总结

    引言:开始尝试使用MarkDown语法写文档,发现图片必须用外链的形式才能插入到文章中,而自己平时最常用的插入图片方式就是QQ截屏,觉得很不方便所以制作的小工具辅助上传,因为时间和水平有限,其实代码写 ...

  6. LeetCode 题解（一）：Two Sum

    LeetCode : two sum 第一次写博客,算是熟悉这些编辑环境吧,本来是打算在csdn上用markdown写的,结果改了博客介绍就被关闭了,晕死...好了,话不多说,今天打算拿LeetCod ...

  7. list和map集合

    List特点:元素有放入顺序,元素可重复Set特点:元素无放入顺序,元素不可重复(注意:元素虽然无放入顺序,但是元素在set中的位置是有该元素的HashCode决定的,其位置其实是固定的)Map特点: ...

  8. TreeSet源码分析

    第1部分 TreeSet介绍 TreeSet 是一个有序的集合,它的作用是提供有序的Set集合.它继承于AbstractSet抽象类,实现了NavigableSet<E>, Cloneab ...

  9. ImageIO.write不好用了

    今天奇怪的发现这个下面不好使了,即用ImageIO把图片写入网络流中,第一次还好使,对于同一个SocketOutputStream,第二次使用write方法就不好使了,变成了死等. 网上搜了资料搜不到 ...

  10. Android相机是如何获取到图像的

    在研究zxing的过程中,脑袋中一直有个疑惑,那个相机并没有拍照,它是怎么获取图像的 带着这个疑惑查看Camera源码 Camera源码中有这样一个接口: public interface Previ ...