前端工作
html+css+js
Zebra_9
命是弱者借口,运乃强者谦词
展开
-
笔试:将URL参数转换为对象
在面试的过程中,很有可能会问你,如何将url链接里的参数提取出来,变成一个对象。说起来就是字符串的提取处理,但是当场让手写还是得提前准备下的url = "wwww.test.com/blog?user=hu&password=123456&type=login"// 以?为索引,截取出后面的参数。+1是为了排除?这个符号let urlQueryIndex = url...原创 2019-12-23 23:33:11 · 1738 阅读 · 0 评论 -
使用js操作select标签以及增添css类
jquery用多了,有点忘了js是怎么操作select标签。今天有空就总结一下。<select id="selectTest"> <option value="1">a</option> <option value="2">b</option> <option value="3">...原创 2019-12-15 12:09:28 · 440 阅读 · 0 评论 -
如何在自己的项目里引用字体
在前端开发中,往往会需要使用到各种字体,这需要我们在本地项目中引入字体文件,然后使用。这里安利一个笔者使用的字体下载网站http://www.fonts.net.cn/font-33582285129.html一、首先在本地项目中的css样式里引用下载好的文件格式为 .ttf 的字体文件/* 引用外部字体 */@font-face { font-family: TitleF...原创 2019-11-14 19:06:02 · 947 阅读 · 0 评论 -
关于web存储的这些事儿(localStorage、sessionStorage以及cookie)
一、HTML5 Web存储(localStorage 和 sessionStorage)这两种存储方式,比之前的cookie更安全快速,能存储的数据也更多。注意:Internet Explorer 7 及更早IE版本不支持web 存储.使用localStorage和sessionStorage之前,应该先检查浏览器是否支持。localStorage 和 sessionStorage 属性允...原创 2019-10-31 00:14:57 · 216 阅读 · 0 评论 -
Jquery选择器中使用变量
将变量在Jquery选择器中使用,需要通过+号来连接。看下面的代码就明白了 <div id="sun"> <input type="text" name="sun" value="sun flower"> </div> var x = 'sun'; $("#sun").attr('data','hello'); $("#"...原创 2019-09-22 16:59:03 · 2303 阅读 · 0 评论 -
input标签中checkbox类型的相关操作总结
今天突然用到了input标签里的checkbox,发现还是有些概念不清不楚的,在这里总结一下。一、checked属性常用于input标签里type类型为checkbox和radio,是一个Boolean属性。规定在页面加载时预先被选定。可以通过js代码进行设置。 <input type="checkbox" name="hu" checked="checked">...原创 2019-09-22 01:13:03 · 29158 阅读 · 0 评论 -
显示文本,超过部分隐藏并使用省略号
在前端写页面的时候,经常会遇到文本内容过多,需要将超出范围的内容用省略号来显示。这里Css样式中,必须规定包裹内容的宽度以及将overflow设为hidden。不然会没有效果。其中-webkit-line-clamp属性是规定文本显示几行,这里为1,即表示超过一行就显示省略号。实现效果如下:...原创 2019-09-17 23:29:05 · 442 阅读 · 0 评论 -
(转)reset.css 总有你需要的
最常用* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}*:before,*:after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box;...转载 2019-09-20 18:01:39 · 80 阅读 · 0 评论 -
ajax返回——获取responseheaders内特定的参数
今天跟老大联调,希望接受到登录成功后返回的‘**Authorition’**参数,本来是直接在接口返回的json数据里读取,突然改变了主意放在请求头返回,这一下给我整蒙了,以前没弄过,只能靠万能的百度了。最后解决了问题,这里学习记录一下。其实知道方法了以后,才发现是自己知道的东西太少了。实现起来不难,上代码。 $.ajax({ url: AJAXHOST + '/ac...原创 2019-08-16 23:45:13 · 4717 阅读 · 1 评论 -
实现div边框可拖拽改变宽度
项目要求实现目录和文章内容之间可以拖拽自由改变宽度,百度了很多,然后自己改了一下,效果如下。html代码《》原创 2019-07-17 20:01:09 · 18945 阅读 · 3 评论 -
时间戳与日期格式转换
最近后台接口返回的时间数据改成了时间戳形式,之前不太了解这个东西,这里碰到了就记录一下。时间戳:指的是格林威治时间1970年01月01日08时00分00秒起至现在的总秒数。通俗的讲,时间戳是一份能表示一份数据产生在一个特定的时间点已经存在的完整的可验证的数据。主要作用是为用户提供一种电子证据,以证明用户某些数据的产生时间。常用于电子商务、金融活动当中,特别是用于支撑公开密钥基础设施的不可否...转载 2019-07-14 22:53:17 · 2202 阅读 · 0 评论 -
JS中prototype介绍
转载 原文点这里用过JavaScript的同学们肯定都对prototype如雷贯耳,但是这究竟是个什么东西却让初学者莫衷一是,只知道函数都会有一个prototype属性,可以为其添加函数供实例访问,其它的就不清楚了,最近看了一些 JavaScript高级程序设计,终于揭开了其神秘面纱。每个函数都有一个prototype属性,这个属性是指向一个对象的引用,这个对象称为原型对象,原型对象包含函数...转载 2019-06-19 20:41:22 · 37549 阅读 · 5 评论 -
关于清理页面Cookies
最近由于公司任务需要清理网页Cookies,由于之前只知道有这个词,没接触过。看过了很多大佬写的博客,总结一下,以免后来又忘了,有不对的地方请大佬们教教我。Cookie属于会话跟踪技术的一种。会话(Session)跟踪是Web程序中常用的技术,用来跟踪用户的整个会话。会话通常指的是从打开一个浏览器访问某个站点开始,到关闭这个浏览器的整个过程,成为一次会话。可以想象一个问题,一个浏览器访问一...原创 2019-06-11 10:31:42 · 2885 阅读 · 0 评论 -
Copy标签里的内容到剪切板
今天的任务需要将页面中设置好的API接口,增加复制按钮。点击直接复制到剪切板通过度娘,主要有两种方法。一是利用JavaScript原生execCommand()方法,二是利用第三方库:clipboard 官方网站一、document.execCommand()方法定义(通过MDN):当一个HTML文档切换到设计模式时,document暴露 execCommand 方法,该方法允许运...原创 2019-06-11 19:53:05 · 457 阅读 · 0 评论 -
什么是纯函数?
纯函数的概念:一个函数的返回结果只依赖其参数,并且执行过程中没有副作用。下面我们来分别说明一下概念中的两个条件。返回结果只依赖其参数返回值只和函数参数有关,与外部无关。无论外部发生什么样的变化,函数的返回值都不会改变。// 非纯函数 返回值与a相关,无法预料const a = 1const foo = (b) => a + bfoo(2) ...原创 2019-06-25 16:06:21 · 10989 阅读 · 0 评论 -
javascript——构造函数和原型对象
转载于:https://www.cnblogs.com/socool-hu/p/5665264.html常用的几种对象创建模式使用new关键字创建最基础的对象创建方式,无非就是和其他多数语言一样说的一样:没对象,你new一个呀!var gf = new Object();gf.name = "tangwei";gf.bar = "c++";gf.sayWhat = functio...转载 2019-06-22 16:09:07 · 110 阅读 · 0 评论 -
JS——了解Object.assign()方法
Object.assign() 方法用于将所有可枚举属性的值从一个或多个源对象复制到目标对象,且返回目标对象Object.assign(target, ...sources)target : 目标对象sources:源对象注意:如果目标对象属性具有相同的键,则目标对象属性被源对象属性覆盖。后面的源对象属性覆盖前面的源对象属性。Object.assign()方法只会拷贝源对象自身的并...转载 2019-06-22 20:37:46 · 2616 阅读 · 0 评论 -
es6 箭头函数
Arrow Function 箭头函数最近经常看到箭头函数“ => ”,总是似是而非,还是查清楚在这里总结一下。箭头函数相当于匿名函数,并且简化了函数命名方式。 x => x+1// 相当于function(x){ return x + 1 ;}上面是最简单的箭头函数,当有多个参数和语句时,()、{ }和return都不能省略,例如:(a,b)=>{...转载 2019-06-27 00:21:07 · 97 阅读 · 0 评论 -
实现目录拖拽、合并和分离子目录
刚开始遇到这个需求,想偷懒直接用别人写好的东西往里套。花了一上午的时间效果还是不好,最后还是决定自己动手。首先,拖放是一种常见的特性,在H5中,任何元素都能被拖放。当把元素的 draggable 属性设置为true时,即可拖动。而且图片和链接默认为true,不需要重复设置。drag当元素或选择的文本被拖动时触发drag事件/每几百毫秒。dragstart用户开始拖动或选择文本时会触...原创 2019-06-24 15:21:07 · 880 阅读 · 0 评论 -
css样式覆盖顺序
一般来说:元素上的style > 文件头上的style > 外部样式文件且样式表的元素选择器越精确,优先级越高即:id > 类 > 元素类型选择器对于选择器相同的样式,在样式表中,越靠后的优先级越高如果想要改变优先级的话,可使用 !important!important,作用是提高指定样式规则的应用优先权(优先级)。语法格式{ cssRule !importan...原创 2019-06-24 15:35:52 · 223 阅读 · 0 评论 -
call、apply和bind方法详解
call方法:使用一个指定的this值和单独给出的一个或多个参数来调用函数。var obj = { this.message = " hu "}function getName(name){ console.log(this.message + " " + name);}getName.call(obj ," mei "); // apply方法,此方法和call方法的...原创 2019-06-27 23:39:36 · 349 阅读 · 0 评论 -
关于form标签下button 自动刷新
今天在改项目里的祖传代码时,发现点击登录时出现自动刷新,当时下意识以为是JS里写了刷新,找了很久才意识到问题不是出在JS上。在HTML页面有类似以下结构的代码:<form> <button></button></form>原因是:button 放在 form 里边, 除了 IE 中 默认 type = “button”, 其他浏览器默认...原创 2019-06-19 17:40:06 · 317 阅读 · 0 评论