前端
关注
分享
扫一扫
来者不是客
生有热烈，藏与俗常
展开
-
H5 基础 -canvas 阴影与渐变填充
1、阴影<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> </head> <style type="text/css"> #can{ border: 1px solid gray; ...原创 2020-04-14 20:58:13 · 374 阅读 · 0 评论 -
HTML应用开发基础篇 - 作业小结
目录1、卡片视图2、选项卡（底部切换）3、MUI按钮使用4、DOM对象添加元素5、CSS 聊天气泡6、CSS 边框7、MUI-购物车结算8、MUI - 摇一摇1、卡片视图<!doctype html><html> <head> <meta charset="UTF-8"> <title&g...原创 2020-04-05 15:45:27 · 415 阅读 · 0 评论 -
HTML应用开发基础篇 - NodeJS
目录1、NodeJS 简介2、NodeJS 模块机制3、Node-HTTP 模块4、文件管理功能1）、文件上传2）、文件读取5、NodeJS 操作数据库6、Sql 防注入问题7、Mysql 连接池1、NodeJS 简介Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。使用了一个事件驱动、非阻塞式 I/O 的模...原创 2020-04-05 11:35:37 · 683 阅读 · 0 评论 -
HTML应用开发基础篇 - HTML5+ Runtime
目录1、H5+ 设备硬件信息操作2、Accelerometer 加速度仪3、条码扫描4、Camera 摄像头 |系统相册操作 Gallery前言：这部分功能要在手机上才可见到效果，使用时注意手机连接。1、H5+ 设备硬件信息操作1）、device :模块管理设备信息，用于获取手机设备的相关信息，如IMEI、IMSI、型号、厂商等。IMEI：设备的国际移动设备身份码...原创 2020-04-04 23:19:52 · 1579 阅读 · 0 评论 -
HTML应用开发基础篇 - MUI 框架（三）MUI 事件与窗口管理
目录1、事件2、窗口管理1）、打开窗口 | 关闭窗口2）、加载子页面 | 预加载页面3）、下拉刷新 | 上拉加载4)、数据交互1、事件MUI 内置了常用的手势事件，具体如下表：事件绑定方法：(1) 选择器.addEventListener(“event”,function) ；(2) mui(选择器).on() ：可实现批量元素的事件绑定，参数：.on(...原创 2020-04-04 21:56:28 · 1037 阅读 · 0 评论 -
HTML应用开发基础篇 - MUI 框架（三）MUI 布局
目录1、MUI 栅格系统2、MUI 标题栏3、MUI 选项卡4、卡片视图5、轮播组件6、列表1、MUI 栅格系统2、MUI 标题栏3、MUI 选项卡4、卡片视图5、轮播组件6、列表...原创 2020-04-04 17:53:41 · 4431 阅读 · 1 评论 -
HTML应用开发基础篇 - MUI 框架（二）输入控件
目录1、输入表单（文本框、密码框、搜索框）2、数字输入框3、开关组件4、MUI 选择器5、日期选择器1、输入表单（文本框、密码框、搜索框）外层容器：class=" mui-input-group " ；内层：行容器 ：class=" mui-input-row " ，输入增强：文本清除 ( class=" mui-input-clear" )，密码查看 ( cl...原创 2020-01-05 21:03:28 · 1994 阅读 · 0 评论 -
HTML应用开发基础篇 - MUI 框架（一）基础控件
目录1、MUI 图标2、MUI 按钮3、角标4、消息框在开始之前，先给一个基本的 MUI 界面，最基本的要有头部、主体和底部这三种元素：<!DOCTYPE html><html><head> <meta charset="utf-8"> <meta name="viewport" conten...原创 2020-01-05 19:22:27 · 686 阅读 · 0 评论 -
HTML应用开发基础篇 - CSS 选择器
一般较为常用的选择器有这几种：标签选择器、类选择器、ID选择器、关联选择器、组合选择器、属性选择器、伪类选择器（hover、active、link、visited）。如果想了解更多见：CSS 选择器参考手册。下面直接放一个上课时的练习，来直接应用选择器：<!DOCTYPE html><html> <head> <meta charset...原创 2020-01-04 10:06:47 · 141 阅读 · 0 评论 -
HTML应用开发基础篇 - CSS 伪元素
CSS 伪元素用于向某些选择器设置特殊效果。<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>伪元素</title> <style type="text/css"> div{ width: 400px; ...原创 2020-01-04 09:57:31 · 124 阅读 · 0 评论 -
HTML应用开发基础篇 - CSS3 新增特效
目录1、边框效果1）、圆角属性2）、边框阴影3）、文字阴影2、文字效果3、transform 属性4、图标字体5、动画6、响应式布局1、边框效果1）、圆角属性border-radius ，赋值顺序是上、右、下、左。<!DOCTYPE html><html> <head> <meta ch...原创 2020-01-04 09:52:21 · 648 阅读 · 0 评论 -
HTML应用开发基础篇 - JS 模板引擎
JS模板引擎是借助于工具把 js数据转换成 html 需要的页面。art-template 是一个简约、超快的模板引擎，它采用作用域预声明的技术来优化模板渲染速度，从而获得接近 JavaScript 极限的运行性能，并且同时支持 NodeJS 和浏览器。但在使用前需要导入一个 js 文件：提取码：ad9h。其使用方法为：//声明<script type=“text/html id...原创 2020-01-03 16:49:06 · 277 阅读 · 0 评论 -
HTML应用开发基础篇 - 调用函数的几种使用
直接看代码吧，有讲解在代码中。<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>JSON操作</title> </head> <body> <script type="text/javascript"&g...原创 2020-01-03 16:00:14 · 2954 阅读 · 0 评论 -
HTML应用开发基础篇 - 点击的函数
<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> <script type="text/javascript"> window.onload=function(){ document.getEl...原创 2020-01-03 15:45:33 · 233 阅读 · 0 评论 -
HTML应用开发基础篇-Canvas画布之手机画图板
这篇和之前写的那篇内容差不多，在手机端的画图板和网页版的画图板格式都差不多，但还是有些地方需要注意的。在手机上应用的时候，需要加上页面头部：<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">另外触发事件也不再用 mouse 事件了，改用监听器事件：ad...原创 2020-01-03 14:25:33 · 698 阅读 · 0 评论 -
HTML应用开发基础篇 - this 的使用
this 是 JavaScript 语言的一个关键字，代表函数运行时，自动生成的一个内部对象。this 指向当前函数体的父级对象。<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> </head> <bo...原创 2019-12-18 00:21:18 · 594 阅读 · 0 评论 -
HTML应用开发基础篇 - 函数的简单调用（登录时的校验）
先看一个比较简单函数之间的调用。<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> </head> <body> </body> <script type="text/java...原创 2019-12-17 23:54:23 · 417 阅读 · 0 评论 -
HTML应用开发基础篇 - 添加内容元素（子节点/追加元素）
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .content{ border: 1px solid black; background-...原创 2019-12-17 22:56:54 · 1277 阅读 · 0 评论 -
HTML应用开发基础篇 - 函数（一个较综合的使用）
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #d1{ width: 500px; height: 60px; border: 1...原创 2019-12-17 22:44:44 · 187 阅读 · 0 评论 -
HTML应用开发基础篇 - 函数（阻止事件的冒泡）
一个完整的 JS 事件流是从 window 开始，最后回到 window 的一个过程。addEventListener 的第三个参数，指定是（true）时响应还是冒泡时（false）响应事件，默认为 false 。而阻止事件的冒泡有方法：event.stopPropagation(); 和 event.cancelable=true ; 不建议使用后者。先看个简单的例子，三个叠加一起的图形，每...原创 2019-12-17 22:31:25 · 241 阅读 · 0 评论 -
HTML应用开发基础篇 - 函数（读取及添加表单元素）
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #container { width: 500px; height: 300px; ...原创 2019-12-17 22:24:44 · 239 阅读 · 0 评论 -
HTML应用开发基础篇 - JS 事件（函数的触发/touch事件）
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>JS事件</title> </head> <body> <!--<button id="btn" onclick="func()">点击</...原创 2019-12-17 21:44:13 · 415 阅读 · 0 评论 -
一个比较漂亮的计算器
我是在写计算器时，有个地方不知道怎么写的，就去查了查其他人的，然后无意间就发现了这篇博客，大致功能完成的都挺好，最主要是外观上挺好看的，我这里就转一下。见博客。————————————————版权声明：本文为CSDN博主「༺ཌ琦ད༻」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。原文链接：https://blog.csdn.net/weixin_...转载 2019-10-14 23:50:29 · 2486 阅读 · 0 评论 -
HTML应用开发基础篇 - JavaScript ：简单四则运算
挺简单的，直接看代码吧：<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <input id="btn1" type="button" value="加法...原创 2019-10-14 18:15:39 · 568 阅读 · 0 评论 -
HTML应用开发基础篇 - JavaScript ：闭包与其解决方式
先来看下下面这个例子：<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> </head> <body> </body> <script type="text/javascrip...原创 2019-10-13 23:20:28 · 224 阅读 · 0 评论 -
HTML应用开发基础篇 - JavaScript ：object对象与字符串的转换
object 本身是一个函数，可以当作工具方法使用，将任意值转为对象。这个方法常用于保证某个值一定是对象。如果参数为空（或者为 undefined 和 null），undefined() 返回一个空对象。先说下一个简单 object 对象的创建：<!DOCTYPE html><html> <head> <meta charset="UTF...原创 2019-10-13 23:05:09 · 746 阅读 · 0 评论 -
HTML应用开发基础篇 - JavaScript ：Js作用域
这里也只是说一下JavaScript中常用的语法知识，如果想深入学的，分享你们个电子书籍：资源分享 。今天老师给我们讲了Js作用域的使用，讲了一堆还是没弄明白具体是干什么的，后来老师直接敲了几行代码，就差不多似懂非懂了。但我后来去查了查资料，发现别人的有关JS作用域的跟我们老师讲的很不一样，我这里就先记一下老师讲的，先放代码：<!DOCTYPE html><htm...原创 2019-10-13 19:51:12 · 148 阅读 · 0 评论 -
HTML应用开发基础篇-Canvas载入图片
前面已经把 Canvas一些常用的用法都介绍完了，这里最后提一下 Canvas如何从外界导入图片。在以前我们是直接使用的img标签：<img src="img/bgClock.png" />这里介绍下另一种使用：<!DOCTYPE html><html> <head> <meta charset="UTF-8"&...原创 2019-09-30 13:25:46 · 833 阅读 · 0 评论 -
HTML应用开发基础篇-Canvas动画（钟表）
前面做过了小球的无规则运动，算是已经开始接触了canvas动画的一些语法，这里再说几个其他经常用到的，顺便做一个动态的钟表。做钟表是通过旋转画布来实现的，这里用到这几个方法：scale() 、translate()和rotate() 。rotate()是用来旋转当前的绘图角度，translate()则是移动设置画布上的（0,0）位置，如果默认不改则就是左上角处，scale()则...原创 2019-09-23 23:17:38 · 260 阅读 · 0 评论 -
HTML应用开发基础篇-Canvas动画（小球）
前面介绍了使用canvas来画一些图形，这里将介绍如何使用canvas去制作动态图形。见代码：<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> c...原创 2019-09-23 18:34:42 · 303 阅读 · 0 评论 -
HTML应用开发基础篇-Canvas画布
具体也不详细说那么多，直接看代码吧：<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>canvas基础操作</canvas></title> <style type="text/css"> canvas{ ...原创 2019-09-09 13:28:36 · 219 阅读 · 0 评论 -
HTML应用开发基础篇-简单网页
大一学的 web编程，到大三了全给忘了，这个学期开的H5这门课听的是一头雾水，还是没事的时候多看看书，把以前的东西找回来。这里呢是第一节课老师留的练习，确实不难，只不过全给忘了怎么做，做一下笔记好好记着。内容很简单，做一个登录框的小网页，用户名和密码要有不能为空的提示，账号：HTML，密码：123456，账号或密码错误不允登录。代码如下：<!DOCTYPE html>...原创 2019-09-08 09:44:38 · 189 阅读 · 0 评论