JS前端学习笔记
每隔一段时间我都会练习一些js小项目,发布在此专栏下。主要是能够督促自己学习编程,不仅仅停留在复制粘贴和基础层面,想向更高层面挖掘自己的潜能,做一个精通的js代码玩家。
摩天仑
这个作者很懒,什么都没留下…
展开
-
每隔几秒执行一次
setIntervalsetInterval(function(){ plus.accelerometer.getCurrentAcceleration( function( a ) { plus.nativeUI.alert( "Acceleration\nx:" + a.xAxis + "\ny:" + a.yAxis + "\nz:" + a.zAxis ); } );},5000)菜鸟教程原创 2021-12-13 15:53:50 · 203 阅读 · 0 评论 -
网页弹窗初识
网页弹窗效果图代码<script> //定义一个全局变量 var subwin = null; setTimeout(function () { //传入三个参数,第一个为链接,第二个为打开方式,第三个为屏幕参数 subwin = window.open('http://mtkjy.top', '_blank', 'width=500,height=300,left=0,to=0'); //移动至居中显示 var x = (wi原创 2021-12-09 18:36:06 · 164 阅读 · 0 评论 -
Vue中使用h5+
1、下载模块npm i vue-awesome-mui -S (如果有淘宝镜像也可使用cnpm i vue-awesome-mui -S,速度会快一些)2、在main.js中引入import Mui from 'vue-awesome-mui'import 'vue-awesome-mui/mui/dist/css/mui.css'Vue.use(Mui)3、代码测试为了方便看出效果,我们可以直接修改组件下的HelloWold组件。在html写页面,在js中写方法,这里我测试了调用摄像头&原创 2021-12-02 10:46:59 · 1567 阅读 · 0 评论 -
组件内slot插槽传值
关于vue插槽slot来回传值问题有些情况下,我们需要将组件内的值传给slot插槽,供使用组件的地方调用,这时候可以给slot一个name属性,在使用组件的地方#name名称接收。<swiper class="swiper" :options="swiperOption" id="cateCard"> <swiper-slide v-for="(category, index) in categories" :key="index"> <slot name="i原创 2021-11-30 10:55:14 · 4182 阅读 · 0 评论 -
vue-awesome-swiper使用
1、官网来自~疆的博客学会swiperOption里的配置项,如一些常用的循环播放,监听事件等<template> <div class="theSwiper"> <swiper :options="swiperOption"> <swiper-slide> I'm Slide 1 </swiper-slide> <swiper-slide> I'm Slide 2原创 2021-11-29 23:44:07 · 860 阅读 · 0 评论 -
通过cookie自定义模板
1、setCookie和getCookie编写源代码来自菜鸟教程function setCookie(cname, cvalue, exdays) { var date = new Date(); date.setTime(date.getTime() + (exdays * 24 * 60 * 60 * 1000)); var expires = "expires=" + date.toGMTString(); document.cookie = cname + "="原创 2021-11-29 11:37:28 · 121 阅读 · 0 评论 -
js正则表达式
括号的作用():表示匹配的字符[]:定义匹配的字符范围{}:匹配的长度(0-9) 匹配 '0-9′ 本身, [0-9] 匹配数字,{1-9} 写法错误[0-9]{0,9} 表示长度为 0 到 9 的数字字符串。var str = '123456asda55'var exp1 = /[0-9]{1,9}/igvar exp2 = /(1|2|3|4|5|6|7|8|9){1,9}/igconsole.log(str.match(exp1));console.log(str.match(原创 2021-11-28 22:53:36 · 178 阅读 · 0 评论 -
简单页面日历
效果展示代码区html<div id="data"> <p> <span id="prev">上一月</span> <span id="year">2022</span> <span id="next">下一月</span> </p> <h5 id="month">原创 2021-11-28 10:36:53 · 315 阅读 · 0 评论 -
简易计算机实现
效果图展示代码展示<!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"> <原创 2021-11-28 10:29:56 · 192 阅读 · 0 评论