PHP笔记
- --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
- 欢迎使用Markdown编辑器
- --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
站点目录
当前文件相对站点的路径
/*
localhost/aa/a.php
输出: /aa/
SCRIPT_NAME 兼容性高
*/
$ml_url = substr( $_SERVER['SCRIPT_NAME'], 0, strrpos($_SERVER['SCRIPT_NAME'] , '/')+1 );
字符串处理
1、替换
$str=preg_replace('/ /','T',$str); // 把空格替换成T
JS知识点
1、js点击id更改另一id值
$('#y').click(function(){
document.getElementById('recharge_num').value='1';
});
2、js自动执行函数
$(function(){
// 里边写内容
});
3、js弹框
function doWarning(id, money){
$('#beizui11').html(''+id); //传参
$('#money11').html('' + money); //传参
layer.open({
skin:'test0',
title:'充值必读',
type:1,
content:$('#warningDlg'), //弹框div的id
area:['90%', 'auto'], //弹框大小
btn:['我已阅读,继续支付'], //按钮
yes: function(i){
doPay();
layer.close(i);
}
});
}
页面跳转
1、HTML3秒后跳转
// 放在head头部里,3 => 3秒,URL是跳转地址,在原来的URL后边加值(URL)
<meta http-equiv="refresh" content="3;URL=www.baidu.com">
2、PHP跳转
// 立即加载页面
header("location: https://www.baidu.com/");
// 3秒后跳转
header("Refresh:3;url=https://www.baidu.com/");
// 调用了sleep()方法,效果也是x秒后执行跳转
sleep(3); header("location: https://www.baidu.com/")
3、JS跳转
window.location.href="https://www.baidu.com/"
// 延迟3秒后跳转
setTimeout("window.location.href='https://www.baidu.com/'",3000);
// 让新页面替换掉当前页面,不会保存在历史记录里,所有不能使用浏览器后退到原页面了
window.location.replace("https://www.baidu.com/");
JS绑定循环标签
1、点击某个标签显示出其内容
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript"src="jquery-2.2.3.min.js"></script>
<script>
$(function(){
$("div").each(function(i){
$(this).bind("click", {index: i}, clickHandler);
});
function clickHandler(event){
var i= event.data.index;
alert($("div").eq(i).html());
}
})
</script>
</head>
<body>
<div>测试div1</div>
<div>测试div2</div>
<div>测试div3</div>
</body>
</html>
居中问题
1、文字水平垂直居中
text-align:center; //水平居中
//垂直居中
height:10px;
line-height:10px;
2、图片和文字居中
vertical-align:middle; //中部对齐
设置各对象的vertical-align属性,属性说明:
baseline -将支持valign特性的对象的内容与基线对齐
sub -垂直对齐文本的下标
super -垂直对齐文本的上标
top -将支持valign特性的对象的内容与对象顶端对齐
text-top -将支持valign特性的对象的文本与对象顶端对齐
middle -将支持valign特性的对象的内容与对象中部对齐
bottom -将支持valign特性的对象的文本与对象底端对齐
text-bottom -将支持valign特性的对象的文本与对象顶端对齐
// 无图时显示默认的
<img src="zz.jpg" onerror="this.src='null.jpg'">
JS获取网站IP和地址
获取用户ip和地址
// 在HTML后缀文件里可以这样用
<script src="http://pv.sohu.com/cityjson?ie=utf-8"></script>
<script>
alert(returnCitySN['cip'] + returnCitySN['cname']); //IP和地区
</script>
// 在纯js文件里使用时要写成下边的形式
document.writeln('<script src=\'https://pv.sohu.com/cityjson?ie=utf-8\' type=\'text/javascript\' charset=\'utf-8\'><\/script>');
//注意:HTML文件里也要引入这个
<script src=\'https://pv.sohu.com/cityjson?ie=utf-8\' type=\'text/javascript\' charset=\'utf-8\'><\/script>
alert(returnCitySN['cip'] + returnCitySN['cname']); //IP和地区
JS复制文本
复制
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>haha</title>
</head>
<body>
<style type="text/css">
.wrapper {position: relative;}
#input {position: absolute;top: 0;left: 0;opacity: 0;z-index: -10;}
</style>
<div class="wrapper">
<p id="text">快复制我</p>
<textarea id="input">这是转换</textarea>
<button onclick="copyText()">copy</button>
</div>
<script type="text/javascript">
function copyText() {
var text = document.getElementById("text").innerText;
var input = document.getElementById("input");
input.value = text;
input.select();
document.execCommand("copy");
alert("复制成功");
}
</script>
</body>
</html>
CSS笔记
常用的css
box-sizing: border-box; //div内容挤padding和margin,外层div大小不变
white-space: nowrap; //强制不换行
position: sticky; //向上滑头部导航栏始终置顶
transition: all 0.5s; //动画效果
box-shadow: 0px 0px 5px 1px #EAEAEA; //div凸起效果
position: relative; //相对定位,相对父级元素或上一个元素(会随父级或上一级一起移动)
position:absolute; //绝对定位,可以脱离父级元素,单独显示在想要的位置
border-radius:10px; //圆角
border: 1px solid #999; //边框
cellspacing="0" cellpadding="0" border="0" //写在HTML的table里的,合并单元格之间的距离
//input边框圆角
box-shadow: 0 0 0 10px #cd0000;
border-radius: 6px;
//div内容居右显示
display: flex;
justify-content: flex-end;
letter-spacing: 0.2em; // 字间距
cursor: pointer; //鼠标放上变小手
// div强制不换行,超出加省略号
overflow:hidden;
white-space:nowrap;
text-overflow:ellipsis;
// 宽
width: calc(50% - 5px);
// 更改div比例尺,放大缩小div (缺点 缩小后还占用原来的尺寸位置,显示空白)
transform: scale(0.3); // 0.3缩放比例(0-1)
transform-origin: 0 0; // 变换原点坐标,围绕这一点缩放
// 和上边一样效果,不占用原位置(推荐)
zoom:0.3;
// 给一个div加多个边框
box-shadow: 0 0 0 10px #ff0000, 0 0 0 20px #000, 0 0 0 30px #ccc
div右浮不变顺序
<div style ="text-align:right">
<div style ="display:inline-block">左</div>
<div style ="display:inline-block">中间</div>
<div style ="display:inline-block">右</div>
</div>
div居中
<div class="div"></div>
<style>
.div {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
// div内容竖直居中
XX {
display: flex;
align-items: center;
}
</style>
JS笔记
1、获取下拉框的选中值
<select onchange="func()">
<option value="0" >选项一</option>
<option value="1" >选项二</option>
</select>
<script type="text/javascript">
function func(){
//获取被选中的option标签
var vs = $('select option:selected').val();
alert(vs);
}
</script>
2、JS的foreach循环
<script type="text/javascript">
var array = [1,2,3,4,5,6,7];
array.forEach(v=>{
alert("haha"+v);
});
</script>
3、循环输出的东西判断点击了哪一个(事件的绑定)
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript"src="jquery-2.2.3.min.js"></script>
<script>
$(function(){
$("div").each(function(i){
$(this).bind("click", {index: i}, clickHandler);
});
function clickHandler(event){
var i= event.data.index;
alert($("div").eq(i).html());
}
});
</script>
</head>
<body>
<div>测试div1</div>
<div>测试div2</div>
<div>测试div3</div>
</body>
</html>
聊天消息循环延迟展出
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
</head>
<body>
<style type="text/css">
.a{display: none;}
</style>
<div id="div_container">
<div class="1 a">1 <span class="time"></span></div>
<div class="2 a">2 <span class="time"></span></div>
<div class="3 a">3 <span class="time"></span></div>
<div class="4 a">4 <span class="time"></span></div>
<div class="5 a">5 <span class="time"></span></div>
<div class="6 a">6 <span class="time"></span></div>
<div class="7 a">7 <span class="time"></span></div>
<div class="8 a">8 <span class="time"></span></div>
<div class="9 a">9 <span class="time"></span></div>
<div class="10 a">10 <span class="time"></span></div>
</div>
<script type="text/javascript">
var i=1;
setInterval(function(){
$("#div_container").children(":first").before($('.'+i));
$('.'+i).css('display','block');
var now = new Date();
var hour = now.getHours();//得到小时
var minu = now.getMinutes();//得到分钟
var sec = now.getSeconds();//得到秒
$('.'+i+' .time').html(hour+':'+minu+':'+sec);
// alert(hour+':'+minu+':'+sec);
if(++i>10){i=1;}
},"1000");
</script>
</body>
</html>
--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
欢迎使用Markdown编辑器
你好! 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Markdown编辑器, 可以仔细阅读这篇文章,了解一下Markdown的基本语法知识。
新的改变
我们对Markdown编辑器进行了一些功能拓展与语法支持,除了标准的Markdown编辑器功能,我们增加了如下几点新功能,帮助你用它写博客:
- 全新的界面设计 ,将会带来全新的写作体验;
- 在创作中心设置你喜爱的代码高亮样式,Markdown 将代码片显示选择的高亮样式 进行展示;
- 增加了 图片拖拽 功能,你可以将本地的图片直接拖拽到编辑区域直接展示;
- 全新的 KaTeX数学公式 语法;
- 增加了支持甘特图的mermaid语法1 功能;
- 增加了 多屏幕编辑 Markdown文章功能;
- 增加了 焦点写作模式、预览模式、简洁写作模式、左右区域同步滚轮设置 等功能,功能按钮位于编辑区域与预览区域中间;
- 增加了 检查列表 功能。
功能快捷键
撤销:Ctrl/Command + Z
重做:Ctrl/Command + Y
加粗:Ctrl/Command + B
斜体:Ctrl/Command + I
标题:Ctrl/Command + Shift + H
无序列表:Ctrl/Command + Shift + U
有序列表:Ctrl/Command + Shift + O
检查列表:Ctrl/Command + Shift + C
插入代码:Ctrl/Command + Shift + K
插入链接:Ctrl/Command + Shift + L
插入图片:Ctrl/Command + Shift + G
查找:Ctrl/Command + F
替换:Ctrl/Command + G
合理的创建标题,有助于目录的生成
直接输入1次#,并按下space后,将生成1级标题。
输入2次#,并按下space后,将生成2级标题。
以此类推,我们支持6级标题。有助于使用TOC
语法后生成一个完美的目录。
如何改变文本的样式
强调文本 强调文本
加粗文本 加粗文本
标记文本
删除文本
引用文本
H2O is是液体。
210 运算结果是 1024.
插入链接与图片
链接: link.
图片:
带尺寸的图片:
居中的图片:
居中并且带尺寸的图片:
当然,我们为了让用户更加便捷,我们增加了图片拖拽功能。
如何插入一段漂亮的代码片
去博客设置页面,选择一款你喜欢的代码片高亮样式,下面展示同样高亮的 代码片
.
// An highlighted block
var foo = 'bar';
生成一个适合你的列表
- 项目
- 项目
- 项目
- 项目
- 项目1
- 项目2
- 项目3
- 计划任务
- 完成任务
创建一个表格
一个简单的表格是这么创建的:
项目 | Value |
---|---|
电脑 | $1600 |
手机 | $12 |
导管 | $1 |
设定内容居中、居左、居右
使用:---------:
居中
使用:----------
居左
使用----------:
居右
第一列 | 第二列 | 第三列 |
---|---|---|
第一列文本居中 | 第二列文本居右 | 第三列文本居左 |
SmartyPants
SmartyPants将ASCII标点字符转换为“智能”印刷标点HTML实体。例如:
TYPE | ASCII | HTML |
---|---|---|
Single backticks | 'Isn't this fun?' | ‘Isn’t this fun?’ |
Quotes | "Isn't this fun?" | “Isn’t this fun?” |
Dashes | -- is en-dash, --- is em-dash | – is en-dash, — is em-dash |
创建一个自定义列表
-
Markdown
- Text-to- HTML conversion tool Authors
- John
- Luke
如何创建一个注脚
一个具有注脚的文本。2
注释也是必不可少的
Markdown将文本转换为 HTML。
KaTeX数学公式
您可以使用渲染LaTeX数学表达式 KaTeX:
Gamma公式展示 Γ ( n ) = ( n − 1 ) ! ∀ n ∈ N \Gamma(n) = (n-1)!\quad\forall n\in\mathbb N Γ(n)=(n−1)!∀n∈N 是通过欧拉积分
Γ ( z ) = ∫ 0 ∞ t z − 1 e − t d t . \Gamma(z) = \int_0^\infty t^{z-1}e^{-t}dt\,. Γ(z)=∫0∞tz−1e−tdt.
你可以找到更多关于的信息 LaTeX 数学表达式here.
新的甘特图功能,丰富你的文章
- 关于 甘特图 语法,参考 这儿,
UML 图表
可以使用UML图表进行渲染。 Mermaid. 例如下面产生的一个序列图:
这将产生一个流程图。:
- 关于 Mermaid 语法,参考 这儿,
FLowchart流程图
我们依旧会支持flowchart的流程图:
- 关于 Flowchart流程图 语法,参考 这儿.
导出与导入
导出
如果你想尝试使用此编辑器, 你可以在此篇文章任意编辑。当你完成了一篇文章的写作, 在上方工具栏找到 文章导出 ,生成一个.md文件或者.html文件进行本地保存。
导入
如果你想加载一篇你写过的.md文件,在上方工具栏可以选择导入功能进行对应扩展名的文件导入,
继续你的创作。
--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
注脚的解释 ↩︎