本地存储

来源:互联网 发布:淘宝网页布局工具 编辑:程序博客网 时间:2024/05/22 12:34
<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <meta name="viewport" content="width=device-width, initial-scale=1">    <title>风险评估</title>    <link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.min.css">    <script type="text/javascript" src="js/jquery/jquery-3.2.1.min.js"></script>    <style type="text/css">        body{            padding: 5px;        }        .instruction{            text-align: right;        }        .top{            margin-top: 10px;        }        .cont{            height: 100px;            margin:10px auto 0;            padding: 10px;        }    </style>    <script type="text/javascript">        //在文档首次加载时,将会尝试还原输入字段         $(function(){             //存储输入框数据             var localMsg;             //将数据转换成json形式保存             if(window.localStorage.formHistory){                 localMsg=JSON.parse(window.localStorage.formHistory);             }             //如果浏览器支持本地存储并且上次保存的值是存在的             if(localMsg && localMsg.length>=1){                 var realIndex=0;                 for(var j=0;j<$('#risk input').length;j++){                     if($($('#risk input')[j])[0].type=='text'){                         $($('#risk input')[j]).val(localMsg[realIndex].text);                         realIndex++;                     }                 }             }        });        //将输入框的值保存到本地        //文件上传        function doChange(file){            var upload_file = $.trim($("#upload_file").val());    //获取上传文件            $('#photoCover').val(upload_file);     //赋值给自定义input框        }        function calculate(){            var history=[];            window.localStorage.formHistory='';            for(var j=0;j<$('#risk input').length;j++){                if($($('#risk input')[j])[0].type=='text'){                    history.push({"text":$($('#risk input')[j]).val()})                }            }            window.localStorage.formHistory=JSON.stringify(history);            //距离            var l=$('.distance').val();            //河流距离指标m1            var m1=-1.351*Math.pow(10,-9)*Math.pow(l,3)                    +2.267*Math.pow(10,-6)*Math.pow(l,2)+1;            //湖泊距离指标m2            var m2=10.64*Math.pow(l,-0.583)-0.2518;            //农田距离指标m3            var m3=-2.848*Math.pow(10,-9)*Math.pow(l,4)                    +1.028*Math.pow(10,-6)*Math.pow(l,3)                    -0.937*Math.pow(10,-4)*Math.pow(l,2)                    -0.00495*l+1;            //水库距离指标m4            var m4=32.5375*Math.exp(-0.003*l)-31.5375*Math.exp(-0.0028*l);            //林区距离指标m5            var m5=1-0.63*Math.pow(l,0.0885);            //鸟类迁徙通道指标m6            var m6=1-0.00075*Math.pow(l,2)+0.0154*l            //环境的值            var environment=$('.environment').val();            //风险等级结果D            var D;            //等级值            var i;            //这里的值v、a、t、s给的是固定值            if(environment==='河流'){                D=0.2344*m1+0.2077*0.4227+0.0017*0.5217+0.0533*0.5366+0.0173*0.975941;            }else if(environment==='湖泊'){                D=0.1507*m2+0.2077*0.4227+0.0017*0.5217+0.0533*0.5366+0.0173*0.975941;            }else if(environment==='农田'){                D=0.1172*m3+0.2077*0.4227+0.0017*0.5217+0.0533*0.5366+0.0173*0.975941;            }else if(environment==='水库'){                D=0.1004*m4+0.2077*0.4227+0.0017*0.5217+0.0533*0.5366+0.0173*0.975941;            }else if(environment==='林区'){                D=0.067*m5+0.2077*0.4227+0.0017*0.5217+0.0533*0.5366+0.0173*0.975941;            }else if(environment==='鸟类迁徙通道') {                D = 0.0503 * m6 + 0.2077 * 0.4227 + 0.0017 * 0.5217 + 0.0533 * 0.5366 + 0.0173 * 0.975941;            }            //判断等级结果            if(0<=D<=0.1){                i=0;            }else if(0.1<D<=0.25){                i=1;            }else if(0.25<D<=0.45){                i=2;            }else if(0.45<D<=1){                i=3;            }            $('.table').append("<tr>"+"<td>"+$('.Tower').val()+"</td>"+                    "<td>"+$('.Voltage').val()+"</td>"+                    "<td>"+$('.TowerType').val()+"</td>"+                    "<td>"+$('.Conductor').val()+"</td>"+                    "<td>"+$('.Insulator').val()+"</td>"+                    "<td>"+environment+"</td>"+                    "<td>"+l+"</td>"+                    "<td>"+i+"</td>"+                    "</tr>");        }    </script></head><body><div class="row" id="risk">    <iframe name="formSubmit" style="display:none;"></iframe>    <form class="form-inline" target="formSubmit">        <div class="row top">            <div class="col-md-4 form-group">                <label class="col-md-4 instruction">杆塔号:</label>                <input list="Tower" class="form-control Tower">                <datalist id="Tower">                    <option value="56">                    <option value="40">                    <option value="75">                    <option value="45">                    <option value="55">                </datalist>            </div>            <div class="col-md-4 form-group">                <label class="col-md-4 instruction">电压等级:</label>                <input list="Voltage" class="form-control Voltage">                <datalist id="Voltage">                    <option value="110">                    <option value="220">                    <option value="500">                </datalist>            </div>            <div class="col-md-4 form-group">                <label class="col-md-4 instruction">杆塔类型:</label>                <input list="Tower type" class="form-control TowerType">                <datalist id="Tower type">                    <option value="直线塔">                    <option value="耐张塔">                </datalist>            </div>        </div>        <div class="row top">            <div class="col-md-4 form-group">                <label class="col-md-4 instruction">导线排列方式:</label>                <input list="Conductor" class="form-control Conductor">                <datalist id="Conductor">                    <option value="三角形排列">                    <option value="水平排列">                    <option value="垂直排列">                </datalist>            </div>            <div class="col-md-4 form-group">                <label class="col-md-4 instruction">绝缘子串类型:</label>                <input list="Insulator" class="form-control Insulator">                <datalist id="Insulator">                    <option value="v串">                    <option value="直线串">                </datalist>            </div>            <div class="col-md-4 form-group">                <label class="col-md-4 instruction">环境类型:</label>                <input list="Environment" class="form-control environment">                <datalist id="Environment">                    <option value="河流">                    <option value="湖泊">                    <option value="农田">                    <option value="水库">                    <option value="林区">                    <option value="鸟类迁徙通道">                </datalist>            </div>        </div>        <div class="row top">            <div class="col-md-4 form-group">                <label class="col-md-4 instruction">距离:</label>                <input list="distance" class="form-control distance">                <datalist id="distance">                    <option value="10">                </datalist>            </div>            <div class="col-md-4"></div>            <button type="submit" class="col-md-1 btn btn-default"                    onclick="calculate()">计算</button>            <div class="form-group col-md-2">                <img src="images/excel.jpg" title="导入"                     onclick="$('#InputFile').click()">                <input type="file" name="upload_file" id="InputFile" onchange="doChange(this)"                       style="display: none">                <img src="images/excel.jpg" title="导出">            </div>        </div>    </form></div><div class="cont">    <div class="table-responsive">        <table class="table table-bordered table-hover">            <tr>                <th>杆塔号</th>                <th>电压等级</th>                <th>杆塔类型</th>                <th>导线排列方式</th>                <th>绝缘子串类型</th>                <th>环境类型:</th>                <th>距离</th>                <th>风险等级</th>            </tr>        </table>    </div></div></body></html>
原创粉丝点击