- 博客(22)
- 收藏
- 关注
原创 京东秒杀倒计时效果js实现(天时分秒)
大家好,今天要给大家分享的是京东首页秒杀效果,用js实现时分秒的倒计时。这个效果在很多网站上都会用到,比较实用,下面是代码:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document&
2020-10-17 09:40:04 7866 3
原创 前端面试汇总
一、CSS相关1. 盒模型①标准的盒模型:width指content部分的宽度;②在IE盒模型(怪异盒子)中:width表示content+padding+border这三个部分的宽度。③切换盒模型:box-sizing: content-box 是W3C盒子模型,box-sizing: border-box 是IE盒子模型。2. BFC①定义:BFC就是为元素提供一个独立的容器,在该容器里按照一定的规则进行布局排列,该容器内的元素不会影响外部的元素,同理,外部的元素也不会影响内部的元素②触发
2021-11-08 21:43:47 225
原创 图片裁剪草稿
<template> <div> <div style="text-align: center"> <img style="border-radius: 50%" width="120px" :src="avatarURL" /> <el-button type="text" @click="editAvatar">修改头像</el-button> </div> <
2021-09-08 15:21:08 108
原创 滚动条样式修改
1.改变浏览器默认的滚动条样式::-webkit-scrollbar-track-piece { //滚动条凹槽的颜色,还可以设置边框属性background-color:#f8f8f8;}::-webkit-scrollbar {//滚动条的宽度width:9px;height:9px;}::-webkit-scrollbar-thumb {//滚动条的设置background-color:#dddddd;background-clip:padding-box;min-height.
2021-07-28 11:26:40 125
原创 $route和$router到底是什么?
**关于vue路由必学知识 **可以理解为,一个是用来获取路由信息的,一个是用来操作路由的$route:route是路由信息对象,里面主要包含路由的一些基本信息,包括name、meta、path、hash、query、params、fullPath、matched、redirectedFrom;$router:router是VueRouter的实例,包含了一些路由的跳转方法,钩子函数等。Vue新CLI脚手架的坑:1.在使用vue-cli脚手架创建项目的时候,在cnpm create app命令
2020-12-01 20:07:08 1623
原创 防抖与节流深度形象化理解
防抖:就是一定时间内,只会执行最后一次任务;节流:就是一定时间内,只执行一次 ;//函数节流var r = function () { console.log("薇恩开启大招 一秒隐身 进入夜行 收割时刻");};function lolHeroskill(fn, delay) { let cd = true; return function () { if (cd) { fn(); cd = false; setTimeout(() =&
2020-12-01 19:45:09 199 1
原创 一个很厉害的属性——sticky
position:sticky有个非常重要的特性,那就是sticky元素效果完全受制于父级元素们。这和position:fixed定位有着根本性的不同,fixed元素直抵页面根元素,其他父元素对其left/top定位无法限制。<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=de
2020-12-01 19:32:59 338
原创 vue万能模板
分享一个好用的vue模板,如下:<template> <div> <h1>我是模板</h1> </div></template><script>export default { //组件名字 name: "moban", //接收父组件给的东西 type是接收什么东西 default 默认值 props: { list: { type: Array,
2020-12-01 19:28:02 1535
原创 vue底层原理----数据双向绑定 最核心代码(简化版)
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>vue底层原理核心代码</title></head><body> <div i.
2020-12-01 19:19:18 198
原创 Js原生放大镜效果
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><style> img { display:
2020-10-30 08:37:52 94
原创 浅拷贝以及四种深拷贝的方法
浅拷贝:仅仅是指针给了另一个对象深拷贝 两个对象之间没有任何关系<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head>
2020-10-21 17:23:20 876
原创 京东轮播图的原生代码
早些时候分享了淘宝的轮播图,现在让我们一起来看看京东轮播图效果的实现吧,下面是代码:<!DOCTYPE HTML><html><head> <meta charset="utf-8"> <title></title> <style> * { margin: 0; padding: 0; } li { list-style: none;
2020-10-20 20:49:01 1716 2
原创 淘宝轮播图的原生实现
淘宝轮播图的原生实现<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> * { padding
2020-10-20 09:19:23 381
原创 JS计算《算经》中百鸡百钱问题
我国古代数学家张丘建在《算经》一书中提出的数学问题:鸡翁一值钱五,鸡母一值钱三,鸡雏三值钱一。百钱买百鸡,问鸡翁、鸡母、鸡雏各几何?for (var a = 0; a <= 20; a++) { for (var b = 0; b <= 33; b++) { for (var c = 0; c <= 99; c += 3) { if ((5 * a + 3 * b + c / 3 == 100) && (a + b + c
2020-10-19 10:28:21 276
原创 九九乘法表的打印
// 例3:九九乘法表的打印 // 第一步:输出九行 // 第二步:每行输出九列 // 第三步:让列数和行数相等 // 第四步:实现数字的替换 for (var i = 1; i <= 9; i++) { for (var j = 1; j <= i; j++) { document.write(j + 'x' + i + '=' + i * j + '  ') } document.write('.
2020-10-19 10:17:17 525
原创 ES6新语法,和ES5对比
ES6的特性比较多,在 ES5 发布近 6 年(2009-11 至 2015-6)之后才将其标准化。两个发布版本之间时间跨度很大, 在这里列举几个常用的:1.类(class)作用是方便写面向对象的代码语法 只包含属性和方法:class类名{属性1,属性2,方法}里面写 constructor( ){ } 这是构造方法,当class被new实例化对象时,会自动调用extends()子类继承父类class Animal { constructor(name, color) {
2020-10-17 10:35:59 470 1
原创 半透明旋转魔方特效的实现
大家好,日更博主上线啦!今天分享的第二篇是旋转魔方的效果,通过css有两种方式实现:1.先平移再旋转,2:先旋转再平移下面是代码,原理比较简单~~<!DOCTYPE html><html lang="ch"> <head> <meta charset="UTF-8"> <title>旋转魔方</title> <style type="text/css"
2020-10-17 09:54:19 319
原创 京东首页中图片从右向左 循环匀速播放(走马灯)效果
这个效果还是比较常见实用的,下面为大家献上代码:其中图片地址大家可以自行更换,此处不太方便添加。<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><title>Document</...
2020-10-16 08:50:33 567 1
原创 京东秒杀效果的实现
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><title>Document</title><style>*{margin:0...
2020-10-15 08:54:56 1360 1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人