search

博客列表 >4月13号作业

4月13号作业

小蚂蚁的博客
小蚂蚁的博客原创
2018年05月08日 01:28:29688浏览

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>实战:表格自动生成器</title>

<style type="text/css">

h3 {

color: green;

margin-left:40px;

}

button {

width: 80px;

height: 30px;

border: none;

background-color: green;

color:white;

margin-right: 30px;

}

</style>

</head>

<body>

<h3>表格生成器</h3>

<p><label>输入行:<input type="text" name="rows"></label></p>

<p><label>输入列:<input type="text" name="cols"></label></p>

<p><button>生成表格</button><button>重置行列</button></p>

 <!--    <p><label>输入行:<input type="text" name="rows"></label></p>

    <p><label>输入列:<input type="text" name="cols"></label></p>

    <p><button>生成表格</button><button>重置行列</button></p> -->

<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>

<script type="text/javascript">

//创建请求标志,防止重复请求

var flag = true

$('button:first').on('click',function(){

// alert(0)验证代码

            // 第一步：遍历并验证用户输入的信息

            // $(选择器).each(对象索引，当前对象)

            $(':input').not('button').each(function(index,obj){

             // 非空判断

             // alert($(obj).val())验证代码

           

            if ($(obj).val().length==0){ 

                //在当前元素后面添加提示信息

                $(obj).after('<span style="color:red">不能为空</span>')

                  // 定时器清空

                  setTimeout(function(){

                       $(obj).next().remove()

                  },1500)

                  return true

                  // 非数字判断

            }else if (isNaN($(obj).val())){ 

                    //在当前元素后面添加提示信息

                    $(obj).after('<span style="color:red">必须为数字</span>')

                      // 定时器清空

                      setTimeout(function(){

                            $(obj).next().remove()

                      },1500)

                      return true

            } else if($(obj).val()<=0) {       

                            //在当前元素后面添加提示信息

                    $(obj).after('<span style="color:red">必须大于零</span>')

                      // 定

                      // 

                      // 时器清空

                      setTimeout(function(){

                            $(obj).next().remove()

                      },1500)

                      return false

                      }

                          //第二点:处理用户的请求(Ajax实现)

                          if (flag == false) {

                              $.get(

                                  //1.请求处理的脚本

                                  'demo8.php',

                                  //2.发送的请求参数

                                  {

                                      rows: $('input[name="rows"]').val(),

                                      cols: $('input[name="cols"]').val()

                                  },

                                  //3.请求成功的回调函数

                                  function(data){

                                  //先将上一次生成的表格删除

                                  $('p:last').next().remove()

                                  //生成新的表格

                                  $('p:last').after('data')

                                  //将请求标志设置为false,禁止重复请求

                                  flag = false

                              })

                          

                          }

                          })

                          }) 

                          


                      

                        

                    </script>

                  </body>

                  </html>


实例

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>实战:表格自动生成器</title>
	<style type="text/css">
		h3 {
			color: green;
			margin-left:40px;
		}
		button {
			width: 80px;
			height: 30px;
			border: none;
			background-color: green;
			color:white;
			margin-right: 30px;
		}
	</style>
