目的:分清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. [CTSC1999]【网络流24题】星际转移

    Description 由于人类对自然资源的消耗,人们意识到大约在2300 年之后,地球就不能再居住了.于是在月球上建立了新的绿地,以便在需要时移民.令人意想不到的是,2177 年冬由于未知的原因,地 ...

  2. stl_container容器和std_algorithm算法相同的函数

    八.算法和容器中存在的功能相同的函数: 8.1.array: 8.1.1.fill. 1.在array中:void fill (const value_type& val); 2.在algor ...

  3. JS基础——循环很重要

    介绍循环之前,首先要说一下同样很重要的if-else结构,switch-case结构 ①if-else结构 if(判断条件) { 条件为true时执行 } else{ 条件为false时执行 } ②i ...

  4. 开始使用gentoo linux——gentoo安装笔记（上）

    gentoo linux安装笔记(上) 家里有一台破旧的富士通笔记本,08年至今质量依然杠杠的,但是性能已经不能和现代超极本同日而语,装上了ubuntu更是不敢恭维,别提gnome和kde的linux ...

  5. oracle表信息

    获取表: select table_name from user_tables; //当前用户的表 select table_name from all_tables; //所有用户的表 select ...

  6. 使用canvas进行图片裁剪简单功能

    1.html部分 使用一个input[type="file"]进行图片上传: canvas进行图片的裁剪展示 <div> <input type="fi ...

  7. SVN常见问题总结一

    注意 转载须保留原文链接(http://www.cnblogs.com/wzhiq896/p/6828776.html  ) 作者:wangwen896 SVN是Subversion的简称,是一个开放 ...

  8. poj3067 Japan 树状数组求逆序对

    题目链接:http://poj.org/problem?id=3067 题目就是让我们求连线后交点的个数 很容易想到将左端点从小到大排序,如果左端点相同则右端点从小到大排序 那么答案即为逆序对的个数 ...

  9. [刷题]算法竞赛入门经典(第2版) 6-1/UVa673 6-2/UVa712 6-3/UVa536

    这三题比较简单,只放代码了. 题目:6-1 UVa673 - Parentheses Balance //UVa673 - Parentheses Balance //Accepted 0.000s ...

  10. Java学习笔记——设计模式之一.简单工厂

    蜀道之难.难于上青天,侧身西望长咨嗟 --蜀道难 设计模式第一篇,简单工厂. 定义Operation类 package cn.no1.simplefactory; public abstract cl ...