只有涉及到（JS、HTML、PHP）的一些知识点

在大一学完C之后，就想写迷宫小游戏。扑哧被现实打破了这个幻想。

接着第二学期学习了数据结构，HTML，JS 。感觉迷宫也不是那么难，再加上一丁点ACM基础。然后。。。然后就忘了这回事┭┮﹏┭┮。

经过一个暑假的梦游，面临大二一些令人头大的线代、数电、English。看完 bigsai 的博客之后令我内心久久不能平静？O(∩_∩)O？

接下来我依旧保持淡定，假装满不在乎的淡忘这些无聊的课程，开始迷宫小游戏的学习。
经过圈天左右（记不清，此处省略三个字）（好像课余时间都在球场，总忘记这茬）的滴滴滴，做完了这个游戏《暂时认为 ‘期末要赶紧复习了’》。

但是感觉也没什么知识进了脑子里。所以在过年之前先总结一下遇到的一些知识点，防止以后看了自己的代码都看不懂写的啥玩意。（这是我的优点，从不记令不开心的事）。

测试

开始操作之前，首先要理解、不一定要掌握(对我而言) 要涉及到的算法：并查集、（Prim、Kruskal）、生成树(不是全部)。

HTLML（回忆）：

大部分都可以在https://blog.csdn.net/qq_44009311/article/details/102510427找到。

js小知识：

在画布 canvas 中画线条

<html>
<canvas id="mycanvas"  style="background: chartreuse" ></canvas>
</html>
<script>
    var chess = document.getElementById("mycanvas");//找到迷宫的主地
    var context = chess.getContext('2d');//定义一个用于在画布上绘图的环境。
    context.strokeStyle='rgb(255,1,0)';// 画线颜色
    //竖线
    context.moveTo(20,20);//起点 参数（横坐标、纵坐标）
    context.lineTo(20,200);//终点
    context.stroke();//实际地绘制出通过 moveTo() 和 lineTo() 方法定义的路径
</script>

如图：
在这里插入图片描述

擦除(在 1 的基础上)

context.clearRect(19,50,2,28);// 擦点坐标(x,y) 橡皮为(w,h)宽高

如图：
在这里插入图片描述

画一个方块

<html>
    <canvas style="background: chartreuse" id="mycanvas" ></canvas>
</html>
<script>
    var chess = document.getElementById("mycanvas");//找到迷宫的主地
    var context = chess.getContext('2d');//定义一个用于在画布上绘图的环境。

    context.fillStyle = "#ff0010";//颜色
    context.fillRect(50, 50, 20, 20);//坐标宽高
</script>

如图：
在这里插入图片描述

把方块改为小图片

<html>
    <div>
        <img id="tp"  src="http://wx0725.top/maze/image/qidian.jpg"/>
    </div>
    <br/>
    <canvas style="background: chartreuse" id="mycanvas" ></canvas>
</html>

<script>
    var chess = document.getElementById("mycanvas");//找到迷宫的主地
    var context = chess.getContext('2d');//定义一个用于在画布上绘图的环境。

    var img2 = document.getElementById('tp');
    img2.onload = function(){
        var pattern = context.createPattern(img2, "no-repeat");
        context.fillStyle = pattern;
        context.drawImage(img2,50,50,20,20);// 参数：图片、坐标、宽高
    }
</script>

如图：
在这里插入图片描述

监听键盘输入事件：

<script>
    jian();
    function jian() {
        window.addEventListener('keydown', go, true);
    }
    function go(e) {
        alert('您按下了键：' + e.keyCode);
    }
</script>

如图：按下会回车键时显示：
在这里插入图片描述

将任意一个标签模拟键盘事件：

<!--将一个button按钮模拟一个键盘事件(不仅仅是button，其他标签也可以)-->
<button onclick="jp(13)" style="background: #00c6ff">我是模拟键</button>

