Web前端
ACGuan
愿与世界IT技术爱好者共同学习,愿结交天下英雄好汉。
展开
-
跨域通信方式示例代码
<script type="text/javascript"> // jsonp({ // data: { // // }, // }); </script> <script type="text/javascript"> /** * 跨域通信的几种方法 */ // jsonp工作原理,参考jsonp.js /.转载 2021-12-09 13:06:06 · 186 阅读 · 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 · 267 阅读 · 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 · 1475 阅读 · 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 · 442 阅读 · 0 评论 -
uniapp navigator动态加参数
代码示例如下:<navigator :url="'/pages/chat?id='+item.id">原创 2020-12-02 14:42:30 · 2822 阅读 · 0 评论 -
跨域解决方案
原创 2020-11-17 11:16:45 · 77 阅读 · 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 · 771 阅读 · 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 · 318 阅读 · 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 · 115 阅读 · 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 · 374 阅读 · 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 · 99 阅读 · 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 · 408 阅读 · 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 · 192 阅读 · 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 · 89 阅读 · 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 · 236 阅读 · 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 · 237 阅读 · 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 · 204 阅读 · 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 · 4087 阅读 · 0 评论 -
IE兼容
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../images/1.jpg',sizingMethod='scale');原创 2020-06-19 18:47:42 · 112 阅读 · 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 · 249 阅读 · 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 · 180 阅读 · 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 · 752 阅读 · 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 · 694 阅读 · 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 · 591 阅读 · 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 · 243 阅读 · 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 · 310 阅读 · 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 · 229 阅读 · 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 · 167 阅读 · 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 · 2743 阅读 · 0 评论 -
Sublime Text 3 智能提示JS代码
Sublime Text3自动提示JS代码,需完成以下步骤:原创 2017-03-02 23:31:07 · 3993 阅读 · 1 评论 -
Sublime Text3 JSON格式化插件JsFromat
Sublime Text3 JSON格式化插件JsFromat原创 2017-03-03 23:04:00 · 1946 阅读 · 0 评论 -
Sublime Text3 安装jQuery,Js,html5,JsFormat提示补全插件等相关方法
安装Sublime Text提示补全插件方法如下: 1. 点击菜单栏里的Preferences,查看里面是否有Package Control; 2.如果没有进行以下操作,用快捷键ctrl+'~'键打开show control命令行界面,执行以下命令: import urllib.request,os;pf = 'PackageControl.sublime-pac...原创 2017-03-04 19:02:31 · 8310 阅读 · 0 评论 -
JavaScript上下无缝滚动
JavaScript上下无缝滚动JavaScript代码如下:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>JavaScript上下滚动</title> <style type="text/原创 2018-05-23 17:24:56 · 847 阅读 · 0 评论 -
用JavaScript判断使用哪种浏览器或语言
<!DOCTYPE html><html><head> <title>用JavaScript判断使用哪种浏览器或语言</title></head><body> <script type="text/javascript"> // let {keys, values,转载 2018-06-29 11:34:37 · 714 阅读 · 0 评论 -
select选中option触发事件
<select id="selectId"> <option value="a">选项一</a> <option value="b">选项二</a> <option value="b">选项三<原创 2018-07-24 15:58:09 · 11342 阅读 · 0 评论 -
自定义下拉菜单
1.第一种自定义下拉菜单 <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title></title> <style type="text/css">原创 2018-07-24 16:09:17 · 886 阅读 · 0 评论 -
HTML5 Canvas
一、canvas简介 <canvas> 是 HTML5 新增的,一个可以使用脚本(通常为JavaScript)在其中绘制图像的 HTML 元素。它可以用来制作照片集或者制作简单(也不是那么简单)的动画,甚至可以进行实时视频处理和渲染。 它最初由苹果内部使用自己MacOS X WebKit推出,供应用程序使用像仪表盘的构件和 Safari 浏览器使用。 后来,有人通过Geck...转载 2018-07-24 16:48:58 · 771 阅读 · 0 评论 -
原生Ajax get和post方法请求及对其进行封装
// post方法请求function loadX() { var xmlhttp; if (window.XMLHttpRequest) { // IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码 ...原创 2018-07-25 14:45:11 · 2011 阅读 · 0 评论 -
鼠标在浏览器内禁用右击操作
鼠标右击事件onmousedownwindow.onmousedown = function(){}右键禁用实现操作如下:document.oncontextmenu = function(e){ return false; }浏览器防止复制操作如下:document.onselectstart = function(e){return false;}...原创 2018-07-31 16:16:20 · 947 阅读 · 0 评论 -
如何使用CSS3更改radio的颜色和样式
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> .demoHidden{ display: none; }原创 2018-08-08 17:16:45 · 11261 阅读 · 3 评论