前端练习
关注
分享
扫一扫
文章平均质量分 72
伪伪的喵喵
就是这样。。喵。。
展开
专栏收录文章
- 默认排序
- 最新发布
- 最早发布
- 最多阅读
- 最少阅读
-
Taro实践和踩坑
Taro实践和踩坑 从临时接到任务要做一个答题微信小程序，为什么快速上手选用Taro到现在实践了3个小程序，也算是有些经验和总结，在此记录一下 文章目录Taro实践和踩坑选择原因开发准备编译配置样式设计稿及尺寸单位覆盖主题`css`预编译器`styled-component`字体图标`Iconfont`地址插件配置使用`AtIcon`踩坑转`wechat`微信小程序转`H5`转`alipay`支付宝小程序 选择原因 基于React语法规范，上手几乎0成本，满足基本开发需求 支持TS，支持ES7/ES原创 2020-05-22 10:20:26 · 981 阅读 · 0 评论 -
Puppeteer（小说爬取？？？）
Puppeteer（小说爬取？？？） 今天上班有点空，就学了一下爬虫，刚好想起昨天看的电视剧，就把他的小说爬下来了 选型 前端没门槛 基于DevTools，同时拥有node和chrome的能力 实现 先做了一个截屏的版本，感觉图片不太方便（kindle看起来费劲），就在在做了个简易的txt版本 基于puppeteer-examples,快速上手 git clone https://github.com/checkly/puppeteer-examples cd puppeteer-examp原创 2020-05-20 19:46:45 · 407 阅读 · 0 评论 -
React Gallery
React Gallery 学习慕课网视频， react 入门练手 实现效果 点击另一图片/底部另一控制条按钮切换图片 点击当前图片/底部当前控制条按钮翻转图片 当前托片居中与页面中间 其他图片随机排布在两侧和顶部 演示地址 第一次接触React，webpack…，要学的东西有点多，上手还是有点难度，对于React有了一个初步的认识，组建的形式还是挺有趣的。之间还学习了yeoman、gulp原创 2017-10-10 15:17:28 · 622 阅读 · 0 评论 -
JSONP实现跨域功能
JSONP实现跨域功能 通过动态创建<script>元素实现，使用时，使用时可以为src属性指定一个跨域URL. 实现百度搜索功能学习要点 打开开发者工具中的Network选项，当搜索框中键入值时，能在其jQuery...方法JSON参数的s属性中获取到后台数据； 创建script元素，通过其src属性，访问链接； 效果图<!DOCTYPE html> <html lang="en"> <hea原创 2017-03-06 21:42:10 · 627 阅读 · 0 评论 -
生成二维码名片
二维码名片 填写信息生成二维码，扫码添加到手机通讯录 知识点 内容显示部分采用毛玻璃效果 使用伪元素覆盖，并同时采用blur()滤镜 使用qrcode.js生成二维码 使用var qr = new QRCode(targId, info);实现 效果图代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"原创 2017-03-19 19:20:23 · 909 阅读 · 1 评论 -
js封装-简单雪花插件
js封装-简单雪花插件 今天学习了JS的封装，重点是学习函数的作用域，对暴露的接口进行操作。在老师讲的基础上增加了雪花颜色的随机值，并同时判断雪花下落的边界，解决滚动条抖动的问题。 效果图代码<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>show</title> <style>原创 2017-03-04 17:44:37 · 945 阅读 · 0 评论 -
高德地图API练习
高德地图API练习 通过对高得地图API的练习使用，对如何在网页中使用地图有了初步的认识，同时再次认识到学好javascript的重要性。 使用方法 获取API链接选择javaScript API 选择获取API 注册 创建新应用，并获取Key值 选择实例中心 - 参考示例代码进行开发效果图代码<!DOCTYPE html> <html lang="en"> <head> <meta原创 2017-03-04 14:07:55 · 1180 阅读 · 0 评论 -
简单二级菜单实现
简单二级菜单实现 看了公开课视频，挺基础的，但一节课看下来，还是能发下自己的知识点的不足，学习浮躁的状态 主要知识点 背景图片定位 行内元素控制 fixed, relative, absolute的差别使用 值得注意的内容 <a href="#">1</a> <a href="#">1</a> <a href="#">1</a> <a href="#">1</a>原创 2017-03-03 19:01:37 · 4970 阅读 · 0 评论 -
图片向两侧侧滑效果
图片向两侧侧滑效果 看完JavaScriptDOM编程艺术\color{red}{ JavaScript DOM 编程艺术}一书以后，印象最深刻的就是平稳退化，恰巧在网上看到图片滑动的效果，就想着自己实现一下。 实现要点 图片下方显示图片的title； 鼠标经过，目标图片改变层级，至于最上方，并改变其透明度； 目标图片两侧的图片分别向两侧滑动，停留一段时间后分别向目标图片靠拢； 发现的问题 打开原创 2017-03-03 15:07:20 · 349 阅读 · 0 评论 -
简单css3动画效果练习
简单css3动画效果练习知识点 简单伪元素的使用 布局练习 动画效果练习 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" href="../reset.css"> <!-- <link原创 2017-03-03 16:28:16 · 1971 阅读 · 0 评论 -
JS实现图片拖拽交换效果
JS实现图片拖拽交换效果 听 WEB前端javascript企业实战班 公开课，用JS实现了图片拖拽交换的目的；感谢老师的讲解。 实现要点 鼠标点击onmousedown：获取鼠标在页面上可视区域的位置(clientX, clientY)和元素外边框距已定位父元素容器的位置(offsetLeft,offsetTop)； 鼠标移动onmousemove: 获取鼠标在页面上可视区域的位置(clien原创 2017-03-03 16:00:09 · 7435 阅读 · 3 评论 -
登录界面效果
简单登录效果练习 刚学完html5和css3，想要简单实践一下，就写了一个简单的登录界面，所有的JQuery效果都是现学现查的，算是实现简单的交互功能。希望通过学习系统的原生JS后，能对代码实现优化，达到平稳退化，浏览器兼容等原则。 效果图登录界面注册界面快速登陆界面下载地址原创 2017-03-03 14:12:13 · 621 阅读 · 0 评论