前端js手写生日蛋糕

纯HTML5+CSS3制作生日蛋糕

以一个前端开发的身份绘制一个简单的蛋糕庆祝一下今天这个好日子吧,程序员庆生的乐趣与哀愁啊.写的比较简陋,感兴趣的看一下吧. 先发个效果图吧蛋糕分为三个部分,底部蛋糕,顶层蛋糕和蜡烛部分.HTML的布局结构也是按照这三部分布局的.另外就是使用CSS定位和CSS3的rotate,内外阴影等效果调整部分DOM元素样式.比较简单,相信码农都懂的. 不赘述其它有的没的了. 下面给出完整的的HTML代码和CSS代码 <!DOCTYPE html> <html> <head lang=&

前端面试手写代码——call、apply、bind

1 call.apply.bind 用法及对比 1.1 Function.prototype 三者都是Function原型上的方法,所有函数都能调用它们 Function.prototype.call Function.prototype.apply Function.prototype.bind 1.2 语法 fn代表一个函数 fn.call(thisArg, arg1, arg2, ...) // 接收参数列表 fn.apply(thisArg, argsArray) // apply 接收

原生html、js手写 radio与checkbox 美化

原生html.js手写 radio与checkbox 美化 html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Com

常见的JS手写函数汇总（代码注释、持续更新）