<!--    导入jQuery-->
<script src="http://wx0725.top/js/jquery-1.12.4.min.js"></script>
<script>
    // 按钮模拟键盘事件
    function jp(b){
        var a=$.Event("keydown");
        a.keyCode=b;
        $(window).trigger(a);
        go(a)
    }

    function go(e) {
        alert('您按下了键：' + e.keyCode);
    }
</script>

点击按钮时：如图
在这里插入图片描述

一个简单的sleep函数：

function sleep(delay) {//delay为毫秒
    var start = (new Date()).getTime();
    while ((new Date()).getTime() - start < delay) {
        continue;
    }
}

页面刷新：

function renovates(){
    document.location.reload()
}

通过点击来控制滚动条：

<html>
<head>
<!--简单对页面设计一下-->
    <style>
        .main{
            ;height: 1000px;background: #00c6ff;width: 500px;margin: auto
        }
        .xia{
            position: fixed;top: 0px;width: 500px;background: black;color: white;
        }
    </style>
</head>
<body>
    <div class="main">
        <button class="xia" onclick="xia()">向下</button>
        <br/>1<br/>2<br/>3<br/>4<br/>5<br/>6<br/>7<br/>8<br/>9<br/>10<br/>11<br/>12<br/>13
    </div>

    <script>
        function xia() {
            window.scrollBy(0,+50);//控制滚动条，x不变，y减100
        }
    </script>
</body>
</html>

效果如下：
在这里插入图片描述

JS 模拟 form 提交给php页面数据：
发送端：

<script>
    function baocun() {
        //调用传参函数
        jsFormSubmit({
            //必填参数
            "url": "提交的目的地",
            "methond":"post",//提交方式
            "target":"_self",//跳转方式
            //下边为要提交的数据
            "变量名称": 变量值;
        });
    }
    //js模拟form提交数据
    function jsFormSubmit(e){
        var b=document.createElement("form");
        document.body.appendChild(b);
        var g=e["methond"]||"POST";
        b.method=g;
        delete e["methond"];
        var d=e["target"]||"_self";
        b.target=d;
        delete e["target"];
        var a=e.url;
        b.action=a;
        delete e["url"];
        for(var c in e){
            var f=document.createElement("input");
            f.setAttribute("type","hidden");
            f.setAttribute("name",c);
            f.setAttribute("value",e[c]);
            b.appendChild(f)}b.submit()
    }
</script>

接收端(php)：直接获取

$_POST['变量名称']

获取手机真是的宽高：
(大部分可以通过这个直接判断用户是否为移动端访问)
```
var phoneHeight=window.screen.height
var phoneWidth=window.screen.width;
```
获取手机陀螺仪的信心：
```
window.addEventListener("deviceorientation", orientationHandler, false);
function orientationHandler(event) {
	Math.round(event.alpha);
	Math.round(event.beta);
	Math.round(event.gamma);

}
```
具体数据信息如下：
- alpha 设备绕z轴旋转的角度。（指南针的应用只要拿到alpha就OK啦）
- beta 设备绕x轴旋转的角度
- gamma 设备绕y轴旋转的角度
- webkitCompassHeading: 与正北方向的角度差值。正北为0度，正东为90度，正南为180度，正西为270度。因为0度是正北，所以叫指北针，不是指南针。
- webkitCompassAccuracy：指北针的精确度，表示偏差为正负多少度。一般是

更改鼠标的样式：

    document.body.style.cursor = "url(http://wx0725.top/image/mouse/0001.cur)";

鼠标显示隐藏的内容

<span id="me" style="">I Love</span>
<span id="you">You</span>

<script src="http://wx0725.top/js/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
    $(function(){
        $("#you").hide();
        $("#me").hover(function(){
            $("#you").show();
        },function() {
            $("#you").hide();
        });
        //如果当鼠标放在#you上时不希望显示you，下面的可以注释。
        $("#you").hover(function(){
            $("#you").show();
        },function(){
            $("#you").hide();
        })
    })();
</script>

效果：在这里插入图片描述

更改鼠标样式：

