zl_41123262-CSDN博客

原创 vue 实现简易轮播图

需求：图片每隔一段时间自动进行切换点击前进按钮，会切换下一张图片；点击后退按钮，会切换到前一张图片鼠标悬停到分分页器（小圆点）时，会切换到对应的图片Html 部分： <div id="app"> <div class="container"> <div class="arrow arrowLeft" @click="prev"><</div> <div class="

2020-07-24 10:49:16 375

原创 Vue 综合练习

需求：根据数据生成一个列表，显示标题、类型、选项、分值得到每个题型的数量及总分、分数占比如单选题 2题 6分 45%<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title&g

2020-07-24 09:29:01 197

原创 Vue 计算属性过滤器监听器

计算属性依赖其他已经存在的变量 <div id="app"> <input type="text" v-model='firstname'> <input type="text" v-model='lastname'> {{fullname}} <hr> {{reversedFullname}} </div> <script> new Vue({ .

2020-07-24 09:28:20 110

原创 Vue基础

Vue 基础内容基本结构<div id="app"> {{username}} </div><script> var app = new Vue({ el:'#app', data() { return { username:'张三' } })</script>常用指令指令书写位置：任意 html 元素的开始标签内注意：一个

2020-07-24 09:27:28 101

原创 jquery 生成表格

通过 jQuery 生成表格使用 jquery 生成一个三行三列的表格 $(function () { // on 委托将 click 事件委托给父级 $('.container').on('click','.del',function(){ // 点击确认即删除此时的数据点击取消不删除 if(confirm('确认要删除吗？')){

2020-07-03 10:48:45 1258

飞机大战案例需求：页面中存在飞机、子弹、敌机，敌机不断往下落下，飞机只在限定范围内移动，并且按下键盘中某个键值时开始发射子弹当子弹射中敌机时，开始得分当敌机射中飞机时，游戏结束，页面重新加载<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, init

2020-07-03 10:48:26 133

原创日历demo

通过 jquery 生成简单日历<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>日期</title> <style> * {

2020-07-03 10:48:03 102

原创 ajax

ajax 格式原生 js 写法let ajax = new XMLHttpRequest()// open 方法以 get 方式打开路径为 ./a.txt 异步方式(异步为 true,同步为 false)ajax.open('GET','./a.txt',true)// 发送请求ajax.send()// 监听事件ajax.onreadystatechange = () =>{// 完成并且成功 if(ajax.readyState === 4){

2020-07-03 10:47:40 78

原创 js 特效demo

拖拽效果<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>拖拽效果demo</title> <style> .layer {

2020-06-29 17:12:25 122

原创 jQuery 案例

tab 切换 <body> <div class="container"> <ul class="title"> <li class="active">蛋糕</li> <li>冰淇淋</li> <li>巧克力</li> </ul> <.

2020-06-29 17:11:43 114

原创 js 进度条demo

进度条案例<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>进度条demo</title> <style> *{

2020-06-25 17:12:39 107

原创 js 滚轴事件demo

滚轴事件案例<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>滚轴demo</title> <style> *{

2020-06-25 17:07:22 109

原创鼠标跟随效果demo

鼠标跟随<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>鼠标跟随demo</title> <style type="text/css"> .kuang{ width: 30px; height: 30px; background-color: red; background-size: 100% 10

2020-06-23 10:35:44 137

原创 Cookie

Cookie设置 cookiefunction setCookie(key,val,days){ let now = new Date(); now.setDate(now.getDate() + days); document.cookie = `${key}=${val};expires=${now.toUTCString()}` }setCookie('count',22,7);setCookie('nickname','ace',7);setCookie('age',18,3)

2020-06-23 10:35:21 78

原创字符串内置方法

常用的字符串方法concat() 字符串拼接var str1 = 'hello';var str2 = 'world';str1.concat(str2);charAt()、chartCodeAt()var s = str3.charAt(index);var str4 = '你好';var m = str4.charCodeAt()charAt() 查找字符串中某一下标所对应的元素charCodeAt() 获取字符的 unicode 编码replace()

2020-06-23 10:34:58 119

原创数组内置方法

常用的数组方法Array,concat() 合并两个数组var myArr = arr1.concat(arr2);Array.join() 将数组转换成字符串var myArr = arr1.join();Array.reverse() 将数组元素顺序反转（原数组会发生改变）var myArr = arr1.reverse(); Array.slice() 数组切割var myArr = arr1,slice(s,e);参数s：代表

2020-06-23 10:34:38 165

qq_41123262的博客