练手小案例
lucky芬
聚沙成塔,水滴石穿,努力到了自然会有期待的结果,做一个持之以恒的程序媛~(美丽与智慧并存,我的理想,嘻嘻)
展开
-
javascript实现登录验证码
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head> <body onload="createCode();&转载 2018-02-23 14:42:12 · 4421 阅读 · 1 评论 -
vue.js带日期星期数字时钟代码
vue.js带日期星期数字时钟代码html, body { height: 100%;}body { background: #0f3854; background: -webkit-radial-gradient(center ellipse, #0a2e38 0%, #000000 70%); background: radial-gradient(ellipse a转载 2017-12-04 14:34:12 · 3045 阅读 · 0 评论 -
方向感知鼠标悬停效果动画
方向感知鼠标悬停效果动画 @charset "utf-8"; /* CSS Document */ html{ font-family:arial; color:#aaa; } body{转载 2017-11-22 17:03:16 · 636 阅读 · 0 评论 -
Ajax1 - 请求纯文本
关于js中的ajax的使用总结,代码需要再服务器端运行~ Ajax 1 - 请求纯文本 请求纯文本 document.getElementById('button').addEventListener("click",loadText); function loadText(){ // console.log("Hello World!原创 2017-12-01 15:49:47 · 580 阅读 · 0 评论 -
Aja5 - 请求PHP数据
Ajax 5 - 请求PHP数据 请求所有用户 所有用户 document.getElementById('button2').addEventListener('click',loadUsers); function loadUsers(){ var xhr = new XMLHttpRequest(); xhr.open("GET","users.p原创 2017-12-01 16:31:10 · 228 阅读 · 0 评论 -
Ajax4 - 请求PHP接口
process.php<?php # echo "Hello World!"; if (isset($_GET['name'])) { echo "GET: 你的名字是". $_GET['name']; } # 连接数据库 $conn = mysqli_connect("localhost","root",'','ajaxtest'); if (isset($_PO原创 2017-12-01 16:26:42 · 482 阅读 · 0 评论 -
Ajax3 - 请求Github接口
Ajax3-请求Github接口 .user{ display: flex; background: #f4f4f4; padding: 10px; margin-bottom: 10px; } .user ul{ list-style: none; } 请求Github接口 所有Github的用户信息 docu原创 2017-12-01 16:19:22 · 725 阅读 · 0 评论 -
Ajax2 - 请求JSON数据
Ajax 2 - 请求JSON数据 请求单个用户 请求所有用户 单个用户 所有用户 document.getElementById('button1').addEventListener('click',loadUser); document.getElementById('button2').addEventListener('click',loadUsers原创 2017-12-01 16:13:08 · 497 阅读 · 0 评论 -
jQuery手机触摸滑动切换图片代码
flickity-docs.csshtml { font-family: sans-serif; /* 1 */ -ms-text-size-adjust: 100%; /* 2 */ -webkit-text-size-adjust: 100%; /* 2 */}a { background-color: transparent;}a:active,a:hove转载 2017-11-22 14:31:27 · 2807 阅读 · 0 评论 -
jquery图片无缝滚动代码左右上下无缝滚动图片
jquery图片无缝滚动代码左右上下无缝滚动图片*{margin:0;padding:0;list-style-type:none;}a,img{border:0;}body{font:12px/180% Arial, Helvetica, sans-serif, "新宋体";}/* scrollleft */.scrollleft{width:680px;padding:5px 2转载 2017-11-24 11:27:46 · 2734 阅读 · 0 评论 -
Vue写一个标签切换特效
vue标签切换 .tab{ width: 360px; height: 260px; border:1px solid #000; margin:100px auto; } .tab .hd{overflow: hidden;}转载 2017-11-24 15:04:01 · 1323 阅读 · 0 评论 -
比较全的jQuery网页验证码插件
htmljQuery网页验证码插件数字字母验证码确定算数验证码确定滑动验证码拼图验证码点选验证码 $('#mpanel2').codeVerify({ type : 1, width : '200px', height : '50px', fontSize : '30px', codeLength : 6,转载 2017-12-13 15:37:43 · 4039 阅读 · 0 评论 -
jQuery仿微博向下滚动效果
jQuery仿微博向下滚动效果 *{margin:0;padding:0;} .title{text-align: center;} #content{ width:600px; height:363px; margin:30px auto 10px auto; position:relative; border:1px转载 2018-01-04 17:15:44 · 339 阅读 · 0 评论 -
jQuery+Ajax+PHP无刷新分页
代码需要在后台运行(包括页面index.html,ajax.php,connect.php,还有数据库food.sql)index.html jQuery+Ajax+PHP无刷新分页 *{margin:0;padding:0;} .container{width: 100%;} .title转载 2018-01-04 15:14:16 · 1011 阅读 · 0 评论 -
jQuery手机端仿美团酒店预订日期选择插件
jQuery手机端仿美团酒店预订日期选择插件 .Date_lr{width:50%;text-align:center;} .span21{ position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%,-50%); transform: translate(-50%,-50%);转载 2018-01-03 11:24:04 · 4252 阅读 · 2 评论 -
很好看的css3 Loading
css3 loading *{ margin: 0px; padding: 0px; border:0px; } html,body{ min-height: 100%; } body{ background: radial-gradient(#eee,#444);转载 2017-12-19 13:43:54 · 455 阅读 · 0 评论 -
全国城市三级联动
全国各省市js三级联动body{ background:#EEEEEE;margin:0; padding:0; font-family:"微软雅黑", Arial, Helvetica, sans-serif; }a{ color:#006600; text-decoration:none;}a:hover{color:#990000;}.top{ margin:5px aut转载 2017-12-07 10:11:05 · 1502 阅读 · 1 评论 -
多种CSS3动画效果星级评分特效
多种CSS3动画效果星级评分特效 基本样式: Basic star rating: 5 stars 4 stars 3 stars 2 stars 1 star 向上滚动:slot Basic star rating转载 2017-12-15 11:10:32 · 1171 阅读 · 0 评论 -
简单的图片数字时钟js代码
img{ width: 25px; height: 25px;}时钟function getImg(val) { var len=val.length; var images=""; for (var i = 0; i < len; i++) { var num=val.substr(i,1); switch(num){ case '0' : image转载 2017-11-27 14:12:18 · 5467 阅读 · 0 评论 -
纯js轮播
> 1 2 3 4 5 6 7 css.css*{ padding:0px; margin:0px;}.wrap{ position: relative; width: 500px; height:原创 2017-11-30 15:25:24 · 165 阅读 · 0 评论 -
CSS3霓虹灯文字特效
CSS3霓虹灯文字特效 .text-effect { overflow: hidden; position: relative; -webkit-filter: contrast(110%) brightness(190%); filter: contrast(110%) b转载 2017-11-22 14:16:10 · 3106 阅读 · 0 评论 -
按钮动画
按钮动画 *{ margin:0; padding:0; box-sizing: border-box; font-family: sans-serif; } body{ background: #fcfcfc;转载 2017-11-22 13:42:55 · 217 阅读 · 0 评论 -
canvas 绘制五角星
分析:五角星有十个定点,五个外顶点,五个内顶点,可以看成顶点分别在两个圆上,其中假设外顶点所在圆的半径为R,内顶点所在圆的半径为r,画图分析可以知道每个顶点在坐标中的位置,其中方法drawStar(cxt,r,R,x,y)五个参数分别表示画布、小圆半径、大圆半径、五角星x轴偏移量、y轴偏移量。绘制五角星window.onload=function()原创 2016-12-18 17:56:48 · 4883 阅读 · 0 评论 -
微信,QQ分享插件
微信,QQ分享插件 分享到 微信好友 QQ好友 QQ空间 腾讯微博 新浪微博 人人网 //全局变量,动态的文章IDvar ShareURL = "";//绑定所有分享按钮所在A标签的鼠标移入事转载 2017-10-19 17:23:49 · 3601 阅读 · 1 评论 -
jQuery实现弹幕效果
弹幕 html,body{ background:#efefef; height:100%; } .danmu{ width: 100px; height:30px; line-height: 28px; background: green;原创 2016-12-17 16:59:10 · 716 阅读 · 0 评论 -
canvas仿知乎登录页面动画
效果图:html页面: 仿知乎登录页面动画 html{height: 100%;} body{margin: 0;height: 100%;background: #f7fafc} canvas{display: block;width: 100%;height: 100%;} main.js页面:class Circle{转载 2017-06-07 18:08:25 · 2695 阅读 · 0 评论 -
VUE做的价格计算器.html
价格计算器 /* 隐藏未编译的数据绑定,直到Vue实例成功加载 */ [v-cloak]{ display: none; } *{ padding: 0; margin: 0; } body{ font: 15px/1.3 "微软雅黑"; color: #545b64; text-align: center; } a, a:visited转载 2017-09-08 16:15:28 · 1762 阅读 · 0 评论 -
js实现简单计算器(样式酷炫)
js实现简单计算器 js实现简单计算器 不要进行除0操作 C 0 7 8 9 + 4 5 6 - 1 2 3 * 0 . = / Reset Universe? style.css转载 2017-09-07 14:02:03 · 1864 阅读 · 0 评论 -
实用于移动网页jquery手势解锁密码特效
实用于移动网页jquery手势解锁密码特效 haorooms-实用于移动网页jquery手势解锁密码特效正确的密码是一个字母“Z”的形状哦!$(function(){ $("#gesturepwd").GesturePasswd({ backgroundColor:"#252736", //背景色 color:"#FFFFFF", /转载 2017-09-07 13:56:10 · 830 阅读 · 0 评论 -
jQuery文字逐行向上滚动代码
jQuery文字逐行向上滚动代码*{ margin:0px; padding:0px; font-family:'微软雅黑'; -webkit-tap-highlight-color:rgba(0,0,0,0); }li{ list-style:none }img{ border:none}a{text-decoration:none;} /* -----------------原创 2017-08-15 11:21:48 · 3280 阅读 · 1 评论 -
js案例之放大镜
Document body,div,img{ margin:0; padding:0; } img{ display:block; border:none; } #box{ position转载 2017-07-25 09:46:00 · 310 阅读 · 0 评论 -
回顶部特效
类似淘宝等网站的回顶部按钮,当页面内容滚动距离页面顶部300的时候,出现平滑回顶部按钮。Document.top{width: 50px;height: 50px;display: block;background: #888;color: #fff;text-align: center;line-height: 50px;fon原创 2016-12-19 20:50:33 · 409 阅读 · 0 评论 -
饿了么LBS移动地图点餐系统代码
饿了么LBS移动地图点餐系统代码 *{margin:0px; padding:0px;} body{background:url("images/bg.jpg");position:absolute; width:100%;height:100%;} #Main{width:1000px;height:600px;margin:80px auto 0px; position:re转载 2017-10-19 17:59:46 · 1218 阅读 · 0 评论 -
js旋转木马特效
demo.html旋转木马<div class="J_Poster poster-main" data-setting='{ "width":1000, "height":270, "posterWidth":640, "posterHeight":270, "scale":0.8,转载 2017-11-16 17:06:37 · 788 阅读 · 0 评论 -
漫天的雪花飘~~
*{ margin:0; padding:0;}body{ background-color: #000; overflow: hidden;}/*分析1.雪片产生的时候,距离浏览器的左边(left)是随机的2.每个雪片下降的速度是随机的3.雪片的大小4.雪片下落之后,距离浏览器的左边是随机的5.雪片透明度*/var minSize = 5;原创 2017-11-30 17:10:12 · 533 阅读 · 0 评论 -
jQuery随机抽中手机号码抽奖代码
jQuery随机抽中手机号码抽奖代码 *{ padding: 0;margin:0; } html,body{ width: 100%; height: 100%; background: -webkit-radial-gradient(#f50原创 2017-12-08 17:19:08 · 6721 阅读 · 1 评论 -
会飞的小鸟
网上下载的小鸟gif图不太好看~~重在思路~ 会飞的小鸟 body{overflow: hidden;}#dbird{ position: absolute;}.dir_37{ transform:rotateY(0deg);}.dir_38{ transform:rotate(60deg);}.dir_原创 2017-11-30 15:23:19 · 773 阅读 · 0 评论 -
滑动的导航条
jquery练习例子: 滑动导航条 Web Design jQuery Html5 & Css3 PHP Photoshop Illustrator转载 2017-11-15 18:02:04 · 321 阅读 · 0 评论 -
jQuery表格常用操作方法-增加,查询,删除,排序,移动,全选
index.js/** 1.通过表单,可以添加数据到表格中显示* 2.id自动根据已有的最大id值进行累加,删除一条记录的时候* 3.隔行变色,新增加的行应该也需要隔行变色的* 4.鼠标移入高亮* 5.全选/全不选(checkAll和下面的每一个checkbox是有关联的)* 6.选中变色* 7.上移/下移* 8.删除** 9.选做:排序* */var data =转载 2017-11-17 17:47:22 · 577 阅读 · 0 评论 -
带跳转的jQuery滑动分页插件
Document 带跳转的jquery滑动分页插件 * { margin: 0; padding: 0; list-style: none; font-family: 'Microsoft YaHei','Lantinghei SC','Open Sans',Arial,'Hiragino Sans GB','STHeiti','WenQ转载 2017-11-17 13:49:51 · 1148 阅读 · 0 评论