首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

使用webpack打包js文件(隔行变色案例)

使用webpack打包js文件(隔行变色案例) 1.webpack安装两种方式 运行npm i webpack -g全局安装webpack,这样就能在全局使用webpack命令 在项目根目录中运行npm...i webpack --save-dev安装到项目依赖中 2.初步使用webpack打包构建列表隔行变色案例 项目结构: ?...image 运行npm init -y初始化项目,使用npm管理项目中依赖包 创建项目基本目录结构 使用npm i jquery -s安装jquery类库 创建main.js并书写隔行变色代码逻辑...会报错,因为浏览器不认识import这种高级JS语法,需要使用webpack进行处理,webpack默认会把这种高级语法转换为低级浏览器能识别的语法; 运行webpack 入口文件路径 输出文件路径对...main.js进行处理: webpack src/js/main.js -o dist/bundle.js 注意如果提示没有webpack-cli,安装: npm install webpack-cli

2.5K20
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    前端 | 设置隔行变色单元格

    问题描述 表格在日常生活中使用非常多,比如excel就是专门用来创建表格工具,表格就是用来表示一些格式化数据,比如:课程表、银行对账单。在网页中也可以来创建出不同表格。...如果表格中单元格比较多,那么可以设置隔行变色效果,就能让表格显得清晰和一目了然。设置隔行变色方法十分简单:可以给偶数(或奇数)行tr标记都设置上背景色效果就可以了。...解决方案 首先我们应该先写出一个简单表格,再在这个表格基础上添加颜色,合并单元格等。 ? ? 在此基础上,我们可以为表格设置隔行变色,以此来突出重点。添加代码如下: ? ?...接下来我们简单插入一张图片。(为了使表格尽可能美观,我们就变化一下表格样式。) ? ? 结语 兴趣是最好老师。在学习过程我们难免会遇到自己不愿意学东西。...温馨提示:点击页面右下角“写留言”发表评论,期待您参与!期待您转发!

    1.7K20

    JavaScript案例:表格隔行变色效果及表单全选取消全选

    表格隔行变色效果 案例分析 用到鼠标事件 鼠标经过 onmouseover 鼠标离开 onmouseout 核心思路:鼠标经过tr行,当前行变背景颜色,鼠标离开去掉背景颜色 注意:第一行(thead里面的行...)不需要变换颜色,因为我们获取是tbody里面的行 //1.注册元素 var trs = document.querySelector('tbody').querySelectorAll...function() { this.className = ''; } } 表单全选取消全选 案例分析 全选和取消全选:让下面所有复选框checked...下面复选框需要全部选中,上面全选才能选中做法:给下面所有复选框绑定点击事件,每次点击,都要循环查看下面所有的复选框是否有没选中,如果有一个没选中,上面全选就不选中。...下面复选框需要全部选中, 上面全选才能选中做法: 给下面所有复选框绑定点击事件,每次点击,都要循环查看下面所有的复选框是否有没选中,如果有一个没选中, 上面全选就不选中。

    1.7K20

    JS点谁 谁变色

    效果图比我描述清楚,需要自取,不懂就问。 ? 别看代码一般, 实则短小精悍, 类似单击切换, 用途十分广泛。...代码、用途详解: 首先 var h1s = … 获取Dom节点 此时 h1s 是一个数组,数组里存放了4个标签,它们下标为 “ 0,1,2,3 ”, 若我想操作第一个,就写: h1s...那我想点谁谁变色,直接在 for 循环内部加点击事件 i.οnclick=function(){ i.style.color=‘red’; } 意为:此时 i 被点击了,此时 i 将执行function...h1 字体变回原来颜色,然后我再添加,因为代码执行顺序是从上到下,所以两段执行语句不能交换位置。...如果此代码中你还有些许问题,或是前端相关问题,均可以在底部留言。

    2.2K30

    webpack基本使用

    主要功能:它提供了友好前端模块化开发支持,以及代码压缩混淆、处理浏览器端 JavaScript 兼容性、性能优化等强大功能。...创建列表隔行变色项目 ① 新建项目空白目录,并运行 npm init –y 命令,初始化包管理配置文件 package.json ② 新建 src 源代码目录 ③ 新建 src -> index.html...⑥ 通过 ES6 模块化方式导入 jQuery,实现列表隔行变色效果 运行:发现语法错误,颜色也没有改变,因为上面 index.js 用到了 ES6 语法,导致浏览器不兼容问题 [在这里插入图片描述...在这里插入图片描述] 运行成功后在项目中就会生成一个文件夹 [在这里插入图片描述] 里面的 main.js 就是 webpack 生成,根据 index.js 代码做一些兼容处理 而现在 main.js...dist 文件夹下 main.js 里面包含了 index.js 和 jquery.js 代码,webpack把这两个文件合并成一个文件了,最终生成了 main.js 文件 [在这里插入图片描述] 打开

    29330

    webpack使用来打包前端代码

    使用webpack打包js文件(隔行变色案例) 1.webpack安装两种方式 运行npm i webpack -g全局安装webpack,这样就能在全局使用webpack命令 在项目根目录中运行npm...i webpack --save-dev安装到项目依赖中 2.初步使用webpack打包构建列表隔行变色案例 项目结构: ?...image 运行npm init -y初始化项目,使用npm管理项目中依赖包 创建项目基本目录结构 使用npm i jquery -s安装jquery类库 创建main.js并书写隔行变色代码逻辑...image 在项目根目录中创建webpack.config.js 由于运行webpack命令时候,webpack需要指定入口文件和输出文件路径,所以,我们需要在webpack.config.js中配置这两个路径...由于每次重新修改代码之后,都需要手动运行webpack打包命令,比较麻烦,所以使用webpack-dev-server来实现代码实时打包编译,当修改代码之后,会自动进行打包构建。

    1.3K10

    Android对图片Drawable实现变色示例代码

    前言 本文主要给大家介绍了Android中图片DrawableCompat利用setTint()对图片Drawable进行变色相关内容,分享出来供大家参考学习,下面话不多说了,来一起看看详细介绍:...1.利用color资源对Drawable变色 Drawable对象来源不限制,可以是从资源getResource().getDrawable(int resourceId)也可以是其他方式得到Drawable...-- default -- </selector Java代码(用于改变按钮字体颜色) Button btn=(Button)findViewById(R.id.btn); Resources...=null){ btn.setTextColor(color_state_list);//设置按钮文字颜色 } 4.安利一个朋友封装工具类 public class DrawableTintUtil...,希望本文内容对各位Android开发者们学习或者工作能带来一定帮助,如果有疑问大家可以留言交流,谢谢大家对ZaLou.Cn支持。

    1.2K31

    css字体渐变色_html美化代码

    6 #eFF3399#cff99cc 还是粉色桃红分里面浅 7 #eFF99CC#c330066#b 额原谅我审美眼光。。。...我觉得还不错 10 #g0fff0f#u#b 麦子稀饭变色 1 #g33CC00#b#u 我没有审美水平每个颜色都好看这个是大红深紫变色成熟型。...喜欢抱走嘻嘻 4 #e9966ff 很明媚紫色 5 #gf88fcc#u#gf47fcc#u 感觉是石榴籽颜色打起来有点麻烦因为这个字体只能用一次 下次用时候它后半截会掉额。。。...但是这颜色很不错喜欢呢好久很久呢 6 #u#gfffc3c 很接近我喜欢紫色桃红渐变 7 #ga099ff上 紫下粉蓝色上下过渡呵呵。...好看 8 #effffff#gf0fff5 不知道这么说了很复杂颜色粉紫彩色亮混一起。。仔细看下这个颜色很多人要 9 #effffff#g00ee99 白底很甜紫色。。

    3.5K20
    领券