![](https://img-blog.csdnimg.cn/20201014180756928.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
前端开发
Nobita Chen
UX设计师、爱好WEB开发
展开
-
json数据重新组合日志
//重新组装数据/* { title: '单轴螺杆模组', showItem: false, images: 'images/categoryitem01.png', item: [{ images: 'images/item01list01.png', page: '1' }, { images: 'images/item01list02.png', page原创 2021-11-21 22:35:25 · 219 阅读 · 0 评论 -
监听iframe中的鼠标点击事件
是否能监听iframe中的鼠标点击?难题1:跨源无法突破难题2:监听无效经各种尝试后放弃,无解!建议:在Iframe窗体里面,执行了某个事件之后,触发父窗口页面的方法<!DOCTYPE html><html lang="en"><head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1..原创 2021-10-30 14:31:14 · 5932 阅读 · 0 评论 -
微信小程序开发实战记录_安装vue/cli_Nginx配置SSL证书
一、环境准备国内镜像1、淘宝NPM镜像搜索地址:http://npm.taobao.orgregistry地址:http://registry.npm.taobao.org2、cnpmjs镜像搜索地址:http://cnpmjs.orgregistry地址:http://r.cnpmjs.org配置淘宝镜像npm config set registry http://registry.npmjs.orgnpm config get registry华为镜像npm config set原创 2021-10-28 19:52:34 · 863 阅读 · 0 评论 -
JS小技巧备忘
始终加载最新的JS文件<script>document.write('<script src="js/nobita.js?v='+ Date.now() +'"><\/script>');</script>判断变量未赋值,则动态加载JS if('undefined' == typeof(language)) { document.write("<script src='js/nobita-data.js'></script>原创 2021-01-17 21:47:55 · 69 阅读 · 0 评论 -
vue-i18n多语言国际化实践
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><script src="https://cdn.bootcdn.net/ajax/libs/jquery/2.2.3/jquery.min.js"></script><script src="https://cdn.bootcss.原创 2021-01-03 12:03:54 · 166 阅读 · 0 评论 -
webpack打包配置和常用命令
webpack.config.jsconst path = require('path');const MiniCssExtractPlugin = require("mini-css-extract-plugin"); //css抽出const optimizeCss = require('optimize-css-assets-webpack-plugin'); //css压缩const HtmlWebpackPlugin = require('html-webpack-plugin'); //原创 2021-01-03 11:52:34 · 498 阅读 · 0 评论 -
手机端滑动至底部时自动加载内容
//滚动至底部时自动加载var page = 1;$(window).scroll(function(){ var scrollTop = $(this).scrollTop(); var scrollHeight = $(document).height(); var windowHeight = $(this).height(); if(scrollTop + windowHeight >= scrollHeight-550){ //加载数据 $.a原创 2020-07-18 12:43:45 · 427 阅读 · 0 评论 -
select下拉列表选中后,跳转至指定页面
1.在当前页面打开新链接<select onchange="location.href=this.options[this.selectedIndex].value" name="" id="" ></select>option的value里面要写好新链接的地址2.在新窗口打开新链接<select onchange="window.open(this.options[this.selectedIndex].value)" name="select"><原创 2020-07-15 22:17:44 · 6009 阅读 · 0 评论 -
layui.table动态获取表头和列表数据示例
```javascript//表格layui.use(‘table’, function() {var table = layui.table;var cols = [], data = [];$.ajax({url:"/index.php?c=Api&a=getProductByCategory&cid={$data[0][classid]}", async: false, success:function(re){ data = re.data; cols =.原创 2020-07-11 20:24:23 · 5303 阅读 · 4 评论 -
判断页面是手机端还是pc端
Page A(PC)if(手机)跳转PageB$(function() { //判断页面是手机端还是pc端 function IsPC() { var userAgentInfo = navigator.userAgent; var Agents = ["Android", "iPhone", "SymbianOS", "Windows Phone", "iPad", "iPod" ];原创 2020-06-27 16:51:59 · 949 阅读 · 0 评论 -
JS给导航动态加样式
<script>$(function(){ function _addcss(n){ $('ul.list-paddingleft-2:eq(0) li').removeAttr('class'); $('ul.list-paddingleft-2:eq(0) li:eq('+ n +')').attr('class', 'link'); } var serein_ur...原创 2020-05-07 21:47:22 · 402 阅读 · 0 评论 -
外部表单提交设计
jsonp仅支持GET操作<script>function nobita_request(){ var $input_0 = $('#customForm58519335 input[name="col210434"]').val(), $input_1 = $('#customForm58519335 input[name="col210435"]').val(),...原创 2020-05-01 15:43:06 · 240 阅读 · 0 评论 -
bootstrap-table_Ajax加载数据到表格_JSONP(2)
列头标题JSON:{ "columns": [{ "field": "id", "title": "序号", "sortable": true }, { "field": "title", "title": "标题", "sortable": false }, { "field": "classid", "title": "所属分类", "sortabl...原创 2020-02-15 21:30:15 · 276 阅读 · 0 评论 -
bootstrap-table_Ajax加载数据到表格(1)
columns数组中的title对应列名称, data对应记录集data.json如下:{ "columns": [{ "field": "field0", "title": "Cell0", "sortable": true }, { "field": "field1", "title": "Cell1", "sortable": true }, { "...原创 2020-02-15 20:43:00 · 1633 阅读 · 0 评论 -
写一个html在线测试工具
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>iCode</title><!-- reset --><link rel="stylesheet" href="//e945.net/skin/index/css/r...原创 2020-02-09 16:30:56 · 1517 阅读 · 0 评论 -
借助jQuery写个弹窗示例
功能:点击链接或图片后,自定义弹出层,水平居中显示css样式嵌入js中,只需一次引用即可&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt;&lt;meta charset="UTF-8"&gt;&lt;meta name="viewport"原创 2018-11-26 11:16:06 · 1167 阅读 · 0 评论 -
自己动手写一个极简轮播图
因现在第三方轮播图插件过于冗余,所以尝试自己写一个看看,使用setTimeout函数+jQuery还是比较容易实现的。&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt; &lt;title&gt; &lt;/title&gt;&lt;script src="原创 2018-12-05 10:35:16 · 431 阅读 · 0 评论 -
置于固定宽度容器中的轮播图重置它的宽度_Swiper
使用场景:用户自定义的代码只能在固定的宽度内如1190像素内显示,可是轮播图希望做到更宽,怎么办? 本例采用绝对定位,突破宽度的限制,然后水平居中显示。<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</原创 2018-12-03 22:48:54 · 1613 阅读 · 0 评论 -
github的常规目录结构
github的常规目录结构做下说明:dist 是指编译后的文件,可以理解为压缩发布版src 源码文件,适合动手能力强的童鞋docs 文档examples 示例文件test 测试脚本.gitignore 告诉git哪些文件不要上传到 GitHub,比如数据库配置文件等LICENSE.txt 授权协议README.md 自述文件,整个项目的简介、使用方法等bower.json...原创 2019-01-11 15:17:09 · 1423 阅读 · 0 评论 -
webpack最佳实践
webpack.config.jsconst path = require('path'); //appconst MiniCssExtractPlugin = require("mini-css-extract-plugin"); //css抽出const optimizeCss = require('optimize-css-assets-webpack-plugin'); //css...原创 2019-01-11 15:19:26 · 205 阅读 · 0 评论 -
鼠标悬停时图片放大_css3实例
鼠标移到图片上时,图片会自动放大<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><style type="text/css">#div1{ width: 200px; hei转载 2019-01-08 09:12:24 · 30983 阅读 · 4 评论 -
css3样式总结
css(鼠标悬停时,图片缓缓变大).templatelist .content a.logo >img { transition: all 0.6s; width: 432px; height: 280px; overflow: hidden;}.templatelist .content a.logo >img:hover { tr...原创 2019-01-09 09:32:06 · 246 阅读 · 0 评论 -
css3阴影向上缓动样式
html<div class="article-box transition"> <div class="related-pic-box"> <a id="re_aid_278392" class="js-related-article" data-id="27原创 2019-01-09 17:51:21 · 1144 阅读 · 0 评论 -
JS二维数组操作记录,动态更新主导航样式
主导航样式更新:获取网址后进行判断,动态追加class$(function() { function navaddclass(n) { var _clsname = 'active', _target = '#main-nav'; $(_target + ' a').removeClass(_clsname); $...原创 2019-05-26 19:00:35 · 439 阅读 · 0 评论 -
$ is not a function解决办法
$ is not a function// $(function () {// $('.portfolio-two-item').click(function () {// var video_path = $(this).data('src');// layer.open({// type: 2,// t...原创 2019-05-26 22:22:15 · 22509 阅读 · 2 评论 -
swiper4多张缩微图轮播
<script>$(function (e) { $('#thumb-img ul li').click(function () { $('#bigimg ul li').html($(this).html()); }) var swiper = new Swiper('.swiper-container', { slides...原创 2019-05-27 22:02:23 · 870 阅读 · 0 评论 -
使用VUE.js页面打开时标签闪烁处理方案
vuejs、angularjs这些会在DOM Ready完会才回去解析html view Template,所以对于Chrome这类快速的浏览器你会看见有闪烁的情况出现。原创 2018-11-21 16:54:09 · 446 阅读 · 0 评论