js的各种运用（点击事件，弹窗，时间戳）

最新推荐文章于 2024-05-20 15:17:08 发布
最新推荐文章于 2024-05-20 15:17:08 发布
阅读量339 收藏 1
点赞数 1
分类专栏： js 计时器 弹窗 文章标签： javascript 前端 开发语言
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/LaoXieyyds/article/details/126458070
版权
js 同时被 3 个专栏收录
3 篇文章 0 订阅
订阅专栏
计时器
2 篇文章 0 订阅
订阅专栏
弹窗
2 篇文章 0 订阅
订阅专栏 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id = "dv1">
        <h2 id = "title">
            标题
            <span>小标题1</span>
        </h2>
        <div class="info">
            内容
        </div>
        <div>
            <ul class="ul1">
                <li>列表1</li>
                <li>列表2</li>
                <li>列表3</li>
            </ul>
            <ul class="ul2">
                <li>列表4</li>
                <li>列表5</li>
                <li>列表6</li>
            </ul>
            <ol>
                <li>列表4</li>
                <li>列表5</li>
                <li>列表6</li>
            </ol>
        </div>
    </div>
    <script>
        var title = document.getElementById("title")
        console.log(title);
        var lis = document.getElementsByTagName("li")[1];
        console.log(lis);
        var lic = document.querySelectorAll("ol li")[2]
        console.log(lic);
        var lia = document.querySelectorAll(".ul2 li")[2]
        console.log(lia);
        var lib = document.querySelector(".info")
        console.log(lib);
    </script>
</body>
</html>

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button>修改按钮</button>
    <a href="https://www.baidu.com">百度一下</a>
</body>
<script>
    var bu = document.querySelector("button");
    var au = document.querySelector("a");
    bu.onclick = function(){
        au.href = "https://www.360.com";
        console.log(au.href);
        au.innerText = "360";
    }
</script>
</html>

在这里插入图片描述
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/d.js"></script>
</head>
<body>
    
</body>
</html>

var arr1 = new Array(3);
console.log(arr1)

var arr2 = [1,2,3,4];
console.log(arr2)

var arr3 = new Array(22,33,44,55);
console.log(arr3)

console.log(arr3.length)

var arr4 = arr2.concat(arr3)
console.log(arr4)

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .bigImg{
            width: 400px;
            height: 400px;
            background-color: #999;
        }
        .bigImg img{
            width: 100%;
            display: flex;
        }
        .smallImg img{
            width: 100px;
            height: 100px;
        }
    </style>
</head>
<body>
    <div class="bigImg">
        <img src="" alt="">
    </div>
    <div class="smallImg">
        <img src="img/1.jpg" alt="">
        <img src="img/2.jpg" alt="">
        <img src="img/3.jpg" alt="">
    </div>
    <script>
        var img1 = document.querySelectorAll(".smallImg img");
        var img2 = document.querySelector(".bigImg img");
        img1.forEach(function(e){
            e.onclick = function(){
                img2.src = this.src;
            }
        });
        
    </script>
</body>
</html>

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="Img">
        <h2></h2>
        <img src="" alt="">
    </div>
<script>
var h = new Date();
var t = h.getHours();
console.log(t);
    var img1 = document.querySelector("img");
    var h1 = document.querySelector("h2");
        if(t <= 6){
            h1.innerText = "上午好"
            img1.src="img/z.gif";
        }else if(t > 6 && t <= 12){
            h1.innerText = "中午好"
            img1.src="img/s.gif";
        }else if(t > 12 && t <= 18){
            h1.innerText = "下午好"
            img1.src="img/x.gif";
        }else if(t > 18){
            h1.innerText = "晚上好"
            img1.src="img/w.gif";
        }
</script>
</body>

</html>

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <input type="password">
    <img src="img/close.png" alt="">
    <script>
        var img1 = document.querySelector("img");
        var info = document.querySelector("input");
            img1.onclick = function(){
                if(img1.getAttribute("src")=="img/close.png"){
                    img1.src = "img/open.png";
                    info.type = "text"
                }else{
                    img1.src = "img/close.png";
                    info.type = "password"
                }
            }
    </script>
</body>
</html>

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width: 300px;
            height: 300px;
            background-color: antiquewhite;
        }
        .dv{
            width: 300px;
            height: 300px;
            background-color: rgb(1, 1, 1);
        }
    </style>
</head>
<body>
    <div></div>
    <button id = "bth">修改背景颜色</button>

    <script>
        var bth1 = document.querySelector("button")
        var bth2 = document.querySelector("div")
        bth1.onclick = function(){
            //bth2.style.backgroundColor = "red";
            bth2.className = "dv"
        }
    </script>
</body>
</html>

在这里插入图片描述

