学习
关注
分享
扫一扫
文章平均质量分 52
OrdnAry
这个作者很懒，什么都没留下…
展开
-
学习canvas（一）：用线画出正方形和三角形
【代码】学习canvas（一）：用线画出正方形和三角形。原创 2022-10-26 18:59:28 · 400 阅读 · 1 评论 -
git仓库基本使用
git仓库的一些基本使用1.克隆git项目git clone git@github.com:自己用户名/项目名称.git2.查看状态gut status3.将文件添加到暂存区添加指定目录到暂存区，包括子目录：git add [dir]添加当前目录下的所有文件到暂存区：git add .4.将暂存区内容添加到本地仓库中提交暂存区到本地仓库中:git commit -m '内容'5.分支5.1创建分支git branch mybranch（分支名字）5.2.查看分支原创 2021-05-12 22:30:04 · 219 阅读 · 0 评论 -
原生JSbanner图实现滑动轮播图和淡入淡出轮播图
滑动轮播图<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Docu原创 2021-03-30 22:23:12 · 348 阅读 · 0 评论 -
Vue----------学习用vuex中的state、mutations和getters实现一些功能
store中的index.jsimport Vue from 'vue'import Vuex from 'vuex'Vue.use(Vuex)export default new Vuex.Store({ state: { counter: 1000, students: [{ id: 110, name: 'why', age: 18 }, { id: 111, nam原创 2021-03-11 20:48:02 · 146 阅读 · 0 评论 -
Vue------用vuecli做一个底部菜单栏的实现
App.vue<template> <div id="app"> <router-view></router-view> <main-tab-bar></main-tab-bar> </div></template><script>import MainTabBar from "./components/mainTabBar/MainTabBar";export de原创 2021-03-08 20:02:29 · 437 阅读 · 1 评论 -
Vue------学习 组件之间的通信 父传子 结合一个计数器的实现
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body> <div id="app"> <cpn :mycounter="counter"></cpn> <div> <h2&g原创 2021-02-19 13:28:55 · 170 阅读 · 0 评论 -
Vue学习------ 写一个简单的图书购物车
CSStable { border: 1px solid #e9e9e9; border-collapse: collapse; border-spacing: 0; } th, td { padding: 8px 16px; border: 1px solid #e9e9e9; text-align: left; } th { background-color: #00eeee; color: #5c6b77;原创 2021-02-18 16:08:14 · 296 阅读 · 0 评论 -
Vue学习------用v-bind和 v-for实现点击元素让它变为红色 和计算属性的使用
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><style> .color{ color: red; }</style><div id="app"> <ul> <!--&原创 2021-02-09 13:49:50 · 348 阅读 · 1 评论 -
Vue学习------v-for 列表的使用 和 v-on 点击加减数字
v-for 列表的使用<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><div id="app"> <ul> <li v-for="item in shuzu">{{item}}<原创 2021-02-04 19:00:45 · 574 阅读 · 0 评论 -
用 gulp require.js 和 jQuery 写一个小米项目之-----滚动商品和下面商品加载的实现
滚动商品slide.js//滚动商品的函数define(["jquery"],function($){ function download(){ $.ajax({ url:"../data/slide.json", success:function(res){ //获取数据 var slideArr = res.data.list.list;原创 2020-12-14 21:19:34 · 1338 阅读 · 0 评论 -
用 gulp require.js 和 jQuery 写一个小米项目之-----顶部导航栏的实现
nav.js（main.js自己在去配置一下就行了 这里就不放出来了只是多了一个顶部导航的函数）//处理首页的导航部分 声明模块也遵循amddefine(["jquery"],function(){ function download(){ //数据下载 $.ajax({ type:"get", url:"../data/nav.json", success:function(result){原创 2020-12-10 21:42:41 · 336 阅读 · 0 评论 -
用 gulp require.js 和 jQuery 写一个小米项目之-----轮播图和左侧导航栏的实现
gulofile.js中的配置/* 把 .scss文件 => csswenjian =>压缩 => min.css*/ const gulp = require("gulp");const scss = require("gulp-sass");const minifyCSS = require("gulp-minify-css");const rename = require("gulp-rename");gulp.task("scss",function(){原创 2020-12-06 23:13:39 · 9531 阅读 · 0 评论 -
用jQuery 做出放大镜的效果
<!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>原创 2020-09-24 22:18:00 · 281 阅读 · 0 评论 -
用jQuery实现 鼠标拖拽div滑块 选项卡 居中弹窗
鼠标拖拽div滑块<!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&原创 2020-09-20 22:36:03 · 349 阅读 · 0 评论 -
用ajax +bootstrap实现前后端交互之 注册，登录，查询数据，修改和删除数据（css自行下载）
1.1 注册页面 register.html<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <title>注册</title> <link rel="stylesheet" href="../css/bootstrap.min.css"> <style> #register{width: 400px; marg原创 2020-09-07 16:18:36 · 3251 阅读 · 8 评论 -
bootstrap + ajax +php 实现 前后端的交互之查询表数据和插入数据
查询数据的php页面<?php header('content-type:text/html;charset="utf-8"'); /* 连接数据库 天龙八部 */ /* //1.连接数据库 第一个参数：连接数据库IP 第二个参数：用户名 第三个参数：密码*/ $link = mysql_connect("localhost","root","root");原创 2020-09-05 17:09:17 · 754 阅读 · 0 评论 -
用ajax实现post和get提交 实现前后端交互
封装ajax_回调函数.html 页面<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script>原创 2020-09-05 17:02:00 · 380 阅读 · 0 评论 -
用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> <style> *{margin: 0px;原创 2020-09-04 14:59:15 · 936 阅读 · 1 评论 -
用js实现banner图效果
函数startMove的实现function startMove(node, cssObj, complete){//complete = show; clearInterval(node.timer); node.timer = setInterval(function(){ var isEnd = true; //假设所有的动画都到达目的值。 for(var attr in cssObj){ var iTarget = cssO原创 2020-09-03 14:43:57 · 1676 阅读 · 0 评论 -
用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> <style>原创 2020-08-30 17:17:11 · 1049 阅读 · 0 评论 -
用原生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> <style> *{margin: 0;paddin原创 2020-08-30 17:00:28 · 459 阅读 · 0 评论 -
web前端之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> <style> div{width: 100px;原创 2020-08-30 13:12:36 · 207 阅读 · 0 评论 -
web前端多物体多运动
多物体多运动的一个样式<!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> div{w原创 2020-08-29 14:48:00 · 250 阅读 · 0 评论 -
缓冲菜单（滑块根据滚轮滑动一直滑动到页面右边的中间）
<!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> #menu{width: 100px原创 2020-08-29 14:45:34 · 236 阅读 · 0 评论 -
用事件委托 实现点击li会把背景变红
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"/> <meta name="viewport" content="width=device-width, initial-scale=1.0"/> <meta http-equiv="X-UA-Compatible" content="ie=edge"/>原创 2020-08-27 15:59:26 · 769 阅读 · 0 评论 -
div滑块的缓冲运动
<!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> #div1{width: 100px原创 2020-08-27 15:40:40 · 273 阅读 · 0 评论 -
鼠标移入分享 菜单移出来 鼠标移出 菜单回去
<!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> *{margin: 0px; pad原创 2020-08-27 14:20:27 · 176 阅读 · 0 评论 -
正则表达式判断简单的表单验证
<!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> #div1{width: 250px原创 2020-08-24 15:03:46 · 232 阅读 · 0 评论 -
类似购物车的放大镜效果
<!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> *{margin: 0;paddin原创 2020-08-23 15:40:57 · 256 阅读 · 0 评论 -
鼠标拖拽div快在页面上移动
<!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> *{margin:0;paddin原创 2020-08-22 14:56:06 · 189 阅读 · 0 评论 -
跟随鼠标一串的效果
<!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> div{width:10px;hei原创 2020-08-22 14:18:24 · 222 阅读 · 0 评论 -
鼠标移入div 让div跟着鼠标移动
<!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> *{ mar原创 2020-08-19 16:48:48 · 288 阅读 · 0 评论 -
添加文本内容到下面并且可以删除和复制
<!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> #div1{width: 400px原创 2020-08-18 14:58:51 · 234 阅读 · 0 评论 -
一秒修改一次div内文本颜色和文字大小，当增大了6次以后, 文字大小开始缩小,缩小6次,文字再开始增大。
<!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> #a{width:300px;he原创 2020-08-18 13:30:07 · 519 阅读 · 0 评论 -
用JavaScript实现秒表的开始暂停和复位
<!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> #div1{width: 100px原创 2020-08-17 10:49:27 · 832 阅读 · 0 评论 -
用bootstrap框架做一个简单粗糙的博客
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="css/boot转载 2020-08-11 17:15:21 · 293 阅读 · 0 评论 -
用grid组成 骰子 并且让骰子旋转
<!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> *{margin: 0;paddin原创 2020-08-09 16:35:05 · 218 阅读 · 0 评论 -
上下左固定 中间内容自适应（用BFC实现）
/*原理：利用BFC中的overflow：auto来实现中间内容自适应头部 左面和 底部都设置好宽高 中间用四则运算calc计算内容的高度 宽度不用设置使用overfl：auto自适应就可实现。*/<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, ini原创 2020-08-07 17:58:05 · 218 阅读 · 0 评论 -
正达管理后台首页的粗糙实现（练习）
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="./iconfo原创 2020-08-06 20:51:36 · 445 阅读 · 0 评论 -
博文尚美页面的粗糙展现（练习）
<!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> *{margin: 0;padding: 0原创 2020-08-05 16:08:04 · 388 阅读 · 0 评论