web前端

js实现复制功能

js实现复制功能

 

一、具体场景

前端有时需要实现点击按钮复制的功能,这个时候就不能让用户去手动选择内容右键复制了。

二、实现方式

1. document.execCommand

(1)具体实现

复制时,先选中文本,然后调用document.execCommand(‘copy’),选中的文本就会进入剪贴板。这就需要借助输入框来实现对文本的选中。
具体案例:

  <button type="button" onclick="theCopy()">复制</button>
  <label style="display: block">
    <textarea id

jquery点击事件 无效 对于动态生成出来的内容,jquery点击事件无效的问题

最近前端在做一个功能,

功能的内容是点击A按钮,生成内容1,在内容1中点击B按钮,生成内容2,在内容2中点击C按钮,返回最初界面样式。

整个jquery的代码,全部使用了 .click(function(){} 层层嵌套的结构。在这种click()点击事件支撑下的动态内容生成,依然没有问题。
但是“ .click(function(){} 层层嵌套的结构”会出现一个问题,就是最后一步,返回最初界面后,再去点击A按钮,就不起作用了。…

js 判断字符串中是否包含某个字符

方法一(推荐使用): indexOf()

indexOf() 方法:返回某个指定的字符串值在字符串中首次出现的位置。如果要检索的字符串值没有出现,则该方法返回 -1。

var str = "LiHeErNAN";
console.log(str.indexOf("A") != -1 );  // true

方法二:match()

match() 方法:在字符串内检索指定的值,或找到一个或多个正则表达式的匹配。

var str = "abcd";
var reg = RegExp(

this指向问题,标签上绑定onclick事件this指向问题

<input type="button" value="修改" οnclick="changeContent()">

写在元素上onclick里面的函数changeContent,相当于函数直接调用,函数里面使用的this指向全局对象window,

而不是指向该元素

 

那么要获取onclick所在节点的object,我们则需要在调用function时就把this传递过去:

<input type="button" value="修改" οnclick="changeContent(this)">

这里的this指这个input标签,$(this)将其变为jq对象;

function changeContent(e){

var _this = $(this)

}

JS实现随机生成字符串的方法(可指定长度)

1.定义随机截取字符串

const _charStr = 'abacdefghjklmnopqrstuvwxyzABCDEFGHJKLMNOPQRSTUVWXYZ0123456789';

2.定义随机生成索引函数

/**
 * 随机生成索引
 * @param min 最小值
 * @param max 最大值
 * @param i 当前获取位置
 */
function RandomIndex(min, max, i){
    let index = Math.floor(Math.random()*(max-min+1)+min),
        numStart = _charStr.length - 10;
    //如果字符串第一位是数字,则递归重新获取
    if(i==0&&index>=numStart){
        index = RandomIndex(min, 

你还在直接用 localStorage 么?该提升下逼格了

很多人在用 localStoragesessionStorage 的时候喜欢直接用,明文存储,直接将信息暴露在;浏览器中,虽然一般场景下都能应付得了且简单粗暴,但特殊需求情况下,比如设置定时功能,就不能实现。就需要对其进行二次封装,为了在使用上增加些安全感,那加密也必然是少不了的了。为方便项目使用,特对常规操作进行封装。不完善之处会进一步更新...(更新于:2022.07.04 17:30) 已更新。

设计

封装之前先梳理下所需功能,并要做成什么样,采用什么样的规范,部分主要代码片段是以 localStorage作为示例,最后会贴出完整代码的。可以结合项目自行优化,也可以直接使用。

// 区分存储类型 type
// 自定义名称前缀 prefix
// 支持设置过期时间 expire
// 支持加密可选,开发环境下未方便调试可关闭加密

// 支持数据加密 这里采用 crypto-js 加密 也可使用其他方式

// 判断是否支持 Storage isSupportStorage

// 设置 setStorage

// 获取 getStorage

// 是否存在 

11个罕见的 JavaScript 单行代码,会让你大吃一惊

在今天的文章中,我将与你一起来学习 11 个罕见但功能强大的单行代码。现在,准备好,让我们开始吧!

如果你想给专业开发人员留下深刻印象,你会做什么?很简单:用简单的逻辑和尽可能少的代码行来解决一个复杂的问题。随着 ES6 箭头函数的引入,可以创建看起来优雅而简单的单行代码。

在今天的文章中,我将与你一起来学习 11 个罕见但功能强大的单行代码。现在,准备好,让我们开始吧!

1、获取字符串中的字符数

获取字符数是一个有用的实用程序,在许多情况下都很有用,我们可以使用它来获取空格数和随后的单词数,或者这可用于获取字符串中某个分隔符的计数。

const characterCount = (str, char) => str.split(char).length - 1

 

这个想法很简单,我们使用传递的参数 char 拆分字符串并获取返回数组的长度。由于每次将字符串拆分,都会比拆分器多一个;所以减去 1,我们有一个 characterCount 单行。

2、检查对象是否为空

检查对象的空性实际上比看起来要困难得多,即使对象为空,每次检查对象是否等于 {} 也会返回

JavaScript 容器

大多数服务器程序是 Linux 程序。它们包括一个文件系统、一些可执行文件,可能还有一些共享库,它们可能与 systemd 或 nsswitch 等系统软件交互。

Docker 普及了 Linux 容器的使用;操作系统级虚拟化,为分发服务器软件提供了一种极好的机制。每个容器镜像都是一个无依赖的可立即运行的软件包。

由于服务器软件通常依赖于许多系统资源和配置,因此在过去部署它一直充满挑战。Linux 容器解决了这个问题。

css 两种颜色闪烁 js设置颜色闪烁的两种方法

css 两种颜色闪烁 js设置颜色闪烁的两种方法

 

第一种:无序闪烁

 

 function changeColor() { 
         var color="orange|#FFFFFF"; 
         color=color.split("|");
         $("#setxfld").css("background",color[parseInt(Math.random() * color.length)]);
         xfld.attr('fill',color[parseInt(Math.random() * color.length)]);
     }

 

setInterval('changeColor()',1000);

 

 

第二种:有序闪烁

 

  var colorFlag = 0;
  function changeColor() { 
         if (!colorFlag)
         {
        	 $("#setxfld").css("background","#FF9B1A");
        	 colorFlag = 1;
         }else{