![](https://img-blog.csdnimg.cn/20201014180756738.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
前端
甘乐2333
这个作者很懒,什么都没留下…
展开
-
JS node通信
// 获取http模块var http=require("http");// 获取queryString模块var queryString=require("querystring");// 使用http中createServer创建服务,并且返回这个服务对象var server=http.createServer(function(req,res){ // req是指请求数据...原创 2019-06-21 12:02:34 · 157 阅读 · 0 评论 -
JS 弹跳球2.0
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><style type="text/css"> body { overflow...原创 2019-06-10 21:50:04 · 351 阅读 · 1 评论 -
JS 弹跳球体
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body> <script> class Ball{// ...原创 2019-06-10 20:24:41 · 637 阅读 · 0 评论 -
JS div键盘控制移动
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> div { width: 50px; ...原创 2019-06-04 11:40:21 · 182 阅读 · 0 评论 -
JS input输入节流
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> input { color: #999999; ...原创 2019-06-04 11:37:48 · 2166 阅读 · 0 评论 -
JS 窗口图片滑动
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> div { width: 557px; ...原创 2019-06-04 11:33:28 · 366 阅读 · 0 评论 -
JS 拖拽
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> div { width: 50px; ...原创 2019-06-03 23:26:06 · 128 阅读 · 0 评论 -
JS Promise实现红绿灯显示
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-...原创 2019-06-19 19:25:29 · 775 阅读 · 0 评论 -
JS 图片局部放大
前提:感谢松妹,感谢松妹,感谢松妹<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> .small { wi...转载 2019-06-03 21:41:56 · 1433 阅读 · 0 评论 -
JS 三级目录
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body> <script> var list=[ ...原创 2019-06-03 19:35:41 · 957 阅读 · 1 评论 -
JS input中鼠标选中英文转大写
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><input type="text" name="user" id="user"/...原创 2019-06-03 17:52:55 · 238 阅读 · 0 评论 -
JS 判断输入数字是否为1-31之间的数
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> .redFont { color: red; ...原创 2019-06-09 14:10:26 · 1941 阅读 · 0 评论 -
JS 实现点击div换颜色
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> #div0{ width: 100px; ...转载 2019-05-29 22:18:16 · 4303 阅读 · 0 评论 -
JS 三种轮播图
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> * { margin: 0; }...原创 2019-06-01 21:52:19 · 305 阅读 · 0 评论 -
JS 可切换图片的商品放大镜
//Utils.jsvar Utils=(function () { return { //SSS loadImg:function (srcList,callBack) { var img=new Image(); img.num=0; img.imgList=[]; ...原创 2019-06-13 11:48:21 · 447 阅读 · 0 评论 -
JS 数组遍历
1、foreach变量概念 var arr=[1,3,5,7,9]; //数组的元素,当前下标,数组自身 arr.forEach(function (item,index,arr) { console.log(item,index,arr); })2、foreach求和 var arr=[1,3,5,7...原创 2019-05-28 20:24:07 · 2279 阅读 · 0 评论 -
JS无缝轮播图
//Utils.js//封装 预加载图片var Utils=(function () { return { //SSS loadImg:function (srcList,callBack) {//图片地址 回调函数 var img=new Image(); img.num=0;//初始化num为0 ...原创 2019-06-11 19:38:27 · 543 阅读 · 0 评论 -
JS 懒加载 瀑布流
//Util1.jsvar Utils=(function () { return { //SSS loadImg:function (srcList,callBack) { var img=new Image(); img.num=0; img.imgList=[]; ...原创 2019-06-11 20:42:38 · 508 阅读 · 0 评论 -
JS 商品放大镜
//Utils1.jsvar Utils=(function () { return { //SSS loadImg:function (srcList,callBack) { var img=new Image(); img.num=0; img.imgList=[]; ...原创 2019-06-11 21:24:53 · 224 阅读 · 0 评论 -
文本省略
p{ overflow:hidden; text-overflow:ellipsis; display:-webkit-box; //将对象作为弹性伸缩盒子模型显示。 -webkit-box-orient:vertical; //从上到下垂直排列子元素(设置伸缩盒子的子元素排列方式) -webkit-line-clamp:2; //这个属性不是css的规范属性,需要组合上...原创 2019-08-05 10:00:08 · 175 阅读 · 0 评论 -
封装 $on $emit $off
const eventList = {}const $on = (eventName,callback)=>{ if(!eventList[eventName]){ eventList[eventName] = []; } eventList[eventName].push(callback)}const $emit = (eventNam...原创 2019-07-26 15:44:41 · 139 阅读 · 0 评论 -
JS实现拖拽 不出浏览器 距边50px吸附
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>拖拽</title> <style> html,body{ margin: 0; pa...原创 2019-08-03 16:57:36 · 461 阅读 · 1 评论 -
寄生式组合继承
function Box(_f){ this.f=_f; } // 这样直接将原型指向一个对象,会将原有的constructor覆盖 Box.prototype={ a:1, b:function(){ this.a++; ...原创 2019-07-02 19:46:16 · 161 阅读 · 0 评论 -
JQuery 五星评价
//星级图片为雪碧图,上为满星,下为空星,每个星高14px<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"&g...原创 2019-06-25 23:34:40 · 147 阅读 · 0 评论 -
JS 全选选择
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body> <input type="checkbox" name="hobby" i...原创 2019-05-28 19:48:30 · 210 阅读 · 0 评论 -
JS 实现随机点名
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> div{ width: 100%; hei...原创 2019-05-28 19:38:13 · 510 阅读 · 0 评论 -
Day4:文本溢出
学习目标一、容器溢出相关的属性1、页面重构2、文本溢出相关的属性1、溢出属性(容器的) 说明: overflow:visible/hidden(隐藏)/scroll/auto(自动)/inherit; visible:默认值,溢出内容会显示在元素之外; hidden:溢出内容隐藏; scroll:滚动,溢出内容以滚动方式显示; auto:如果有溢出会添加滚动条...原创 2019-04-29 09:16:48 · 116 阅读 · 0 评论 -
CSS Sprites的原理(图片整合技术)(CSS精灵)/雪碧图
一、将导航背景图片,按钮背景图片等有规则的合并成一张背景图,即将多张图片合为一张整图,然后用background-position”来实现背景图片的定位技术。二、图片整合的优势:1)通过图片整合来减少对服务器的请求次数,从而提高 页面的加载速度。2)通过整合图片来减小图片的体积。三、图片整合原则1)边切图边整合。2)定位时避免使用bottom,right等,用具...原创 2019-05-03 16:57:01 · 319 阅读 · 0 评论 -
Day7:定位锚点透明
学习目标1、position 定位属性和属性值 2、定位元素的层级属性 3、包含块的概念和应用 4、锚点连接的语法和应用场景 5、透明属性的应用 6、扩展:Flash和marquee(滚动字幕)一、position 定位属性和属性值position 定位属性,检索对象的定位方式;语法:position:static /absolute/relative/fixed/inher...原创 2019-05-03 16:54:33 · 111 阅读 · 0 评论 -
DAY6宽高自适应
一、宽高自适应网页布局中经常要定义元素的宽和高。但很多时候我们希望元素的大小能够根据窗口或子元素自动调整,这就是自适应。它能够使网页显示更灵活,可以适应在不同设备、不同窗口和不同分辨率下显示。(1)宽度自适应块元素宽度默认为auto(2) 高度自适应元素{height:auto;}/高度不写二、浮动元素父元素高度自适应(父元素不写高度时,子元素写了浮动后,父...原创 2019-05-03 16:50:58 · 132 阅读 · 0 评论 -
DAY2 CSS基础
学习目标1、CSS简介 2、CSS语法 3、样式的创建 4、两种引入外部样式表的区别 5、样式表的优先级和作用域 6、CSS选择器 7、选择器的权重 8、浮动属性的简单应用 9、HTML、CSS注释一、CSS简介css:层叠样式表 英文全名:cascading style sheets,WEB标准中的表现标准语言,表现标准语言在网页中主要对网页信息的显示进行控制,简单说...原创 2019-04-23 21:46:43 · 196 阅读 · 0 评论 -
10种导航栏
<!doctype html><html><head><meta charset="utf-8"><title>导航栏</title><style type="text/css">*{margin:0; padding:0;}body{font-family:"微软雅黑";}ul,li{list-...原创 2019-05-02 20:05:08 · 241 阅读 · 0 评论 -
DAY1 HTML基本结构
1、文本标题(h1-h6) <h1>LOGO</h1><h2>二级标题</h2><h3>三级标题H3</h3><h4>四级标题H4</h4><h5>五级标题</h5><h6>六级标题</h6>注:文本标题标签自带加粗,有自己的文...原创 2019-04-23 09:07:56 · 161 阅读 · 0 评论 -
CSS3选择器
CSS3选择器1.属性选择器(html属性)E[att]{sRules} 选取带有指定属性的元素<html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> img[title]{border: 5px ...原创 2019-04-03 16:02:11 · 103 阅读 · 0 评论 -
表单表格高级, HTML5新增标签
表单表格高级<fieldset></fieldset>相当于方框,在字段集中可以包含文本和其他元素。该元素用于对表单中的元素进行分组应在文档中区别标出文本。<legend><legend>方框上的标题<label for="绑定控件id名"></label>label元素用来定义标签,为页面上的其他元素指定提示信息。要...原创 2019-04-03 11:07:58 · 265 阅读 · 0 评论 -
浏览器兼容
浏览器兼容五大浏览器内核Trident: IE ,Maxthon ,Theworld ,360Gecko:FirefoxWebkit:ChromePresto:OperaBlinkIE6常见CSS解析Bug及hack1.图片间隙(ie6及更低版本中)再div中插入图片,图片会在div下撑大3pxhack1:将<img>转换为块状元素,给<img>添加d...原创 2019-04-03 09:25:07 · 141 阅读 · 0 评论 -
定位,锚点,宽高自适应
定位position:定义元素布局所用的定位static:没有定位,默认absolute:绝对定位relative:相对于原始位置fixed:相对于浏览器窗口z-index:检索设置对象的层叠顺序(大盖小,仅作用于position属性为relative和absolute)left(左移负右移正) top(下移正,上移负)锚点连接 :页面内跳转(回到顶部)设置锚点链接方...原创 2019-04-02 16:18:20 · 354 阅读 · 0 评论 -
元素类型
元素类型1.块状元素2.内联元素3.可变元素元素类型转换display:block:其他元素不能在后面显示(换行符)inline:在元素后面删除换行符,多个元素在一行内并列显示inline-block :元素内容以块状显示,行内其他元素显示在同一行none:脱离文档流list-item:元素转变为列表实现标签栏 点击跳转<!DOCTYPE html&...原创 2019-04-02 13:50:36 · 129 阅读 · 0 评论 -
盒模型与文本溢出
盒模型borderborder:边框宽度,边框风格,边框颜色border-width border-style:solid(实线)/dashed(虚线)dotted(点划线)/double(双线) border-color padding调整子元素在父元素中的位置关系(写在父元素上)marginmargin:0 auto 块元素居中*{margin:0 pad...原创 2019-04-02 10:01:17 · 181 阅读 · 0 评论 -
2D和3D效果
2D1.CSS3过渡IE10,Firefox,Chrome及Opera支持transition属性Safari需要前缀-webkit-IE9及更早的版本,不支持transition属性Chrome25及更早的版本,需要前缀-webkit-transition:all 2s;transition-property 规定应用过渡的css属性的名称none(无属性)all(所有属性...原创 2019-04-07 18:11:34 · 148 阅读 · 0 评论