背着吉他的蝙蝠女侠-CSDN博客

原创 php之读取文件的函数

demo代码如下：<?php // 下面这行代码是为了避免乱码 header('content-type:text/html;charset=utf-8'); // 读取文件的函数 echo file_get_contents("demo.text");?>

2018-01-13 16:39:26 695

原创 javascript之ajax请求数据demo

demo代码如下：html的demo代码如下： Document * { margin: 0; padding: 0; } .imgbox { width: 256px; height: 170px; border: 1px solid #000; margin: 20px auto; } .imgbox img {

2018-01-13 16:23:41 909

原创 ajax之post请求

html代码如下： post请求 var btn = document.getElementById("btn"); btn.onclick = function(){ var ajaxObj = new XMLHttpRequest(); ajaxObj.open("post","first.php"); // 如果使

2018-01-07 21:37:41 381

原创 ajax之使用get方式向服务器发送请求

html代码如下： Document var username = document.getElementById("username"); var address = document.getElementById("address"); var btn = document.getElementById("btn"); c

2018-01-06 22:27:22 879

原创 php之文件的上传

html代码如下：注意：enctype="multipart/form-data"，如果要上传文件，必须给form表单加上前面那句话文件上传 php代码如下：注意：move_uploaded_file是将文件从一个路径移动到另一个路径，第一个参数是原来的路径，第二个参数是后来的路径文件上传 <?php // 让php代码延迟

2018-01-04 23:35:07 212

原创 php之模拟用户数据

html部分的代码如下： Document --> --> php部分的代码如下：模拟用户数据 <?php $array = array( 'jack' => array('name' => 'jack','age' => 20,'skill' => '帅'), 'rose' => array('name

2018-01-04 22:50:19 235

原创 php表单验证

html表单验证的代码如下：注意：用户向服务器发送请求的方式有两种：post和get，两者的区别是get发送的时候，携带的数据是连接在url后面，而post发送比较隐蔽的。在php中，获取发送来的数据，get的话使用的是$_GET["key"];post的话使用的是$_POST["key"]。 php * { margin: 0; padding: 0;

2018-01-04 20:37:10 469

原创 php基本语法之定义变量、输出内容、循环、数组、二维数组

demo代码如下： Document 结束 --> <?php // echo和print是用来输出内容的 echo "我是输出内容";//输出字符串 echo "这是一个a链接";//输出标签 echo ""; // $是用来定义变量的 $x = 5; $y = 6; $z = $x + $y; echo $z; echo "";

2018-01-03 21:56:15 968

原创 javascript之模态框

demo代码如下： motaikuang * { margin: 0; padding: 0; } html,body { height: 100%; width: 100%; } .box { width: 100%; height: 100%; background: rgba(0,0,0,0.4); pos

2018-01-03 21:13:14 197

原创三大家族的区别

clientWidth与clientHeight是指盒子的宽度和内边距。clientLeft表示的是盒子的边框。clientX表示的可视区域距离左边的距离。offsetWidth表示的是盒子宽度和内边距和边框，scrollWidth表示的是内容的宽度，不包含边框。

2018-01-02 21:49:37 223

原创 javascript之模拟滚动条

demo代码如下： * { margin: 0; padding: 0; } .box { width: 300px; height: 500px; border: 1px solid red;

2018-01-02 21:28:10 249

原创 javascript之拖拽

demo代码如下： * { margin: 0; padding: 0; } .nav { height: 30px; background: #036663; border-bottom:

2018-01-02 21:23:59 188

原创 javascript之放大镜

demo代码如下： * { margin: 0; padding: 0; } .box { width: 350px; height: 350px; margin:100px;

2018-01-02 21:22:09 260

原创 javascript之获取鼠标在盒子中的位置

demo代码如下：鼠标在盒子中的坐标 * { margin: 0; padding: 0; } div { width: 400px; height: 400px; font-size: 20px; margin: 100px auto; border: 1px solid #000; } 鼠标在盒子中的

2018-01-01 18:53:18 624

原创 javascript动画之跟随运动

demo代码如下：跟随运动 * { margin: 0; padding: 0; } body { height: 3000px; } div { width: 100px; height: 100px; background: red; border: 1px solid #000; position: ab

2018-01-01 18:23:25 268

原创 javascrip动画之楼层跳跃

demo代码如下：楼层跳跃 * { margin: 0; padding: 0; list-style: none; } html,body,.lc,#content { width: 100%; height: 100%; } #content li { width: 100%; height: 100%;

2017-12-27 23:37:49 311

原创 javascript之缓慢滚动到顶部

demo代码如下：回到顶部 * { margin: 0; padding: 0; } .container { width: 100%; margin: 0 auto; } .top { width: 100%; height: 200px; background: red; } .content {

2017-12-26 23:13:48 343

原创 javascript之固定导航栏

demo代码如下： Document * { margin: 0; padding: 0; } .container { width: 60%; margin: 0 auto; text-align: center; font-size: 30px; position: relative; } .top { wi

2017-12-26 17:47:20 251

原创 javascript动画之缓动动画

demo代码如下： Document * { margin: 0; padding: 0; } div { width: 100px; height: 100px; background: yellow; border: 1px solid #000; margin-top: 20px; position: relati

2017-12-26 16:07:13 231

原创 javascript动画之焦点图

Document * { margin: 0; padding: 0; list-style: none; } .box { width: 450px; height: 300px; margin: 50px auto; position: relative; } .pic { width: 450px; height:

2017-12-23 23:25:31 234

原创 javascript动画之匀速运动

demo代码如下： Document * { margin: 0; } div { width: 100px; height: 100px; background: red; margin-top: 20px; position: relative; left: 0; } 运动到200 运动到400 1 2

2017-12-23 15:35:57 238

原创 javascript之动画

javascript动画之闪动动画： demo代码： Document div { width: 100px; height: 100px; background: red; margin-top: 20px; position: relative; } 按钮 var btn = document.getElements

2017-12-23 11:32:03 155

原创 javascript之style.left和offsetLeft的区别

offsetLeft取到的值是数值型的，只能取值，不能赋值。style.left在取值的时候要事先定义好，否则取到的值为空值，不仅仅可以取值，而且还可以赋值，取到的值为字符串类型的。 demo代码如下： Document * { margin: 0; padding: 0; } .box { width: 600px; height: 6

2017-12-23 10:52:46 680

原创 javascript三大家族之offset

offsetWidth=Width+padding+border+margin;offsetTop是指距离定位盒子顶部的距离；offsetLeft是指距离定位盒子左边的距离。以上得到的都是数值类型的数据，demo代码如下： Document * { margin: 0; padding: 0; } .box { width: 600px;

2017-12-22 22:43:23 242

原创 jQueryUI互动效果之resizable

demo代码如下： Document div { width: 300px; height: 300px; border: 1px solid #000; } $("div").resizable();

2017-12-19 22:29:19 333

原创 jqueryUI的互动效果之droppable和draggable

demo代码如下： Document .box1 { width: 50px; height: 50px; border: 4px solid red; } .box2 { height: 400px; width: 400px; border: 4px solid blue; }

2017-12-19 22:17:53 323

原创 jqueryUI互动效果之selectable

demo代码如下： Document * { margin: 0; padding: 0; font-size: 20px; list-style: none; } body { padding-left: 40px; } .ui-selected { background: red; }

2017-12-19 19:56:55 389

原创 jqueryUI的下载以及引用

1.下载。首先是进入https://jqueryui.com/ 网址，然后点击download即可进行下载。也可进入theme即主题，进行选择自己喜欢的主题，进行下载。2.下载完成之后引用，代码如下：注意：使用jqueryUI的话，首先要引入jquery文件。因为jQueryUI是以jquery为基础的javascript网页用户界面的开源库。 Document

2017-12-18 20:22:41 3146

原创 jquery动画之tab切换

demo代码如下： Document * { margin: 0; padding: 0; } div { width: 400px; height: 326px; margin: 100px auto; } ul { list-style: none; } .top { width: 400px;

2017-12-16 18:03:17 398

原创 jquery实现来回翻转效果

demo代码如下：注意：是通过判断是否存在某种ID值，然后添加id实现的。 Document .box { width: 200px; height: 200px; position: relative; } .box1,.box2 { width: 200px; height: 200px; position: ab

2017-12-16 16:02:19 2091

原创 css3动画之翻转

demo代码如下：注意：这个是放上去可以发生一次翻转，离开就翻转回去，下面有jq实现的翻转效果，可以来回翻转的，每点击一次就会翻转到反方向。 Document div { width: 200px; height: 200px; position: relative; } div::before,div::after { content:

2017-12-16 16:00:23 265

原创 javascript浏览器对象之计时器

记时方法：方法一：seInterval()间隔指定的毫秒数不停地执行指定代码clearInterval()方法用于停止setInterval()方法执行的函数代码方法二：setTimeout()暂停指定的毫秒数后执行指定的代码clearTimeout()方法用于停止执行setTimeout()方法的函数代码

2017-12-10 20:17:30 273

原创 javascript浏览器对象之history对象

history对象：window.history对象包含浏览器的历史（URL）的集合history方法：history.back()表示与浏览器点击后退按钮相同；history.forward()与在浏览器中点击按钮向前相同；history.go()表示进入历史中的某个页面demo代码如下： Document 按钮1 按钮2 var btn1 = docu

2017-12-09 16:16:31 213

原创 javascript浏览器对象之screen对象

1. screen对象：window.screen对象包含有关用户屏幕的信息。2.属性： screen.availWidth表示可用屏幕的宽度；screen.availHeight表示可用屏幕的高度；screen.Height表示的是屏幕高度；screen.Width表示屏幕宽度demo代码如下： Document 按钮1 按钮2 console.l

2017-12-09 15:50:15 416

原创 javascript浏览器对象之location对象

1. location对象：window.location对象用于获取当前页面的地址（URL），并把浏览器重定向到新的页面。2. location对象的属性：location.hostname返回web主机的域名location.pathname返回当前页面的路径和文件名location.port返回web主机的端口location.protocol返回所使用的web协议（http

2017-12-09 15:24:40 371

原创 javascript的浏览器对象之window对象

window对象：是BOM的核心，window对象指当前的浏览器窗口，所有JavaScript全局对象、函数以及变量均自动成为window对象的成员。全局变量是window对象的属性；全局函数是window对象的方法。document也是window对象之一。 demo代码如下： Document 按钮1 按钮2 var btn1 = document.getEl

2017-12-09 15:03:48 465

原创 DOM对象控制HTML

demo代码如下： Document body { height: 1000px; } world1 hello1 hello2 world2 var a = document.getElementsByName("pn")[0];//通过name值获取元素 var c = document.getElementsByName("pn")

2017-12-06 23:24:09 134

原创 JavaScript的内置对象

Math对象：demo代码如下： Document var a = Math.round(2.55);//四舍五入 var b = Math.min(21,3,1);//最小值 var c = Math.max(32,431,1);//最大值 var d = Math.abs(-32);//绝对值 var e = Math.random();//随机数

2017-12-05 23:41:14 169

原创 javascript之对象

对象：javascript中所有的事物都是对象：字符串、数值、数组、函数……每个对象带有属性和方法。javascript是允许自定义对象的。创建对象：方法一： Document var joe = new Object(); joe.name = "joe"; joe.age = 30; document.write(joe.name,joe.ag

2017-12-05 15:37:32 117

原创 javascript之事件对象

事件对象：在触发DOM对象的时候会产生一个对象。事件对象event：type表示的是事件的类型；target表示的是获取事件目标；stopPropagation()表示的是阻止事件的冒泡；preventDefault()表示的是阻止事件的默认行为。 Document 点击点击试试 var btn = document.getElementById("

2017-12-04 23:47:08 138

空空如也

空空如也