Web前端
关注
分享
扫一扫
ACGuan
愿与世界IT技术爱好者共同学习，愿结交天下英雄好汉。
展开
-
跨域通信方式示例代码
<script type="text/javascript"> // jsonp({ // data: { // // }, // }); </script> <script type="text/javascript"> /** * 跨域通信的几种方法 */ // jsonp工作原理，参考jsonp.js /.转载 2021-12-09 13:06:06 · 228 阅读 · 0 评论 -
HTML页面布局方式
<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <title></title> <style> html *{ margin:0; padding:0; } .l.原创 2021-11-20 18:50:26 · 322 阅读 · 0 评论 -
JavaScript实现春节倒计时
代码如下：<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> </head> <body> <h1>2021年还剩<span id="id1"></span>天<span id="id2"></span>小时<span id="id3"&g原创 2021-01-15 11:41:28 · 1553 阅读 · 0 评论 -
Vue不通过路由传参
A页面"方法名": function(){ uni.$emit('update',{msg:'页面更新'})}B页面onShow: function () { uni.$on('update',function(data){ console.log('监听到事件来自 update ，携带参数 msg 为：' + data.msg); });}原创 2021-01-06 17:00:22 · 514 阅读 · 0 评论 -
uniapp navigator动态加参数
代码示例如下：<navigator :url="'/pages/chat?id='+item.id">原创 2020-12-02 14:42:30 · 2991 阅读 · 0 评论 -
跨域解决方案
原创 2020-11-17 11:16:45 · 105 阅读 · 0 评论 -
select更改默认样式
代码示例如下：<!DOCTYPE html><html><head> <title></title> <style type="text/css" media="screen"> *{ margin:0; padding:0; } .selectBox{width:242px;height:56px;margin-right:36px;border-radius:4px;display: inlin原创 2020-11-14 15:35:20 · 885 阅读 · 0 评论 -
小程序与H5如何互相跳转
一、小程序跳转H5<view class="page-body"> <web-view src="https://xxx.com/test.html"></web-view></view>二、H5跳转小程序<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>h5跳转小程原创 2020-11-02 10:42:10 · 384 阅读 · 0 评论 -
JavaScript时间戳格式转换
function formatDate(value) { let date = new Date(value); let y = date.getFullYear(); let MM = date.getMonth() + 1; MM = MM < 10 ? ('0' + MM) : MM; let d = date.getDate(); d = d < 10 ? ('0' + d) : d; .原创 2020-09-16 16:30:23 · 148 阅读 · 0 评论 -
swiper双滑动
第一种，如下代码示例<!DOCTYPE html><html><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <link rel="stylesheet" typ.原创 2020-09-12 16:44:22 · 434 阅读 · 0 评论 -
JavaScript实现排序
var arr = [ {date: "2020年3月12日"}, {date: "2020年1月11日"}, {date: "2020年4月21日"}, ]; for(var i = 0; i < arr.length; i++){ var temp = arr[i].date.match(/\d+/g); var day = new Date(temp[0], temp[1]-1, temp[2]); console.log(day); arr[i].date =.原创 2020-08-06 15:25:05 · 137 阅读 · 0 评论 -
JavaScript实现购物车
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>购物车</title> <!-- <link rel="stylesheet" href="css.css"> --> <style type="text/css" media="screen"> *{margin:0.原创 2020-07-24 11:23:40 · 468 阅读 · 0 评论 -
placeholder字体颜色兼容
/* WebKit browsers */input::-webkit-input-placeholder, textarea::-webkit-input-placeholder { color: #ccc;}/* Mozilla Firefox 4 to 18 */input:-moz-placeholder, textarea:-moz-placeholder { color: #ccc;}/* Mozilla Firefox 19+ */...原创 2020-07-22 13:17:18 · 231 阅读 · 0 评论 -
JavaScript上拉加载
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css" media="screen"> .box{ height:2000px; } </style></head><body> <div cl.原创 2020-07-20 13:27:06 · 109 阅读 · 0 评论 -
JavaScript判断滚动条宽度
function getBarWidth(){ let outDiv = document.createElement("div"); outDiv.style.width = "100px"; outDiv.style.position = "absolute"; outDiv.style.top = "-9999px"; document.body.appendChild(outDiv); let widthnobar = outDiv.offsetWi.原创 2020-07-17 15:58:58 · 283 阅读 · 0 评论 -
实现购物车功能
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style>.fl{ float: left;}.fr{ float: right;}blockquote, body, dd, div, dl, dt, fieldset, form, h1, h2, h3, h4, .原创 2020-07-07 15:16:03 · 274 阅读 · 0 评论 -
Vue全选示例
<div> <div> <input type="checkbox" @click="checkAll" v-model="checked"> <span>全选</span> </div> <ul> <li v-for="(item,index) in list" :key="index" style="margin-top:20px;"> <input type="checkbo.原创 2020-07-06 17:10:09 · 242 阅读 · 0 评论 -
弹性布局怎样排两行
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> .row { width: 300px; display: flex; flex-wrap: wrap; align-content: center; }.原创 2020-07-02 10:32:23 · 4342 阅读 · 0 评论 -
IE兼容
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../images/1.jpg',sizingMethod='scale');原创 2020-06-19 18:47:42 · 145 阅读 · 0 评论 -
JavaScript 图片放大
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <style> * {margin: 0;padding: 0;} img { vertical-align: top; } .box { .原创 2020-06-19 13:38:25 · 301 阅读 · 0 评论 -
JavaScript 封装，继承，原型链
js是一门基于对象的语言，但它没有完整的class概念，至少在ES5中是没有的封装--原始模式：Cat = {name : '',color : ''};let cat1 = {};cat1.name = '大花';cat1.color = 'white';let cat2 = {};cat2.name = '二哈';cat2.color = 'yellow';此时js中没有类的概念，可以看出：两个实例的猫 cat1 和 cat2 没有任何联系...原创 2020-06-12 15:18:11 · 221 阅读 · 0 评论 -
JavaScript上传图片方式
第一种：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> #preview{ width:200px; margin-bottom:10px; } </style></head><body> <input原创 2020-06-12 15:11:27 · 849 阅读 · 0 评论 -
JavaScript文件处理 File API
JavaScript文件处理 File API支持File API的浏览器有IE10+,Firefox3.5+，Opera10.6+，Safari5+,Chrome。1.在表单元素上<input type="fiel" name="file" id="file" />，可以选择一个或多个文件，通过获取文件元素对象的集合files，来操作每一个对象files[i]；用法：DOM操作 var files=document.getElementById("file"); var.原创 2020-06-11 16:28:56 · 812 阅读 · 0 评论 -
JavaScript音乐播放
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <title>Document</title&.原创 2020-05-12 17:59:06 · 645 阅读 · 0 评论 -
找出两个排序数组中的中位数
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head><body> <script> var findMedianSortedArrays = function(nums1, nums2) { for(i=0;i<nums2.length;...原创 2020-05-09 18:48:20 · 274 阅读 · 0 评论 -
JavaScript表格头部拉伸
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> #carTable{width:100%;} td{text-align:center;} </style></head><body> <table id="carTabl.原创 2020-05-09 17:38:32 · 376 阅读 · 0 评论 -
JavaScript判断IE浏览器版本
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>判断IE浏览器版本</title></head><body> <script> var browser = navigator.appN...原创 2020-04-26 16:59:14 · 265 阅读 · 0 评论 -
JavaScript 日期
<!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-Com...原创 2020-04-21 14:18:03 · 205 阅读 · 0 评论 -
JavaScript 如何手动触发窗口滚动事件
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> .box{height:2000px;} </style></head><bo...原创 2019-12-04 13:25:43 · 3041 阅读 · 0 评论 -
input文本框宽度越界的解决方法
input{-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;}原创 2019-09-11 17:12:23 · 619 阅读 · 0 评论 -
JavaScript按住Enter键实现移到下一个焦点
代码示例如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> *{margin:0;padding:0;list-style: none;} .box{f...原创 2019-08-22 15:16:38 · 1055 阅读 · 0 评论 -
JavaScript 在元素前后添加元素
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head><body> <div class="box"> <p>第一选项</p&...原创 2019-08-21 14:39:26 · 9977 阅读 · 0 评论 -
JavaScript 笔记（bin)
1、JavaScript splice()方法在循环中只删除一部分解决方法2、JavaScript 在元素前后添加元素3、JavaScript按住Enter键实现移到下一个焦点原创 2019-08-21 14:26:05 · 161 阅读 · 0 评论 -
JavaScript splice()方法在循环中只删除一部分解决方法
splice()方法用于在数组中添加或删除。（注意：此方法会改变原始数组）;代码示例如下：var arr = [{name:'Tom',sex:0},{name:'Jerry',sex:1},{name:'Danny',sex:1},{name:'Jenny',sex:0},{name:'Bob',sex:1},{name:'John',sex:0}]; for(var i = 0; ...原创 2019-08-21 14:17:03 · 2049 阅读 · 3 评论 -
按Enter键向下一个文本框移动
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> </head><body> <form action="" method="get"> <...原创 2019-08-09 17:34:22 · 645 阅读 · 0 评论 -
弹性盒
翻译 2019-08-05 14:49:27 · 183 阅读 · 0 评论 -
小程序配置详解
翻译 2019-08-05 14:38:00 · 449 阅读 · 0 评论 -
JavaScript获取元素方式
//获取IDdocument.getElementById(ID);//获取类名document.getElementsByClassNme(Class);//获取所有inputdocument.getElementsByTagName(input);//获取所有input类型的单选document.querySelectorAll("input[type=radio]")...原创 2019-05-24 11:11:23 · 110 阅读 · 0 评论 -
HTML更改tab键焦点位置
tabindex可以更改TAB键的移动顺序，tabindex的值为负时，将排除在外。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> .boxPare...原创 2019-04-30 10:52:19 · 1098 阅读 · 0 评论 -
JS如何实现禁止内容被复制？
代码如下：document.onselectstart=new Function("event.returnValue=false;");原创 2019-04-15 15:03:49 · 829 阅读 · 0 评论