原生js的时间对象和修改背景图片

原生JS实现图片裁剪功能 功能介绍:图片通过原生input上传,使用canvas进行图片裁剪。 裁剪框限制不允许超出图片范围,图片限制了最大宽高(自行修改要的尺寸),点击确认获取新的base64图片数据 效果图: 上代码 阅读详情

1、获取时间对象,记录当前时间

<body>
    <button>点击</button>
    <p>123</p>

    <script>
        let p = document.querySelector("p")
        let btn = document.querySelector("button")
        btn.onclick = function () {
            p.innerText=getDate()
        }

        function getDate() {
            let date = new Date()
            let year = date.getFullYear()
            let mouth = date.getMonth() + 1
            let dates = date.getDate()
            let arr = ['星期一', '星期二', '星期三', '星期四', '星期五', '星期六', '星期日',]
            let day = date.getDay() //4   下标
            return '今天是:' + year + "年" + mouth + "月"+ dates+ "日" + arr[day] 
        }


    </script>


</body>

效果:

 2、随机数修改背景图片

/**
 *
 * 实现指定区间的随机整数(闭区间)
 * @param {number} n, 代表区间的一端
 * @param {number} m, 代表区间的另一端
 *
 * @return {number} , 指定区间的随机整数
*/
function myRandom(n,m) {
    // 1. 考虑数字的安全: 必须是数字才可以, 否则不行, 用户必须给一个数(实参)
    m = m || 0          // m可以没有值, 没有值,将值变成0

    // 2. 重新确定n和m的大小关系
    let min = Math.min(n, m)
    let max = Math.max(n, m)

    return Math.floor(Math.random() * (max - min + 1)) + min

}

引入与使用

 <title>Document</title>
//引入
    <script src="./myRandow.js"></script>
</head>

//使用
<img src="./images/b1.jpg" alt="">
  
    <script>
//封装一个函数
        function repeat() {
            let rand = myRandom(1, 5)

            let img = document.querySelector('img')
            img.src = `./images/b${rand}.jpg`
        }


//每隔一段时间调用这个函数
        setInterval(repeat, 500)

Bootstrap时间选择器集成指南:解决箭头不显示问题 在前端开发中,日期时间选择器是提升表单交互体验的关键组件。其核心原理是通过JavaScript动态生成UI层,并依赖CSS进行样式渲染,从而实现用户对年、月、日、时、分的可视化选择。这类组件的技术价值在于标准化输入、减少用户操作错误并提升数据采集效率,广泛应用于后台管理系统、预约平台、数据报表等需要精确时间设定的场景。集成时,开发者常遇到资源加载或样式冲突问题,例如第三方datetimepicker组件的导航箭头图标因字体文件路径错误或CSS覆盖而无法显示。本文将以Bootstrap项目为例,深入剖析其依赖 阅读详情

相关推荐

程序员专属浪漫表白工具:JS+APK实现情感表达新方式

随着信息技术的飞速发展,程序员不再局限于用代码解决逻辑问题,而是开始将技术能力延伸至情感表达领域。传统的表白方式往往缺乏个性与深度,而通过编程实现的情感互动工具,不仅展现了程序员独特的浪漫情怀,更体现了其技术实力与创造力。“程序员告别单身神器”正是在这一背景下应运而生——它是一种基于前端技术栈构建的个性化表白系统,集动态交互、视觉特效、跨平台部署于一体,帮助程序员以极具科技感的方式传递真挚情感。该工具的核心价值在于将冰冷的代码转化为温暖的情感载体,打破“程序员不善表达”的刻板印象。

weixin_35757531的博客 455

javascript实现改变图片指定区域的颜色

javascript本身无法改变图片的颜色,不过我们可以通过一些技巧来实现一样的效果.1、首先我们要知道图片哪些区域需要改变颜色,这里我们可以用执点地图的方法来弄例1:

wrq147的专栏 1万+

DVWA全级别详细通关教程

dvwa全级别详细通关教程,暴力破解,命令注入,CSRF跨站请求伪造,文件包含,文件上传​,SQL注入,XSS

m0_62063669的博客 1万+

js改变图片颜色