最近在复习面试中常见的JS手写函数,顺便进行代码注释和总结,方便自己回顾也加深记,内容也会陆陆续续进行补充和改善. 一.手写深拷贝 <script> const obj1 = { name: 'Leise', age: 23, address: { country: 'China', city: 'Guanzhou' } } const obj2 = deepClone(obj1) obj2.address.city = 'Hangzhou' console.log(obj1.address.

前端面试手写代码——JS函数柯里化

目录 1 什么是函数柯里化 2 柯里化的作用和特点 2.1 参数复用 2.2 提前返回 2.3 延迟执行 3 封装通用柯里化工具函数 4 总结和补充 1 什么是函数柯里化在计算机科学中,柯里化(Currying)是把接受多个参数的函数变换成接受一个单一参数(最初函数的第一个参数)的函数,并且返回接受余下的参数且返回结果的新函数的技术.这个技术以逻辑学家 Haskell Curry 命名的. 什么意思?简单来说,柯里化是一项技术,它用来改造多参数的函数.比如: // 这是一个接受3个参数的函数

前端面试手写代码——模拟实现new运算符

目录 1 new 运算符简介 2 new 究竟干了什么事 3 模拟实现 new 运算符 4 补充预备知识: 了解原型和原型链了解this绑定 1 new 运算符简介 MDN文档:new 运算符创建一个用户定义的对象类型的实例或具有构造函数的内置对象的实例. class Person { constructor(name) { this.name = name; } } // 创建自定义对象类型的实例 const person = new Person('小明') // 创建具有构造函数的内置

五四青年节，今天要学习。汇总5道难度不高但可能遇到的JS手写编程题

壹 ❀ 引时间一晃,今天已是五一假期最后一天了,没有出门,没有太多惊喜与意外.今天五四青年节,脑子里突然想起鲁迅先生以及悲欢并不相通的话,我的五一经历了什么呢,忍不住想说那大概是,父母教育孩子大声嚷嚷,隔壁装修电钻嗡嗡作响,戴上耳机敲着键盘书写每个白天晚上. 矫情完,那么回归本文正题,我在之前其实已经更新了大部分JS常考手写题,比如手写bind new apply call promise,节流防抖等等,这些知识中有些较为复杂,所以都用了单独的篇幅去介绍,那自然还剩一些好理解一点的手写题,考虑

轮播图--JS手写

轮播图基本每个网站都会有,也有很多的JQuery插件可以用,这里是用JS代码写的. @{ Layout = null; } <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width" /> <title>Test</title> <script src="~/Scripts/jq

前端面试手写代码——JS数组去重

目录 1 测试用例 2 JS 数组去重4大类型 2.1 元素比较型 2.1.1 双层 for 循环逐一比较(es5常用) 2.1.2 排序相邻比较 2.2 查找元素位置型 2.2.1 indexOf 2.2.2 findIndex 2.3 元素是否存在型 2.3.1 includes 2.3.2 some 2.4 依托数据结构特性 2.4.1 Map 2.4.2 Set(ES6 最常用) 3 补充 1 测试用例 // 测试用例 const a = {}; const b = { c: 1 };

zen-coding for notepad++，前端最佳手写代码编辑器

zen-Coding是一款快速编写HTML,CSS(或其他格式化语言)代码的编辑器插件,这个插件可以用缩写方式完成大量重复的编码工作,是web前端从业者的利器. zen-Coding插件支持多种编辑器,如UltraEdit,Notepad++等. 温馨提示:zen-Coding已经改名Emmet,并且搭建了一个新的网站:docs.emmet.io. zen-Conding下载地址:http://code.google.com/p/zen-coding/downloads/list (进入下载页,

浅谈时钟的生成(js手写代码)

在生成时钟的过程中自己想到布置表盘的写法由这么几种: 当然利用那种模式都可以实现,所以我们要用一个最好理解,代码有相对简便的方法实现 1.利用三角函数用js在三角函数布置表盘的过程中有遇见到这种情况:是在表盘的刻度处,利用三角函数计算具体的值时不能得到整数,需要向上或者向下取整,这样无形中就会存在些许偏差,而且这样的偏差难利用样式来调整到位,即使最终效果都可以实现,但是细微处的缝隙和角度的偏差都会影响整体的视觉体验,作为一名程序开发人员,这样的视觉体验很难让别人认可,放弃. 2.利用遮罩层 j

不借助jquery封装好的ajax，你能用js手写ajax框架吗

不借助jquery封装好的ajax,你能手写ajax框架吗?最基础的ajax框架,一起来围观吧. .创建XMLHttpRequest对象 var xhr = new XMLHttpRequest(); .设置open参数 xhr.open("GET", "Ajax.ashx?id=" + id, true); //第一个参数可取值get或post; 第二个参数为请求的路径: 第三个参数为是否采用异步,使用ajax绝对是true的啦. .注册回调函数 xhr.onre

js手写图片查看器（图片的缩放、旋转、拖拽）

在做一次代码编辑任务中,要查看图片器.在时间允许的条件下,放弃了已经封装好的图片jq插件,现在自己手写js实现图片的缩放.旋转.推拽功能! 具体代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body onload="l

js手写俄罗斯方块

代码如下 html: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" type="text/css" href="css/k.css"/> </head> <body> <div

浅谈时钟的生成(js手写代码)(非原创)

在生成时钟的过程中自己想到布置表盘的写法由这么几种: 当然利用那种模式都可以实现,所以我们要用一个最好理解,代码有相对简便的方法实现 1.利用三角函数用js在三角函数布置表盘的过程中有遇见到这种情况:是在表盘的刻度处,利用三角函数计算具体的值时不能得到整数,需要向上或者向下取整,这样无形中就会存在些许偏差,而且这样的偏差难利用样式来调整到位,即使最终效果都可以实现,但是细微处的缝隙和角度的偏差都会影响整体的视觉体验,作为一名程序开发人员,这样的视觉体验很难让别人认可,放弃. 2.利用遮罩层 j

js手写笔记

1.document.write(); 2.document.getElementById("").style.color="red";//sytle.fontsize//style.display="none"(block)//document.getElementById("").className获取类 3.var bool = confirm("Do you like JS ?"); 4.var m

简单的 js手写轮播图

html: <div class="na1"> <div class="pp"> <div class="na"> <img class="dd" src="../img/shouji/1.jpg"> </div> <div class="na"> <img class=&

高频重要前端API手写整理（call，apply，bind，instanceof，flat，filter，new，防抖，节流，深浅拷贝，数组乱序，数组去重，继承, lazyman，jsonp的实现，函数的柯里化）

Function.prototype.call = function(context,...args){ var context = context || window; context.fn = this; var result = eval(`context.fn(...args)`); delete context.fn; return result; } call的实质就是调用函数时候改变函数中this的指向,利用对象中函数调用时候 this指向这个对象的特性我们给函数加上fn属性,指向

js手写'Promise'

/* * pending:初始化成功 * fulfilled:成功 * rejected:失败 * */ function Promise(executor) {// 执行器 this.status = 'pending'; this.value = undefined; this.reason = undefined; this.fulfilledCallback = []; this.rejectCallback = []; let resolve = (value)=>{ if(this.

js 手写 Promise

/* * pending:初始化成功 * fulfilled:成功 * rejected:失败 * */ function Promise(cback){ this.status = 'pending'; this.value = undefined this.reason = undefined this.fulfilledCallback = undefined; this.rejectCallback = undefined; let resolve = (value)=>{ if(thi

js手写数组Api--模拟实现常见数组Api

数组的API经常用,但是api的内部实现还没研究过,于是就研究学习了下. 原文地址: https://www.cnblogs.com/yalong/p/11606865.html 数组的API的具体使用方看这里 API详细用法本文记录了数组中的 every,filter, find , indexOf, forEach, from, includes, isArray, map, reduce,slice,splice, sort这些个API的实现,如有不当,欢迎指出. Every 定义和用法:

前端js手写生日蛋糕

热门专题