JQUERY + JS + CSS
关注
分享
扫一扫
神夜大侠
这个作者很懒，什么都没留下…
展开
专栏收录文章
- 默认排序
- 最新发布
- 最早发布
- 最多阅读
- 最少阅读
-
JS 订单30分钟内完成付款倒计时
//30分钟内完成付款 createtime[0000:00:00 00:00:00] 订单创建时间 limitTimes分钟数 countDown(createtime,limitTimes){ let startTime = new Date(createtime).getTime() / 1000 let endTime = new Date(createtime).setMinutes(new Date(createtime).getMinutes()+limitTimes) .原创 2022-05-07 12:28:58 · 1007 阅读 · 0 评论 -
JS实现二维数组每一列添加一个统计并添加到数组最后一项完美实现
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>JS给二维数组每一列添加统计项完美实现</title> </head> <body> <style> *{ margin:0px; padding:0px; box-sizing: border-box;} ul,li{list-style-type.原创 2022-03-25 17:34:19 · 848 阅读 · 0 评论 -
JS 倒计时使用秒作倒计时实现方案
let end = new Date('2021-12-12 12:00:00') //结束时间let cur = new Date() //当前时间var difftime = parseInt((end - cur)/1000); //转化为秒if(difftime > 0){ this.countDown(difftime)}formatBit (val) { val = +val return val > 9 ? val : '0' + .原创 2021-11-11 10:22:42 · 913 阅读 · 0 评论 -
JQUERY+CSS3实现通用网站二级菜单下拉效果，真正隐藏DIV并实现动画。
1、通常使用CSS3即可实现，但是做不真正隐藏DIV，导致一些BUG，下面使用JQUERY+CSS3的方式真正实现多种下拉效果。<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> </head> <body> <style> *{ margin:0px; padding原创 2021-04-02 17:50:25 · 304 阅读 · 0 评论 -
JS用最简单的方法去除两个数组中重复的元素
用最简单的方法实现数组去重哈哈let arr = ['你好','苛在','不是','我是'];let arr2 = ['你','苛在','不是','我是','不知道','这行好'];let temp = [];arr2.forEach(res=>{ let index = arr.indexOf(res); if(index==-1){ temp.push(res); }}); console.log(temp); ...原创 2020-12-25 11:09:11 · 1734 阅读 · 0 评论 -
使用VUE与JQUERY 结合做后台产品规格处理非常简单的完成
先看实现的效果图在后台项目做规格这一块，如果使用原生JQUERY来写肯定非常麻烦的，JS代码复杂繁多，后面我就想能不能用VUE和JQUERY来实现 ，果然这样是可行的，而且用VUE来做代码量非常的少减省了大量的时间，提交表单仍然用普通提交方式就可以，因为我们的规格数据是以JSON形式保存在表单里面的，直接提交到后台，前端JS取的时候转换一下就OK。一、在产品表 product中建三个字段来保存规格，我们以JSON的形式保存到数据库spec规格类型字段 0单规格，1多规格 ，...原创 2020-09-07 11:21:18 · 430 阅读 · 0 评论 -
小程序webview嵌入H5项目完美实现图片上传至阿里云OSS，上传前实现图片压缩，角度校正。
小程序webview嵌入H5项目完美实现图片上传至阿里云OSS，上传前实现图片压缩，角度校正。实现思路：api是请求接口的IOS角度旋转问题用到的 exif.js/** * Minified by jsDelivr using UglifyJS v3.3.25. * Original file: /npm/exif-js@2.3.0/exif.js * * Do NOT use SRI with dynamically generated files! More informa.原创 2020-09-02 20:27:25 · 2999 阅读 · 3 评论 -
炫酷弹窗插件 hsycmsAlert.js
炫酷弹窗插件 hsycmsAlert.js演示地址介绍包括操作成功，操作失败，LOADING，自定义弹窗，普通弹窗，询问弹窗，提示窗等。安装教程请demo里面的 HTML结构复制到自己项目 再引入JS文件：jquery.js 和 hsycmsAlert.js 样式文件： hsycmsAlert.css使用说明<script> //参数说明 id,文字,方法 //普通弹窗 function alert(txt){ hs原创 2020-09-01 13:45:03 · 1060 阅读 · 0 评论 -
移动端HTML编写字体自适应大小JS，非常实用，最大宽度为750PX
<script> (function (doc, win) { var docEl = doc.documentElement, resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize', recalc = function () { var clientWidth = docEl.clientWidth > 750 ? 750 : docEl.clientWid.原创 2020-08-25 11:52:29 · 1671 阅读 · 0 评论 -
VUE 实现OSS 上传图片并压缩处理，签名由后端返回。
<input type="file" accept="image/*" style="display: none;" @change="change" id="file"> <div class="setting-head" @click="selectImage"> <p><img :src="headimg" alt="...原创 2019-12-10 17:42:23 · 721 阅读 · 0 评论 -
多图上传样式
多图上传样式原创 2017-03-26 00:35:55 · 469 阅读 · 0 评论 -
JQUEYR 实现导航滚动监听简单实现方式
JQUEYR 实现导航滚动监听简单实现方式原创 2017-08-29 09:58:15 · 635 阅读 · 0 评论 -
JQUERY+CSS 神夜下拉框美化代码
JQUERY+CSS 神夜下拉框美化代码.syui-anim{-webkit-animation-duration: .3s; animation-duration: .3s; -webkit-animation-fill-mode: both; animation-fill-mode: both;}.syui-anim-up{ -webkit-animation-name:syui-up; a...原创 2018-05-31 10:33:04 · 283 阅读 · 0 评论 -
vue项目使用WebViewJavascriptBridge 与APP交互JS
1、首先在项目中创建一个JS ，命名为 bridge.js 代码如下：//iosfunction setupWebViewJavascriptBridge(callback) { if (window.WebViewJavascriptBridge) { return callback(WebViewJavascriptBridge); } if (window.WVJBC...原创 2019-04-16 19:12:23 · 5584 阅读 · 6 评论 -
VUE 实现多属性操作，增加删除修改属性。
<!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-...原创 2019-04-26 10:03:29 · 2247 阅读 · 0 评论 -
JQUERY 简单实现滚动条下滑左侧菜单高亮
<div class="pro-item"> <h3>产品详情</h3> <ul> <li>· 外型尺寸</li> <li>· 技术参数</li> <li>· 资料下载</li>...原创 2019-05-09 00:56:32 · 706 阅读 · 0 评论 -
VUE 加入购物车实现多个属性选择，取消选择，最后组合成新的属性数组。
<template> <!-- --> <div class="attrselect"> <template v-for="(item2,index) in goodsAttributes"> <p class="p1">{{item2.name}}</p&...原创 2019-05-07 21:24:55 · 847 阅读 · 0 评论 -
VUE 实现下拉分页加载更多功能
<template> <section class="dissection" id="dissection"> <div class="wraper" v-if="!nodata"> <ul class="disList"> <li v-for="(item,index) in...原创 2019-05-18 10:26:45 · 5736 阅读 · 0 评论 -
微信公众号获取网页授权前端和后端方法
public function getoppId(){ header("Access-Control-Allow-Origin:*"); header('Access-Control-Allow-Methods:*'); header('Access-Control-Allow-Headers:x-requested-with, content-type'); $co...原创 2019-07-12 11:11:34 · 5262 阅读 · 0 评论 -
JS常用日期计算与格式化操作方法大全
<script> //时间格式化 formatDate(date, fmt) { if (/(y+)/.test(fmt)) { fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length)); } ...转载 2019-07-12 15:14:50 · 343 阅读 · 0 评论 -
js 图片按宽高比例进行自动缩放
/** * 图片按宽高比例进行自动缩放 * @param ImgObj * 缩放图片源对象 * @param maxWidth * 允许缩放的最大宽度 * @param maxHeight * 允许缩放的最大高度 * @usage * 调用：<img src="图片" onload="javascript:DrawImage(this,1...转载 2019-07-24 09:01:08 · 1304 阅读 · 0 评论 -
腾讯地图API打开页面获取精准定位信息JS代码
<!DOCTYPE html><html><head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>前端定位模块</title> <meta name="viewport" content="...原创 2019-07-25 18:30:21 · 4675 阅读 · 1 评论 -
JS上传图片前根据图片尺寸压缩后再上传
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <!-- layui框架 --> <link rel="stylesheet" href="layui/css/layui.css"> <script type="text/...原创 2019-08-05 13:50:29 · 490 阅读 · 0 评论 -
VUE 实现加入购物车抛物线动画
import $ from 'jquery'$.easing.jswing=$.easing.swing;$.extend($.easing, { easeInBack: function(e, f, a, i, h, g) { if (g == undefined) { g = 1.70158 } return i...原创 2019-08-24 11:38:54 · 1523 阅读 · 0 评论 -
英文分享代码
1、拷贝下面的代码，插入到需要显示的位置2、拷贝下面的代码到 Head之前var switchTo5x=true;stLight.options({publisher: "d8804f04-9a1c-4e86-9086-9c2c73ea79b8", doNotHash: true, doNotCopy: true, hashAddressBar: fal转载 2014-02-19 09:35:54 · 1035 阅读 · 0 评论 -
输入框输入时实实检测输入内容并添加到输入框前面
输入框输入时实实检测输入内容并添加到输入框前面.glshop{ position:absolute; width:100%; height:auto; min-height:34px;border:1px solid #e5e6e7; z-index:1111;}.glshop.on{ border:1px solid #39aef5; box-shadow:#ccc 0 0 5px原创 2017-04-11 16:23:41 · 955 阅读 · 0 评论 -
纯CSS3 + HTLM 实现单选按钮 和多选框
纯CSS3 + HTLM 实现单选按钮 和多选框.radio{ transition:all .3s ease; width:22px; position:relative; vertical-align:middle; height:22px; border-radius:22px; background:#fff; border:1px solid #ddd; -webkit-appear原创 2017-03-07 17:28:59 · 703 阅读 · 0 评论 -
CSS 中文英文 换行问题
Transshipment Booking System is launched只对英文起作用，以字母作为换行依据Transshipment Booking System is launched只对英文起作用，以单词作为换行依据Transshipment Booking System is launched只对中文起作用，强制换行Transshipment Booking转载 2015-04-09 11:11:02 · 841 阅读 · 0 评论 -
JS弹窗加入购物车特效
加入购物车JS弹窗*{margin:0px; padding:0px;}body{margin:0px; padding:0px; font-size:12px; font-family:'Microsoft Yahei';}a{ text-decoration:none;}.carbtn{float:left;padding:0 20px; height:35px; backgr原创 2015-04-18 23:27:52 · 2543 阅读 · 5 评论 -
缩小窗口时CSS背景图出现右侧空白BUG的解决方法
页面容器（#wrap）与页面头部（#header ）为100%宽度。而内容的容器（#page）为固定宽度960px。浏览窗口缩小而小于内容层宽度时会产生宽度理解上的差异。如下图所示窗口宽度大于内容层宽度：改变浏览器窗口的大小，小于内容层宽度，如下图所示。拖动水平滚动条，出现了bug的样子。右边的背景不存在了。如下图所示。问题的根本在于：当窗口缩小时，转载 2015-03-17 14:45:38 · 2013 阅读 · 0 评论 -
分享一个网站通用 JQUERY + js 插件 适用于各种网页特效，哥强烈推荐，作者很强大
http://www.superslide2.com/demo.html 大话主席。里面说明了调用方法，非常简单， 各种特效 各种有。转载 2015-02-04 10:20:42 · 582 阅读 · 0 评论 -
Js中 关于top、clientTop、scrollTop、offsetTop的用法
网页可见区域宽： document.body.clientWidth;网页可见区域高： document.body.clientHeight;网页可见区域宽： document.body.offsetWidth (包括边线的宽);网页可见区域高： document.body.offsetHeight (包括边线的宽);网页正文全文宽： document.body.scrollWidt转载 2014-03-05 10:05:05 · 3263 阅读 · 0 评论 -
一个焦点图插件，调用简单。
(function($){ /***一个BANNER插件带左右箭头****/ $.fn.Focus = function(options){ var opt = { time:1000 //播放秒数 } var options = $.extend(opt,options); this.each(function(){ var thisFocus =原创 2014-02-28 12:18:54 · 570 阅读 · 0 评论 -
鼠标移上去图片切换且慢慢放大JS特效
无标题文档.proSeriest { height:171px; background:url(mbg.jpg) repeat-x top; overflow:hidden; position:relative;}.proSeriest .proSeriestbox { width:1060px; margin:15px auto; padding-left:60px;}原创 2013-11-14 09:06:44 · 2075 阅读 · 0 评论 -
JS实用图片无缝滚动
各色聚氨酯漆 //使用div时，请保证colee_left2与colee_left1是在同一行上. var s原创 2013-11-25 16:47:30 · 574 阅读 · 0 评论 -
一个网站通用的FLASH 图片切换特效！
var focus_width=360; var focus_height=218; var text_height=0; var swf_height = focus_height+text_height; var pics = ""; var links = ""; var texts = ""; pics += "图片地址"; links += "连原创 2013-11-05 16:55:10 · 746 阅读 · 0 评论 -
一个JS TAB 特效 代码清晰明了，一看就懂！
无标题文档.products{ width:960px; height:620px; overflow:hidden; margin-top:10px; position:relative; }.products .title{ height:35px; background:#FFFF; line-height:35px;}.products .tit原创 2013-11-04 11:47:37 · 1161 阅读 · 0 评论 -
网站通用百度地图调用示例，只需填入座标和百度密钥即可。内容可自己更换。
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style type="text/css"> body, html{width: 100%;height: 100%;margin:0;font-family:"微软雅黑";} #allmap {height:500px;widt原创 2015-07-24 09:44:00 · 1102 阅读 · 0 评论 -
CSS3 圆转动 特效
<style>.c2{ background:#FFF; padding:55px 0; overflow:hidden;}.yuan { width:1000px; margin:40px auto; overflow:hidden;}.yuan li{ float:left; width:125px; height:125px; position:relative; background:原创 2015-08-05 00:55:10 · 1163 阅读 · 0 评论 -
JS只能输入数字并限制长度的实用代码
$("input[name='deal_days']").bind("keyup blur",function(){if($.trim($(this).val())==''||isNaN($(this).val())||parseInt($(this).val()){$(this).val("");}else if($(this).val().length>4){$(t转载 2015-09-25 11:46:24 · 1236 阅读 · 0 评论