</head>
<body>
	<h3>表格生成器</h3>
	<p><label>输入行:<input type="text" name="rows"></label></p>
	<p><label>输入列:<input type="text" name="cols"></label></p>
	<p><button>生成表格</button><button>重置行列</button></p>
 <!--    <p><label>输入行:<input type="text" name="rows"></label></p>
    <p><label>输入列:<input type="text" name="cols"></label></p>
    <p><button>生成表格</button><button>重置行列</button></p> -->
	<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
	<script type="text/javascript">
		//创建请求标志,防止重复请求
		var flag = true
		$('button:first').on('click',function(){
			// alert(0)验证代码
            // 第一步：遍历并验证用户输入的信息
            // $(选择器).each(对象索引，当前对象)
            $(':input').not('button').each(function(index,obj){
            	// 非空判断
            	// alert($(obj).val())验证代码
           
            if ($(obj).val().length==0){ 
                //在当前元素后面添加提示信息
                $(obj).after('<span style="color:red">不能为空</span>')
                  // 定时器清空
                  setTimeout(function(){
                       $(obj).next().remove()
                  },1500)
                  return true
                  // 非数字判断
            }else if (isNaN($(obj).val())){ 
                    //在当前元素后面添加提示信息
                    $(obj).after('<span style="color:red">必须为数字</span>')
                      // 定时器清空
                      setTimeout(function(){
                            $(obj).next().remove()
                      },1500)
                      return true
            } else if($(obj).val()<=0) {       
                            //在当前元素后面添加提示信息
                    $(obj).after('<span style="color:red">必须大于零</span>')
                      // 定
                      // 
                      // 时器清空
                      setTimeout(function(){
                            $(obj).next().remove()
                      },1500)
                      return false
                      }
                          //第二点:处理用户的请求(Ajax实现)
                          if (flag == false) {
                              $.get(
                                  //1.请求处理的脚本
                                  'demo8.php',
                                  //2.发送的请求参数
                                  {
                                      rows: $('input[name="rows"]').val(),
                                      cols: $('input[name="cols"]').val()
                                  },
                                  //3.请求成功的回调函数
                                  function(data){
                                  //先将上一次生成的表格删除
                                  $('p:last').next().remove()
                                  //生成新的表格
                                  $('p:last').after('data')
                                  //将请求标志设置为false,禁止重复请求
                                  flag = false
                              })
                          
                          }
                          })
                          }) 
                          

                      
                        
                    </script>
                  </body>
                  </html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

实例

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>实战:表格自动生成器</title>
	<style type="text/css">
		h3 {
			color: green;
			margin-left:40px;
		}
		button {
			width: 80px;
			height: 30px;
			border: none;
			background-color: green;
			color:white;
			margin-right: 30px;
		}
	</style>
</head>
<body>
	<h3>表格生成器</h3>
	<p><label>输入行:<input type="text" name="rows"></label></p>
	<p><label>输入列:<input type="text" name="cols"></label></p>
	<p><button>生成表格</button><button>重置行列</button></p>
 <!--    <p><label>输入行:<input type="text" name="rows"></label></p>
    <p><label>输入列:<input type="text" name="cols"></label></p>
    <p><button>生成表格</button><button>重置行列</button></p> -->
	<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
	<script type="text/javascript">
		//创建请求标志,防止重复请求
		var flag = true
		$('button:first').on('click',function(){
			// alert(0)验证代码
            // 第一步：遍历并验证用户输入的信息
            // $(选择器).each(对象索引，当前对象)
            $(':input').not('button').each(function(index,obj){
            	// 非空判断
            	// alert($(obj).val())验证代码
           
            if ($(obj).val().length==0){ 
                //在当前元素后面添加提示信息
                $(obj).after('<span style="color:red">不能为空</span>')
                  // 定时器清空
                  setTimeout(function(){
                       $(obj).next().remove()
                  },1500)
                  return true
                  // 非数字判断
            }else if (isNaN($(obj).val())){ 
                    //在当前元素后面添加提示信息
                    $(obj).after('<span style="color:red">必须为数字</span>')
                      // 定时器清空
                      setTimeout(function(){
                            $(obj).next().remove()
                      },1500)
                      return true
            } else if($(obj).val()<=0) {       
                            //在当前元素后面添加提示信息
                    $(obj).after('<span style="color:red">必须大于零</span>')
                      // 定
                      // 
                      // 时器清空
                      setTimeout(function(){
                            $(obj).next().remove()
                      },1500)
                      return false
                      }
                          //第二点:处理用户的请求(Ajax实现)
                          if (flag == false) {
                              $.get(
                                  //1.请求处理的脚本
                                  'demo8.php',
                                  //2.发送的请求参数
                                  {
                                      rows: $('input[name="rows"]').val(),
                                      cols: $('input[name="cols"]').val()
                                  },
                                  //3.请求成功的回调函数
                                  function(data){
                                  //先将上一次生成的表格删除
                                  $('p:last').next().remove()
                                  //生成新的表格
                                  $('p:last').after('data')
                                  //将请求标志设置为false,禁止重复请求
                                  flag = false
                              })
                          
                          }
                          })
                          }) 
                          

                      
                        
                    </script>
                  </body>
                  </html>

运行实例 »

点击 "运行实例" 按钮查看在线实例


上一条：4月16号作业php与ajax文本域验证下一条：4月12号作业
表格自动生成器
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多