HTML/CSS/JS
关注
分享
扫一扫
TanJ2014
这个作者很懒，什么都没留下…
展开
-
JS中的小技巧
1、首字母大写原创 2020-05-03 13:45:05 · 242 阅读 · 0 评论 -
Vue生命周期详解！！
在Vue官网上一篇讲到了Vue实例以及它的生命周期，这里我将实例生命周期的图截了下来如下：我们可以看到在Vue实例的整个生命周期中，会有八个生命周期钩子函数提供给我们，方便我们在不同时期进行不同操作，八个钩子函数如下：beforeCreatecreatedbeforeMountmountedbeforeUpdateupdatedbeforeDestroydestro...原创 2020-04-28 17:46:57 · 524 阅读 · 0 评论 -
JavaScript中new的实现
文章来源于我的个人博客：JS中new的实现JS中通过new操作符可以创建构造函数的实例对象，我们可以看看以下例子：function Person(name,age){ this.name = name this.age = age console.log(this) /* Person{name: "tanj", age: "18"} */}Person.p...原创 2020-04-23 10:30:53 · 293 阅读 · 0 评论 -
浅谈函数防抖和节流，利用js实现，常见应用场景
来源：浅谈函数防抖与节流在说防抖和节流之前，我们先看看下面这个例子：<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> #count{ widt...原创 2020-04-16 15:45:46 · 233 阅读 · 0 评论 -
关于JavaScript中的this指向总结
来源：关于JavaScript中的this指向总结关于JS中this指向问题，简单地说就是：哪个对象调用了函数，函数中的this就指向这个对象。按以下几种情况进行讨论：1. 普通函数调用var num = 10function fun1(){ console.log(this) /* Window */ console.log(num) /* 10 */}fun...原创 2020-04-13 17:29:44 · 134 阅读 · 0 评论 -
块级格式化上下文 Block formatting context （BFC）
详情地址：块级格式化上下文 Block formatting context （BFC）1. Box视觉格式化模型会根据CSS盒子模型将文档中的元素转换为一个个盒子。盒子主要包括了块盒、行内盒、匿名盒（没有名字不能被选择器选中的盒）以及一些实验性的盒（未来可能添加到规范中）。盒的类型由display属性决定。（1）块盒当元素的display为block、list-item或ta...原创 2020-04-12 13:44:02 · 389 阅读 · 0 评论 -
整理一些关于前端面试的基础内容，持续更新中......
关于HTML与CSS部分：DTD与DOCTYPE：参考DTD、Doctype、严格（标准）模式与混杂（兼容）模式 两栏布局：参考两栏布局其中一栏固定宽度一栏自适应宽度的几种CSS实现方法 三栏布局 float与absolute脱离文档流：参考float与absolute是否完全脱离文档流 盒模型 BFC 垂直居中 清除浮动 瀑布流 flex布局：参考flex语法 H5新特性...原创 2020-04-10 14:35:10 · 678 阅读 · 0 评论 -
Node.js中使用百度统计API统计站点的访问量、访客数、IP数相关信息
详情访问：详情欢迎来我的个人网站：TanJia今天，在个人网站的关于版块，添加了本站点的总访问量、总访客数以及当日的访问量等相关信息。使用的是百度统计的相关API。 首先，我们需要在百度统计中开通数据导出服务，获得Token，如下图所示。它提供了API调试工具以及API用户手册，使用起来非常方便！当我们打开百度统计来监控我们的站点时，URL中就以及有了我们站点 ...原创 2020-03-31 14:31:38 · 2026 阅读 · 2 评论 -
JS中常用的正则表达式
原文链接：JS正则表达式正则表达式基础：正则表达式基础欢迎来到我的个人网站：TanJia常用的正则表达式：1.验证是否为有效数字可能出现+ -号，也可能不出现 [+-]? 一位0-9都可以，多位首位不能是0 (\d|([1-9]\d+)) 小数部分可能有可能没有，一旦有后面必须有小数点+数字 (\.\d+)?let num = /^[+-]?(...原创 2020-03-26 21:49:52 · 444 阅读 · 0 评论 -
JavaScript中正则表达式两种创建方式的区别
在正则表达式基础这篇文章中，我们介绍过正则表达式的两种创建方式：1.字面量创建方式（两个斜杆之间包起来的，都是用来描述规则的元字符）let reg1 = /\d+/2.构造函数模式创建(两个参数：元字符字符串，修饰字符串)let reg2 = new RegExp("\\d+")区别：（1）构造函数因为传递的是字符串，\需要写两个才表示\reg = /\d...原创 2020-03-26 21:46:52 · 647 阅读 · 0 评论 -
JavaScript封装优先级队列
原文地址：JS优先队列另外：欢迎大家来我的个人网站TanJia-前端技术分享实现优先级队列相对队列主要考虑两个地方：优先级队列中每一个元素由元素的值与元素优先级组成添加元素时，要考虑到优先级。将新插入元素的优先级与队列中已经存在的元素优先级进行比较，以获得自己正确的位置实现代码如下：<script type="text/javascript"> functio...原创 2020-03-26 10:20:17 · 229 阅读 · 0 评论 -
使用链接可以打开图片，而在img中使用src无法打开图片
好傻啊！！！！！！！！！！！！！！！！！！！！我在页面上加了一个<!-- 将http请求转成https请求 --><meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">我的图片路径是http，结果给我转成了https。。。。。。所以在该页面使用src打不开...原创 2020-03-20 14:45:42 · 3373 阅读 · 0 评论 -
在html的头部加入meta使得所有的资源请求由http请求转成https请求
<!-- 将http请求转成https请求 --><meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">原创 2020-03-20 14:38:09 · 487 阅读 · 0 评论 -
async/await学习
详情可以查看我的博客：async/await学习1.async函数函数的返回值为promise对象 promise对象的结果由async函数执行的返回值决定执行下列代码：async function fun1(){ return 1}const result = fun1()console.log(result)执行结果：可以看到调用fun1()函数后，返回的...原创 2020-03-19 09:01:28 · 152 阅读 · 0 评论 -
使用art-template模板向页面填充一段html，不能正常展示问题
最近，使用art-template模板与wangEditor富文本编辑器完成编辑文章功能，使用富文本编辑器存储在数据库中的内容就是一段html，从数据库中取出，展示在编辑器中，供用户编辑。遇到问题：取出html内容，展示在编辑器中，无法正常展示原文章的样式，而展示的是一段原生html代码。解决方法：第一种方法： 将{{content}}写成 {{#content}}第二种方法...原创 2020-02-20 15:32:00 · 1044 阅读 · 0 评论 -
NodeJS+Express解决跨域问题：Access-Control-Allow-Origin
在app.js中加上，要加在其他路由前面。app.all('*', function(req, res, next) { res.header("Access-Control-Allow-Origin", "*"); res.header("Access-Control-Allow-Headers", "X-Requested-With"); res.header("...原创 2019-11-20 11:27:57 · 304 阅读 · 0 评论 -
利用Konva封装简易的进度条
利用Konva库封装了一个简单的进度条函数tjProgressBar，效果如下：主要是引入Konva.js与tjProgressBar.js后，在页面中直接初始化一个tjProgressBar对象即可创建一个进度条。new tjProgressBar({ x:100, y:100, w:600, //进度条的宽度 h:30 //进度条的高度});具体代码如下：htm...原创 2019-10-09 11:02:18 · 375 阅读 · 1 评论 -
利用canvas封装一个绘制矩形的函数
在需要使用矩形时，引入tjRect.js文件：function tjRect(option){ this._init(option);}tjRect.prototype = { _init:function(option){ this.x = option.x || 0; //矩形左上角的 x 坐标 this.y = option.y || 0; this.width =...原创 2019-10-08 17:32:19 · 366 阅读 · 0 评论 -
HTML/CSS写列表
LIST 栏目标题 第一个列表选项 第二个列表选项 第三个列表选项 第四个列表选项 第五个列表选项 第六个列表选项 第七个列表选项 第八个列表选项 第九个列表选项 第十个列表选项 body{ backg原创 2018-01-12 12:48:26 · 1176 阅读 · 0 评论 -
H5写搜索框：将搜索图标放入搜索框之内
最近在模仿写新浪微博的首页，其中搜索框的搜索按钮位于搜索框之内，突然想起刚刚接触前端的时候被这个给难住了，哎......实在是惭愧啊！ 思想很简单：将input(type=text)和input(type=button)放入同一个div中，给这个div一个边框border，而input(type=text)不设置边框，这样就达到了效果。 代码如下： .search { float: l原创 2018-01-18 16:16:52 · 25149 阅读 · 3 评论 -
表头文字不换行显示
最近碰到一个问题，一个测试平台项目中的表格列数太多，表头的文字会换行显示，这样会显得十分丑陋。建议给表头添加：（使文字在一行显示）th { white-space: nowrap;}这样做会让整列的宽度与该列表头的宽度一致，但是当表中数据很多时，会出现如下效果：会发现此时td的宽度与th的宽度一致，我们可以给th设置一个padding-right:200px，可以看到如下效果：而给td也...原创 2018-07-04 15:47:59 · 4376 阅读 · 0 评论 -
推荐一款好用的Bootstrap后台管理框架——Ace Admin
Ace Admin可以从左边的导航栏中看到，元素很全，需要什么直接拷过来就可以用了，真的很方便，用了半天的时间就搭出了一个管理项目的基本页面！！！模板下载链接：https://download.csdn.net/download/sinat_36014216/10551755...原创 2018-07-19 17:12:11 · 25151 阅读 · 52 评论 -
推荐一款好用的jeDate日期控件
jeDate是一款原生JS开发的不依赖任何第三方库大众化的日期控件，包含单双面板、区域选择、 多语言、日历固定、有效无效日期、日期时间戳转换、日期加减、限制时分秒、初始化日期加减N、日期标注点、设定年月（YYYY-MM）、日期范围限制、开始日期设定、自定义日期格式、当天的前后若干天返回、时分秒选择、智能响应、自动纠错、节日识别，操作等常规功能外，根据不同的日期格式，显示不同内容，还拥有更多趋近...原创 2019-04-16 09:16:33 · 552 阅读 · 0 评论 -
img span在一行显示，如何垂直居中的问题
<img src="img/info.png" alt="" /><span>操作系统基本信息</span>想让img和span在一行显示，并且垂直居中。如图所示。只需要添加如下样式即可。img,span{ vertical-align:middle;}...原创 2019-04-10 09:19:47 · 1002 阅读 · 0 评论 -
html中table表格td中英文不换行
在html中给table设置一个，当某个td中的字符串是英文并且相当长时它不会换行会将其他列的内容挤出去，无法正常显示，我们需要添加table{word-break:break-all; word-wrap:break-word}英文则会自动换行...原创 2019-04-25 14:47:49 · 2673 阅读 · 0 评论 -
css中的overflow样式 滚动条
1.希望默认无滚动条，内容溢出时出现滚动条：.sort_right{ overflow:auto }2.希望内容溢出时，页面可以滚动，但是不出现滚动条： .sort_right { overflow:auto } .sort_right::-webkit-scrollbar { width: 0; }3.希望滚动条一直出现：....原创 2019-07-14 14:00:12 · 254 阅读 · 0 评论 -
CSS设置内容滚动，但隐藏滚动条
希望.element的内容滚动，但是不出现滚动条。/*侧边栏 溢出时滚动*/.element{ overflow-y: auto;}.element::-webkit-scrollbar{ width: 0;}/*ie10+*/.element{ -ms-overflow-style: none;}/*firefox*/.element{ s...原创 2019-09-20 10:08:25 · 391 阅读 · 0 评论 -
原生javascript实现div拖拽
使用javascript实现div拖拽效果查看地址：https://tanj2014.github.io/javascript/04drag/drag.html代码下载地址：https://github.com/TanJ2014/javascript/blob/master/04drag/drag.html更多javascript练手小例子：https://github.com/Tan...原创 2019-09-26 11:14:46 · 354 阅读 · 0 评论 -
仿小米官网导航栏滑动效果
仿照小米官网导航栏滑动效果，主要是当导航栏上滑出页面后，将其固定在页面上方。效果查看：https://tanj2014.github.io/javascript/02navbar/index.html代码下载：https://github.com/TanJ2014/javascript/tree/master/02navbar更多javascript练手小例子：https://gith...原创 2019-09-26 11:19:50 · 1752 阅读 · 0 评论 -
原生javascript实现小人根据鼠标飞翔
原生javascript实现小人根据鼠标飞翔效果查看地址：https://tanj2014.github.io/javascript/05fly/index.html代码下载地址：https://github.com/TanJ2014/javascript/tree/master/05fly更多javascript练手小例子：https://github.com/TanJ2014/ja...原创 2019-09-26 15:42:10 · 399 阅读 · 0 评论 -
JS实现模态框
实现简单弹出框/遮罩层的效果。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>弹出框</title> <style> *{ padding: 0; margin:0; } body{ ...原创 2019-09-27 09:39:33 · 18631 阅读 · 4 评论