<script>
    document.body.style.cursor = "url(http://wx0725.top/image/mouse/0001.cur)";
</script>

变色画板：

<!--贴身显示，可以自己设置js函数来调节位置-->
<div class="main" style="background: #f78000;width: 200px;height: 200px;margin: auto">
点击设置背景
</div>

<script src="http://wx0725.top/调色面板/js/jquery.min.js"></script>
<script type="text/javascript" src="http://wx0725.top/js/biancolor.min.js"></script>
<script>
    // 修改为需要显示变色画布的标签ID
    // css后面的引号可以自定义修改，例如改为color即可让字体变色
    $(".main").paigusu({},function(a,b){
        console.log(a);console.log(b);$(a).css("background","#"+b.hex)
    });
</script>

效果：在这里插入图片描述

新窗口打开：

window.open('http://wx0725.top','newwindow','width=500,height=500,left=40,top=50,toolbar=yes,location=yes,status=yes,menubar=yes,scrollbars=yes,resizable=yes')

PHP

打印当前时间

<?php
    date_default_timezone_set('PRC'); //东八时区 echo date('Y-m-d H:i:s');
    $time = date("H:i:s");  //当前时间
    echo $time;
?>

打印当前局域网信息：

<?php
function getip1(){//方法1
    if (getenv("HTTP_CLIENT_IP") && strcasecmp(getenv("HTTP_CLIENT_IP"), "unknown"))
        $ip = getenv("HTTP_CLIENT_IP");
    else if (getenv("HTTP_X_FORWARDED_FOR") && strcasecmp(getenv("HTTP_X_FORWARDED_FOR"), "unknown"))
        $ip = getenv("HTTP_X_FORWARDED_FOR");
    else if (getenv("REMOTE_ADDR") && strcasecmp(getenv("REMOTE_ADDR"), "unknown"))
        $ip = getenv("REMOTE_ADDR");
    else if (isset($_SERVER['REMOTE_ADDR']) && $_SERVER['REMOTE_ADDR'] && strcasecmp($_SERVER['REMOTE_ADDR'], "unknown"))
        $ip = $_SERVER['REMOTE_ADDR'];
    else
        $ip = "unknown";
    return($ip);
}

function getCity($ip)//城市
{
    $url="http://ip.taobao.com/service/getIpInfo.php?ip=".$ip;
    $ip=json_decode(file_get_contents($url));
    if((string)$ip->code=='1'){
        return false;
    }
    $data = (array)$ip->data;
    return $data;
}
    print_r(getCity(getip1()));
?>

将一个文件中的数字+1（不使用数据库、简单记录访客数量）

<?php
$countfile = "***.txt";
$fp = fopen($countfile, "r+");
//如果文件能够正常打开，就读入文件中的数据，假设是1
$count = fread($fp, 10);
//读取10位数据
$count = $count + 1;

fclose($fp);
//关闭当前文件
$fp = fopen($countfile, "w+");

//以覆盖模式打开文件
fwrite($fp, $count);
//写入加1后的新数据
fclose($fp);
//并关闭文件
echo $count;
?>

正则表达式判断一个手机号

preg_match("/^1[34578]\d{9}$/",$phone);//返回 0 1

防止SQL注入(在安全编程中也有提到)：

setlocale(LC_CTYPE, "UTF8", "en_US.UTF-8");//防止下面的函数过滤汉字
$id = escapeshellarg($_POST['id']);//escapeshellarg()封装字符串防止sql注入

简单的测试：http://wx0725.top/maze.php

小迷宫项目遇到的知识点总结

只有涉及到（JS、HTML、PHP）的一些知识点

HTLML（回忆）：

js小知识：

PHP

猜你喜欢

小迷宫项目遇到的知识点 总结

只有涉及到（JS、HTML、PHP）的一些 知识点

HTLML（回忆）：

js小知识：

PHP

猜你喜欢

小迷宫项目遇到的知识点总结

只有涉及到（JS、HTML、PHP）的一些知识点