- 博客(31)
- 资源 (4)
- 收藏
- 关注
RSS订阅原创 使用cookie实现首次打开时触发
// 首次点开触发 var res = document.cookie.indexOf("name"); if(res!=0){ var oDate =new Date(); document.cookie ="name=zheng;"; document.getElementById('first').style.displ...
2019-04-28 18:02:10
471
原创 下拉加载更多
$(window).scroll(function() { var oh = $('.orderBox .loading').height(); //获取开始加载的参考标签距离 var allh = $('body').height(); var w = $(window).height(); var o_scroll = al...
2019-03-06 09:27:14
1236
原创 自定义滚动条样式
.tabBox .aroundList::-webkit-scrollbar {width: 4px;height: 13px;background: #eee;} .tabBox .aroundList::-webkit-scrollbar-thumb {border-radius: 5px;-webkit-box-shadow: inset 0 0 5px #a0a0a0;background...
2019-02-19 18:12:47
190
原创 移动端 回到顶部按钮特效
html部分 <div class="gotop"></div> .gotop{position: fixed;width: 1rem;height: 1rem;z-index: 200;right: .3rem;bottom: 1.5rem;overflow: hidden;} 脚本部分 // 回到顶部 $('.gotop').click(function...
2019-02-15 13:21:16
1874
原创 选项卡切换
$(’.nav li’).click(function(){ $(this).addClass(‘curr’).siblings().removeClass(‘curr’); var i = $(this).index(); $(’.filter .container’).eq(i).addClass(‘show’).siblings().removeClass(‘show’); }); ...
2019-01-22 09:48:02
208
原创 移动端回到顶部 根据距离显示
var h2_height = $(".searchbox").offset().top;//获取一个元素距离顶部距离 $(window).scroll(function(){ var this_scrollTop = $(this).scrollTop(); if(this_scrollTop>h2_height ){ $(".gotop").show(); }else{ $(".goto...
2019-01-22 09:47:15
670
原创 div限制文本超出部分...代替
单行： overflow: hidden; text-overflow: ellipsis; white-space: nowrap; 2行： display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
2019-01-22 09:43:04
567
原创 js实现选项卡效果
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> *{ margin:
2018-11-22 22:48:58
226
原创 jQuery实现导航栏的样式切换
样式： ul{ margin: 0 auto; height: 50px; background-color: #369; } ul&gt;li{ text-decoration: none; display: inline-block; height: 50px; line-height: 50px; color: #fff; padding: 0 15px; border...
2018-11-22 21:59:13
1815
原创 call,apply,bind方法区别
相同点：功能都是改变this定向，为了对对象进行方法扩展的。 bind() 不能即时调用，需要一个新方法调用 //方法一 var fun = opj.bind(); fun(); //方法二 opj.bind(‘click’,function(){ …… }); call() 和 apply() 方法作用一样 使对象的方法进行扩展！ 他们的参数不一样！ call(opje...
2018-10-23 16:51:12
134
原创 JQuery ajax实现
//登录 $('#btnlogin').bind('click',function () { $phone = $('#txtPhone').val(); $password = $('#txtPassword').val(); console.log($phone); console.log($password); ...
2018-10-23 11:43:15
240
1
原创 移动端闪屏 设置
样式部分 h5动画 向左移出100% ，用时0.8s @keyframes slideOutLeft { from{ transform: translateX(0); } to{ transform: translateX(-100%); } } .slideOutLeft { animation: slideOutLef...
2018-10-23 11:17:54
680
原创 响应式布局
响应式布局：（media queries）媒体查询 相当于一套html配多套css样式 @media screen and (min-width: 1080px) {…} @media screen and (max-width: 1080px) and (min-width: 750px) {…} @media screen and (max-width: 750px) {…} ...
2018-10-22 15:47:48
154
原创 php文件下载的实现方式
一、直接下载 超链接下载，文件类型为可执行文件exe或者压缩文件zip 可以通过超链接直接连接文件地址下载 <a href="res/a.zip">直接下载</a> 二、文件读取的方式 在文件类型、大小未知的情况下 读取文件内容，响应 //传参数 <a href="download.php?name=<?php echo $value['name'] ?&g...
2018-10-22 14:41:07
1101
原创 angular参数传递的几种方式
1.查询字符串的方式 链接 &lt;div *ngFor="let list of item.Books" [routerLink]="['/detail',{bookId:list.Book.Id}]"&gt; &lt;/div&gt; 接受参数代码 this.bookId = this.activedrouted.snapshot.params['book
2018-10-15 21:24:38
8025
1
原创 移动端网页布局前提
在head中加入： <meta name="viewport" content="width=device-width, initial-scale=1.0">
2018-10-09 08:49:07
151
原创 javascript面向对象——创建对象的几种方式
1.字面值 var person = { name:'jack', age:20 }; 1.通过new关键词 var persons = new Object(); persons.firstname = 'john'; persons.lastname = 'Doe'; persons.age = 50 ; 3.create来创建，通常该方法用来创建继承对...
2018-09-12 20:13:47
909
原创 Jquery文件上传-代码实现
//前台预览代码 html代码部分 &lt;label&gt;头像:&lt;/label&gt; &lt;img src="images/timg.jpg" alt="" id="headerImg"&gt; &lt;input type="fi
2018-09-10 10:54:15
944
原创 jQuery -分页代码整理
js代码部分： let pageSize = 12; let pageIndex = 0; //创建页码 function builDatapage(list) { //获得总页数 let total = Math.ceil(list.length / pageSize); console.log(total); for(let i =0...
2018-09-10 10:48:28
2309
原创 call,apply,bind方法区别
相同点：功能都是改变this定向，为了对对象进行方法扩展的。 bind() 不能即时调用，需要一个新方法调用 //方法一 var fun = opj.bind(); fun(); //方法二 opj.bind(‘click’,function(){ …… }); call() 和 apply() 方法作用一样 使对象的方法进行扩展！ 他们的参数不一样！ call(opje...
2018-09-05 21:06:48
307
原创 div布局——网页中元素不可见的方法有哪些，各有什么不同！
display 不占空间 产生回流重回影响新能 无法点击 记忆：直接杀掉，连块墓地都不给人家，殃及子孙后代，围观群众哗然 visibility 占据空间 无法点击没有重回回流问题 性能好 记忆：杀掉本尊一个，不殃及子孙，围观群众淡然 height 不占空间 不能点击 scale 缩放至0 opacity 占空间 可以点击 透明 removeChild 摘除do...
2018-08-30 15:33:27
471
原创 div布局系列——图片轮播使用position定位后父元素没法撑开解决方法
<div class="ad"> <img src="images/banner-01.jpg"> <img src="images/banner-02.jpg"> <img src="images/banner-03.jpg"> <img src="images
2018-08-22 17:29:26
1201
原创 原生js——点击获取当前索引的方法
html代码部分 <button>A-1</button> <button>B-2</button> <button>C-3</button> <button>D-4</button> <button>E-5</button>
2018-08-21 20:58:39
6828
原创 div布局系列——一个div水平垂直居中的方法
HTML代码部分 &lt;div id="Dalog"&gt;&lt;div&gt;&lt;/div&gt;&lt;/div&gt; 方案一：使用定位 #Dalog{ width: 800px; height: 600px; border: 1px solid #ccc;
2018-08-20 14:46:09
222
原创 div布局系列 - 两端对齐的方法
方式一：box-sizing:border-box html代码部分 <div class="content clear-fix"> <div></div> <div></div> <div></div> <d
2018-08-19 22:03:17
6182
原创 FormData()方法 ——将数据以Key=value 的方式通过XMLHttpRequest对象发送给服务器
FormData()方法 ——将数据以Key=value 的方式通过XMLHttpRequest对象发送给服务器 注： 一、无form标签时: var 对象名 = new FormData(); 对象名.append(‘key’,value); 二、有form标签时： var 对象名= new FormData(表单对象); 元素的name自动转换为key； html代码 <...
2018-08-19 20:37:22
1610
原创 表单验证的两种方法-(原生JS和Html5)
原生JS的表单验证 html部分 &lt;form&gt; &lt;div&gt; &lt;label&gt;用户名：&lt;/label&gt;&lt;input type="text" id="txtUsername"&gt; &lt;di
2018-08-18 23:46:37
8887
原创 输入5个数，输出其中最大和最小的数.
//输入5个数存入数组中 var arr=[]; for(var i=0;i<5;i++){ arr[i]=parseInt(prompt('请输入第'+(i+1)+'个数')); } //比大小 var min=arr[0]; var max=arr[0]; for(var i=0;i<arr.length;i++){ if(min>arr[i]){ ...
2018-07-30 21:23:35
8870
原创 [数组练习]输入5个数，计算5个数的平均数.
//输入5个数存入数组中 var arr=[]; for(i=0;i<5;i++){ arr[i]=parseInt(prompt('请输入第'+(i+1)+'个数')); } //求数组中数的和 var sum; for(i=0;i<arr.length;i++){ sum=sum+arr[i]; } //输出 console.log('五个数的和为：'+sum); consol...
2018-07-30 21:15:52
8350
原创 javascript中判断输入的数是不是质数
javascript中判断输入的数是不是质数 思路：质数只能被1和本身整除的数叫质素；也就是说不能再有被他小的数整除 负数、0、1即不是质数也不是合数； 2是最小的质数； &lt;script type="text/javascript"&gt; var i=prompt('请输入一个数：'); //第一种情况 if(i&lt;=...
2018-07-29 23:06:47
833
jquery.bigImage.js
2019-05-10
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人