_有光-优快云博客

原创 TodoList代码优化

(TodoList.js)import React, {Component,Fragment} from 'react';import TodoItem from './TodoItem';import './style.css';class TodoList extends Component { // 当我们使用组件的时候，constructor函数优于其他任何函数自动的最...

2019-05-20 21:44:54 481

原创通过组件传值的方式实现Todolist新增删除功能

( 父组件TodoList.js）import React, {Component,Fragment} from 'react';import './style.css';import TodoItem from './TodoItem';class TodoList extends Component { // 当我们使用组件的时候，constructor函数优于其他任何函...

2019-05-20 20:46:01 283

原创 Todolist实现新增删除功能

(index.js)import React from 'react';import ReactDOM from 'react-dom';import Todolist from './Todolist';// ReactDOM是第三方模块，render这个方法帮助我们把App这个组件挂载到id为root这个节点上//<App/>为jsx语法，如果使用jsx语法一定要在对应...

2019-05-20 16:13:05 1298

原创 computed计算属性的使用

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script src="../vue-dev/vue-dev/dist/vue.min

2019-03-11 16:40:41 1554

原创 watch监视路由地址改变

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script src="../vue-dev/vue-dev/dist/vue.min

2019-03-11 16:08:04 464

原创使用keyup事件实现名字案例

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script src="../vue-dev/vue-dev/dist/vue.min

2019-03-11 15:27:17 383

原创使用children属性实现路由嵌套

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body> <div i

2019-03-11 13:48:13 1175

原创为路由切换启动动画

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> .myactive{ fon

2019-03-11 11:09:21 184

原创路由的基本使用

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><div id=&q

2019-03-11 10:48:59 154

原创评分效果实现

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> * { margin: 0;

2019-03-08 20:55:12 852

原创品牌案例——添加删除功能，根据关键词实现数组过滤

（1）品牌案例<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href=&qu

2019-03-08 20:54:34 258

原创验证表单（正则表达式）

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> body { backgro

2019-03-08 20:53:09 547 2

原创 transition-group实现列表动画（增加、删除）

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="anima

2019-03-08 17:07:01 2256

原创使用过渡类名实现动画

（1）使用过渡名实现动画（手写及自定义）<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> .v-enter, .v-leav...

2019-03-08 16:22:05 558

原创品牌列表------完成添加/删除功能

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="boots

2019-03-07 21:43:37 260

原创从数据库中获取列表

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="boots

2019-03-07 20:54:39 911

原创 Vue.js 小demo练习

（1）跑马灯效果<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> [v-cloak]{

2019-03-01 23:02:45 2182 1

原创初步实现Apache功能

var http = require("http");var fs = require("fs");var server = http.createServer();var www = "F:/WebStorm/JS/www";server.on("request",function (req,res) { var url = req.url; if (url ==="/"...

2019-01-29 17:21:14 273

原创 Node.js 中模板引擎

1. art-template不仅可以在浏览器中试用，也可在node使用首先，在要执行的文件目录下安装art-template，安装步骤: 在命令行所在文件后面输入：npm install art-template然后你会发现，所在文件下会多一个目录：node_modules这个就是我们所要找的文件，即在浏览器中需要引用这个文件；<!DOCTYPE html>...

2019-01-09 17:20:00 1333

原创 Node.js 结合fs发送文件中的内容

// 加载http核心模块var http = require("http"); // 加载fs核心模块var fs = require("fs"); // 使用 http.createServer()方法创建一个web服务器var server = http.createServer(); // 注册request请求事件，当客户端请求过来，就会触发服务器的reque...

2019-01-03 16:09:47 344

原创 jQuery案例

（1）淘宝精品展示效果实现<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"&

2018-12-10 22:02:53 353

原创 BOM定时器案例

运用BOM定时器的两个对象方法：（一）window. setInterval（函数，时间）； // 页面加载完毕后，过了指定的时间，执行一次函数代码，再过指定时间再执行；依次反复； window.clearInterval (要清理的定时器id值)；1. 要实现效果：点击按钮“摇一摇”，图片不规则距离动；点击按钮“停止”，图片不动。<!DOCTYPE...

2018-12-04 21:11:07 458

原创 DOM案例（4）

（1）封装节点兼容代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"&am

2018-12-03 21:03:00 186

原创 DOM（3）节点案例

(case 1)<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"&gt

2018-11-30 22:02:56 276

原创 DOM案例（2）

（1）====================列表高亮显示==================== <ul> <li>周杰伦</li> <li>蔡依林</li> <li>张韶涵</li> &

2018-11-29 22:16:52 213

原创 DOM案例（1）

需要说明的是这里的H1.js文件为：function my$(id) { return document.getElementById(id);}（case 1）======================点击按钮，弹出对话框===============<input type="button" value="按钮" id="btn"><scrip...

2018-11-28 21:26:37 132

原创字符串案例

案例1. 找到这个字符串中的每个字符串出现了多少次<script> var str = "hello wod odd ott fbo nhyo"; var key = "o"; // 开始的位置 var index = 0; // 要找的字符串 while ((index =str.index...

2018-11-22 16:38:57 777

原创随机产生十六进制所对应的颜色

=================随机产生十六进制所对应的颜色====================<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> &am

2018-11-21 17:37:07 1204

原创函数实例mark

<script> function getArraySumandMaxandMin(array) { var sum = 0; // 变量初始化 var max = array[0]; // ...

2018-11-19 15:12:58 886

原创冒泡法排序法

2018-11-18 19:27:00 133

原创 JS中数组实现（倒序遍历数组，数组连接字符串）

// =================== 求最大值===================================== <script> var arr = [10,35,765,21345,678,89]; var max = arr [0]; for (var i=0;i< arr.length;i++) {...

2018-11-14 13:36:21 10678

原创斐波那契数列

斐波那契数列：这个数列从第3项开始，每一项都等于前两项之和。1, 1, 2, 3, 5, 8, 13, 21, 34, 55, 89, 144, 233，377，610，987，1597，2584，4181，6765，10946，17711，28657，46368........代码部分：三个变量看作三个盒子。<script> var num1 = 1; // ...

2018-11-12 18:50:00 307

原创九九乘法表（表格形式）

【code mark】<script> document.write("<table border='1' cellpadding='0' cellspacing='0'>"); for(var i=1;i<=9;i++){ document.write("<tr>"); for(var j=1;j&l...

2018-11-07 19:15:02 2197

原创 JS第一天——交换两个变量的值的方法

第一次接触了JS，大体感受是涉及到的知识点跟Java有点类似。因为之前接触过java，所以相对而言，学JS并没有那么陌生。今天先mark下【交换两个变量的值方式】，共三种方法。（1）使用第三方的变量进行交换（这个应该不陌生，学过java，c，c++的应该都知道）<script> var num1=10; var num2=20; var temp;...

2018-11-02 15:38:03 1068

原创很好玩的一种效果mark

这样的样式大家应该在很多网站都见到过，要实现这样的效果，我们首先先来分析下：（1）大体的思路：用ul>li*10——每个li左浮动——外边距调（这个应该很easy）先把每个li的位置调好（2）然后是设置每个li，一个li会了，之后的几个都一样。一个li分为三部分，如下：第一部分（上）：类pic——放图片；第二部分（中）：类pic-title——放Think PHP 5....

2018-10-31 18:37:58 171

原创 CSS新特性——旋转

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css">

2018-10-30 19:34:50 572

原创仿土豆做法（display继模式转化后的第二个作用：显示与隐藏）

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css">

2018-10-18 10:30:47 186

原创 CSS知识点1：块元素/行内元素/行内块元素的区别

HTML可以将元素分类方式分为行内元素、块状元素和行内块状元素三种。首先需要说明的是，这三者是可以互相转换的，使用display属性能够将三者任意转换：　　(1)display:inline;转换为行内元素　　(2)display:block;转换为块状元素　　(3)display:inline-block;转换为行内块状元素1.行内元素　　行内元素最常使用的就是span，其他的只...

2018-10-17 13:39:27 1262

空空如也

空空如也