/** * 根据主题颜色修改图片颜色 * @param {[type]} imgUrl 图片url * @param {[type]} color 主题颜色 * @param {Function} callback 返回值 返回base64 */ changeImageColor = (imgUrl, color = "#00ff7f", callback) => { let t...

weixin_52494781的博客 2128

SigFit实战:从FEA到光学仿真的热力耦合分析全流程解析

在光机系统与芯片封装等精密工程领域,热与力的耦合效应是影响产品性能与可靠性的核心物理问题。有限元分析(FEA)是预测结构在热、力载荷下变形与应力的基础工具,但其结果通常无法直接用于评估光学性能。这需要一座桥梁,将物理场数据转化为光学设计语言。其核心原理在于数据映射与面形表征技术,例如通过泽尼克多项式拟合,将离散的节点位移分解为离焦、像散等标准光学像差。这项技术的工程价值在于,它实现了多物理场仿真的闭环,使工程师能在设计阶段精准预测热变形或应力对波前误差、调制传递函数等关键光学指标的影响。其典型应用场景包括高

weixin_28630185的博客 342

关于AD中如何绘制原理图及其封装

AD中如何绘制原理图及其封装 题记:这是一个比较基础的知识,之所以我打算写一篇这样的笔记,主要是因为在日常生活中,我极少绘制特殊模块或芯片原理图及其封装。久而久之就忘记咋画了,有时需要画封装的时候又想不起来,网上的资料虽然一堆堆的,但往往只是仅原理图的绘制,或者是仅封装的绘制。为此我写一篇这样的笔记,记录绘制原理图及其封装的一条龙服务,感觉这对我而言尤为重要。 本文分为三大板块,依次是原理图的绘制、封装的绘制、二者的联立 第一板块——原理图的绘制 原理图的建立 第二板块——封装的绘制 第三板块——二者的

weixin_51130221的博客 7万+

Js实现背景图片切换

实现目标: 点击页面中间的小图片,页面的背景就会变成相应的图片样式 思路 点击图片,获取到对应的图片的li元素 因为图片的名字是从1开始顺序命名的,所以可以通过获取的li元素的索引号来改变背景图片的地址名 将地址名改到body标签的backgroundImage属性中 实现代码 html代码 Css代码 Js代码 ...

wuliao193728645的博客 6883

手把手教你用VSCode+MCUXpresso搭建i.MX RT1062开发环境(附RT-Thread Nano移植)

本文详细介绍了如何使用VSCode和MCUXpresso工具链搭建i.MX RT1062开发环境,包括工具链安装、工程配置、调试技巧以及RT-Thread Nano实时操作系统的移植方法。通过实战步骤和优化建议,帮助开发者快速掌握这款高性能Cortex-M7 MCU的开发流程,提升嵌入式开发效率。

weixin_27014595的博客 392

js修改图片颜色

/** * 根据主题颜色修改图片颜色 * @param {[type]} imgUrl 图片url * @param {[type]} color 主题颜色 * @param {Function} callback 返回值 返回base64 */ changeImageColor = (imgUrl, color = "#00ff7f", callback) => { let threshold = 114; //默认颜色阀值 为 ...

TrainTu的博客 3772

JMeter 中实现 100 个用户在 3 秒内并发登录

通过以上配置,你可以在 JMeter 中实现 100 个用户在 3 秒内并发登录

南开大学 | 10 年 + 软件研发与测试实战 | 现任企业质控负责人 | 专注端到端交付质量 1682

【WorkBuddy从入门到精通实战教程】实战案例 第 18 章 把投资分析(炒股)变成你的日常

投资本身就是一件高度信息密集、强结构化、又极度依赖判断的事:读不完的财报、理不清的行业、吵不停的多空。而整理碎片信息、拆解复杂材料、把思考过程摆到台面上,恰好是 AI 擅长的。 在一次完整的股票研究里,AI 到底能替你做掉哪些低质量的重复劳动,把精力还给判断本身。

企鹅码农的专属播客,分享10多年的实战案例和经验解读,包含YOLO、RT-DETR、AI等各个工作领域。 474

原生js时间

<!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-Comp...

qq_44777678的博客 302

【Unity大规模RTS/攻城战框架】Large Scale Combat System - RTS Sieges深度解析

本文介绍了Unity专业级大规模RTS战斗框架Large Scale Combat System(LSCS)。该系统通过Job System+Burst技术解决了万人级单位的性能问题,提供完整的RTS操作体系、动态阵型系统、战术AI和攻城战功能。其亮点包括可破坏城门、行走城墙、战术AI配置系统,支持URP渲染管线,适用于Total War风格的大规模兵团对战项目。LSCS不仅提供核心战斗系统,还包含UI、小地图等配套模块,是Unity中少有的专业级RTS解决方案,特别适合需要深度战术玩法和大规模战斗的开发者

2403_88403568的博客 1334

使用单体模式设计属于自己js插件

jQuery插件依赖jQuery库,虽然jQuery使用十分广泛,但是对于移动开发或者在其他带宽需求需要注意的时候,就得考虑,因为我不可能完成一项技术相对来说引用了一个更大的库,这样之不值得的。所以原生js是所有浏览器都支持的一种语言,原生js相对来说就very good了,但是原生js相对新手或者没有很强基础的人来说还是相对比较深奥晦涩一点的,毕竟要考虑一些额外的因素: 不能污染全局的

程序猿开发日志【学习永无止境】 1598

3.摄像头组件- CVP (ISP)

本文介绍 车载摄像头组件-ISP

2401_83458819的博客 1618

Camera2Demo

在Camera2 的基础上进行封装,使得Camera2一堆初始化逻辑与Activity分离,降低耦合度,完成预览拍照并保存的操作

原生HTML/CSS/JS打造浪漫七夕表白与婚礼邀请函网页全攻略

在Web开发领域,HTML、CSS和JavaScript是构建一切网页应用的基石,它们分别负责结构、样式与交互,共同构成了现代网页的视觉与功能核心。理解这三者的协同工作原理,是前端开发者从入门到精通的必经之路。其技术价值在于,通过掌握这些原生技术,开发者能够脱离框架限制,实现极致的性能优化与完全的设计自由,从而创建出加载迅速、兼容性强的轻量级应用。这一技能在需要快速传播、强调第一印象和情感表达的场景中尤为重要,例如活动宣传、个人作品展示以及节日祝福页面。本文将聚焦于一个具体且充满温情的应用场景——制作专属的

weixin_33889665的博客 413

假人有限元模型

假人模型,车辆碰撞假人有限元模型,适合做乘员安全的研究者利用

2024年前端最新JavaScript基础之字符串对象,一眼就能看懂的前端自学手册

技术栈比较搭,基本用过的东西都是一模一样的。快手终面喜欢问智力题,校招也是终面问智力题,大家要准备一下一些经典智力题。如果排列组合、概率论这些基础忘了,建议回去补一下。怎么使用webpack对项目进行优化?防抖、节流浏览器的缓存机制描述一下二叉树, 并说明二叉树的几种遍历方式?项目类问题技术栈比较搭,基本用过的东西都是一模一样的。快手终面喜欢问智力题,校招也是终面问智力题,大家要准备一下一些经典智力题。如果排列组合、概率论这些基础忘了,建议回去补一下。

2401_84437095的博客 839

RU DOS版、EFI版32bit/64bit BIOS常用工具

DOS版、EFI版的RU工具,可用来查看IO、MEM、PCI、SMBIOS等资源。亲测在EFI SHELL下可用。

OV9734 DATASHEET,完整规格书

OV9734完整规格书,包括电气参数,尺寸规格,寄存器配置表等

原生js练习题---第三课

0x1用typeof查看数据类型 略过,不过typeof用来判断数据类型是不太靠谱的,尤其是涉及到引用类型的时候,除非是要检测一个变量是否有定义,否则最好采用Object.prototype.toString方法。 0x2用parseInt解析数字,并求和 实现效果:3-02用parseInt解析数字,并求和 对这道题来说,用户的输入无法...

weixin_33974433的博客 143

2024最新前端经典面试试题,web前端分享

面试前要精心做好准备,简历上写的知识点和原理都需要准备好,项目上多想想难点和亮点,这是面试时能和别人不一样的地方。还有就是表现出自己的谦虚好学,以及对于未来持续进阶的规划,企业招人更偏爱稳定的人。万事开头难,但是程序员这一条路坚持几年后发展空间还是非常大的,一切重在坚持。前端面试题汇总JavaScript前端资料汇总一个人可以走的很快,但一群人才能走的更远。

2401_83974117的博客 910

Terax:7MB轻量级AI原生开发环境,重新定义高效编程工作流

AI原生开发环境(ADE)是现代编程工具演进的重要方向,它通过深度集成人工智能技术重构传统开发流程。其核心原理是将终端、编辑器、Git管理和Web预览等功能原生整合,并内置智能AI助手支持本地和云端模型调用。这种架构的价值在于大幅降低开发者的上下文切换成本,提升编码效率。在实际应用场景中,AI原生环境能够实现智能代码补全、自动化重构、实时错误检测等功能,特别适合快速原型开发和全栈项目协作。以Terax为代表的轻量级ADE工具,仅7MB体积却提供了完整的开发体验,支持React、TypeScript、Rust

weixin_33744854的博客 435

2022最新前端经典面试试题

3、在发送http请求前,需要域名解析(DNS解析)(DNS(域名系统,Domain Name System)是互联网的一项核心服务,它作为可以将域名和IP地址相互映射的一个分布式数据库,能够使人更方便的访问互联网,而不用去记住IP地址。所以,如果你把父函数当作对象(object)使用,把闭包当作它的公用方法(Public Method),把内部变量当作它的私有属性(private value),这时一定要小心,不要随便改变父函数内部变量的值。解决方法是,在退出函数之前,将不使用的局部变量全部删除。

2401_89693527的博客 294

一份12W+字数的踩坑总结,覆盖前端、后端、运维三个维度,一步一个脚印,我们一起成长!(实时更新)

文章目录1.1 Css/Scss1.1.1 层叠性1.1.2 继承性1.1.3 优先级1.1.4 backgroud设置背景图片样式顺序决定是否生效1.1.5 Vue在元素中要使用当前vue对象的属性作为图片路径显示在 background-image: url() css上解决办法1.1.6 div里面的内容如何垂直居中1.1.7 RGBA1.1.8 块级元素1.1.9 行级元素1.1.10 行内块元素1.1.11 行高1.1.12 浮动1.2 Java Script1.2.1 Object.assig.

avengerEug的博客 8399

树莓派部署MagicMirror:无镜化信息看板搭建与Node.js环境配置指南

Node.js作为现代Web应用和物联网项目的核心运行时环境,其模块化架构和丰富的npm生态为快速构建应用提供了坚实基础。通过npm包管理器,开发者可以便捷地集成第三方模块,但环境配置与依赖安装常因网络、权限或版本问题成为实践中的主要障碍,例如典型的npm安装报错和nodejs环境变量配置问题。这些技术挑战在嵌入式开发场景中尤为突出,但其价值在于能够实现高度可定制的信息聚合与展示系统。本项目以树莓派为硬件平台,通过解决Node.js环境配置、npm镜像源设置及依赖安装中的常见问题,成功将MagicMirro

weixin_30700977的博客 337

Java应该学习哪些内容?

很多人说想学习Java,但是学习Java应该学习哪些内容呢?怎么去学习呢?今天就为大家整理出学习Java应该主要学习哪些内容。

xxxzzzqqq_的博客 2104

从5MB预算到轻量3D作品集:Three.js性能优化实战

在Web端构建个人作品集时,3D场景能带来强烈的视觉冲击,但模型、纹理和脚本的失控膨胀也常让首屏加载变得缓慢。性能预算(Performance Budget)是一种前置约束方法,在开发前设定资源体积上限,迫使每一项新增内容都经过价值权衡。掌握WebGL渲染原理、纹理压缩、模型精简与代码按需引入,是让3D页面保持流畅的关键。以Three.js与Vite为技术栈,通过合理的工程结构、Draco网格压缩、动态加载和CDN压缩配置,完全可以将一个交互式3D作品集控制在5MB以内。这种实践不仅适用于个人主页,也适用于

weixin_34221775的博客 426

web前端常用知识点杂记(不定时更新)

CSS样式穿透、设置最高优先级、首行缩进、删除线、文本溢出可滚动、设置背景图、边框渐变、背景渐变、文字渐变、禁用原生input、button边框、设置input光标颜色、设置透明度、伪类选择器、鼠标样式、HTML、CSS特效、滚动条样式;浏览器窗口大小、监听浏览器窗口变动、双击实现浏览器全屏或者退出全屏、JS生成随机ID、时间处理-Date() 对象、??与||、正则表达式校验手机号、随机数、eval函数、数组去重、JS常用数组、对象、字符串方法及使用示例、Vue相关知识、uniApp相关知识,内容持续更新

廖若星辰-LTY 1663
上一篇: Es6新增Array.from ()方法详解
下一篇: for 循环工作中用到的一些逻辑以及内置对象
cv酱
博客等级 码龄5年 7粉丝 53原创
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付:10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值