LaoXieyyds
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
js中class的点击事件没有效果的解决方法
11-23
如下所示： $(".xx").clcik(function(){····}); 本来不用js生成类，是有点击效果的一但js里写，就没有点击效果了，如下： 做如下修改即可，监听document 以上就是小编为大家带来的js中class的点击事件没有效果的解决方法全部内容了，希望大家多多支持软件开发网~
JS按钮点击事件实现弹窗(popup)
zhansan的博客
02-10 2万+
click.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>click</title> <script> function buttonClick(){ window.confirm("你点击了按钮哦"); } </script&g
JavaScript基础——事件对象、时间戳
NGUP_LEE的博客
03-28 1244
1、时间对象实例化 时间对象：用来表示时间的对象 作用：可以得到当前系统的时间 代码中 new 关键字一般用来实例化对象 创建一个时间对象并获取时间 获取当前时间 let date = new Date() 获取指定时间 let date = new Date('1949-10-01 18:30:01') 代码样例 let date = new Date() console.log(date) let last = new Date('2021-8-29 18:30:00') console.lo
JavaScript单击按钮显示系统时间
weixin_47304332的博客
04-05 1775
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="disp"> </div> <input type="button" value="获取当前时间" onclick="getNowTime()
span 点击事件
热门推荐
l_degege的专栏
08-02 2万+
<!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-...
JS点击按钮实现时间戳与标准日期的相互转换
07-15
点击按钮后含以下三个内容： 时间戳转换为标准日期（数据直接写入代码） 时间戳转换为标准日期（数据以数组形式调用） 标准日期转换为时间戳 需要自取，有不懂的可以私戳我哦
js与C#进行时间戳转换
12-11
JS时间戳转成C#里的时间，再把C#里的时间戳转成JS的时间 JS里的时间戳 代码如下:  var dt = new Date().getTime();//时间戳 C# 时间戳转时间 代码如下:  DateTime dtStart = TimeZone.CurrentTimeZone....
Javascript的时间戳和php的时间戳转换注意事项
10-27
需要注意的是js的时间戳是13位，php的时间戳是10位,转换函数如下，感兴趣的朋友可以参考下哈
JS的时间格式化和时间戳转换函数示例详解
10-15
主要介绍了JS的时间格式化和时间戳转换函数，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
js处理php输出时间戳对不上号的解决方法
12-08
由PHP传入JS处理的时间戳我说怎么老是对不上号呢，原来JS时间戳为13位，包含3位毫秒的，而PHP只有10位不包含毫秒的。 var nowtime = (new Date).getTime();/*当前时间戳*/ /*转换时间，计算差值*/ function ...
javascript/js点击事件显示日期的效果
月影WEB的博客
04-17 1927
我们先看看JS代码和效果图 代码如下： 按F12预览效果图如下： 点击“显示日期”按钮之后出现的效果图如下： 下面我们来讲解下这个JS： JS部分 <script> function displayDate()//申明一个JS叫做displayDate()的方法 { document.getElementById("yue").innerHTML=Date(); //这段表示从整个文档获取元素里面id样式名字为yue的标签，然后把JS内置时间函数Date
js 点击事件
qq_42718130的博客
04-08 1万+
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>js中的点击事件（click）的实现方式</title> </head> <body> <!-- 第三种方式--> <button id="btn0" onclick="threeFn()">点我</button.
js中点击事件
JinYixin0116的博客
06-22 1546
<!DOCTYPE html> <html> <head> <title> new document </title> <meta http-equiv="Content-Type" content="text/html; charset=gbk" charset="utf-8"/> <script type="text/javascript"> function openWindow(){.
文本框js日历弹出
loftyidals的专栏
12-09 3992
js日历
JS单击事件
qq_35354139的博客
07-29 1985
JS单击事件
ant design DatePicker日期选择框指定分钟的间隔minuteStep属性
u010234868的专栏
05-17 191
在上面的例子中，DatePicker 将只允许用户以 15 分钟为间隔选择分钟。是 Ant Design 的 TimePicker时间选择框组件的一个属性。设置为 30，则用户可以选择以 30 分钟为间隔的分钟值。如果你想让分钟选项只能以 15 分钟为间隔选择，你可以将。
React Suspense与Concurrent Mode：异步渲染的未来
最新发布
天涯学馆
05-20 638
React的Suspense和Concurrent Mode是React 16.8及更高版本引入的概念，旨在提升用户体验和性能，特别是在处理异步数据加载和动画时。它们是React的下一代渲染策略的一部分，目的是实现更流畅的交互和更高效的资源调度。
(Vue3+TS+Volar) 全局组件配置类型声明的最佳实践
从今年开始写写博客~~
05-14 226
简评：Volar官方全局组件的推荐写法，基于Volar，必须安装该插件，GlobalComponents是Volar专门为了解决全局组件类型而新增的类型接口。定义全局组件：使用GlobalComponents类型接口声明类型。
Vue.js的发展史（一）
2301_79683791的博客
05-15 753
Vue (发音为 /vjuː/，类似view) 是一款用于构建用户界面的 JavaScript 框架。它基于标准 HTML、CSS 和 JavaScript 构建，并提供了一套声明式的、组件化的编程模型，帮助你高效地开发用户界面。无论是简单还是复杂的界面，Vue 都可以胜任。来源官方解释-----简介 | Vue.js (vuejs.org)简单来说：Vue是一个属于JS的库，可直接引入一个JS文件就可以使用，与传统JS和JQuery框架不同，Vue的渐进式框架。
js获取一天后的时间戳
07-27
要获取一天后的时间戳，你可以使用JavaScript中的`getTime()`方法来实现。下面是获取一天后时间戳的代码示例： ```javascript // 获取当前时间戳 const currentTimeStamp = new Date().getTime(); // 获取一天后的...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值