JavaScript(3)

最新推荐文章于 2024-05-17 13:52:13 发布
最新推荐文章于 2024-05-17 13:52:13 发布
阅读量235 收藏
点赞数
文章标签： javascript 前端 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_67509637/article/details/125573346
版权

13、动态样式设置

document.getElementById()获得元素

元素.style.属性 = 值;

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            #box{
                width: 200px;
                height: 100px;
                background-color: red;
            }
        </style>
    </head>
    <body>
        <div id="box" onclick="changeColor()"></div>
    </body>
    <script type="text/javascript">
        /*
         * 动态样式设置：
         * document.getElementById()获得元素
         * 元素.style.属性 = 值;
         */
        function changeColor(){
            var box = document.getElementById("box");
            box.style.backgroundColor = "rgb(0,0,255)";
        }
    </script>
</html>

14、函数

function 函数名字(参数列表){

return 返回值;

}

注意：

<script>
    var fn = new Function("a","b","alert(a+b)");
    fn(1,2);//3
    var fn2 = function(){alert("abc")}
    fn2();//abc
</script>

分类

1.无参数无返回值

function 函数名字(){

}

    <script type="text/javascript">
        // 无参数无返回值
        function show(){
            alert('hello');
        }
        
        //调用函数
        show();
        show();
    </script>

2.有参数无返回值

function 函数名字(参数列表){

}

  <script type="text/javascript">
        //有参数无返回值函数
        function show(a, b) {
            var c = a + b;
            alert(c);
        }
        
        //调用函数
        show(5,3);
        //实参和形参不需要一一对应
        show(7);//7+undefined  NaN
    </script>

3.无参数有返回值

function 函数名字(){

return 返回值;

}

 <script type="text/javascript">
        //无参数有返回值函数
        function show(){
            return 10;
        }
        
        var zhi = show();
        alert(zhi);
        
        alert(show());
        
    </script>

4.有参数有返回值

function 函数名字(参数列表){

return 返回值;

}

   <script type="text/javascript">
        //有参数有返回值函数
        function js(a, b) {
            var c = a + b;
            return c;
//          alert("aa");//永远没有机会执行
        }
​
        alert(js(5, 4));
    </script>

15、作用域

全局变量

  • 不用var声明时，如果变量在函数中，它不是局部变量，而是全局变量
  • 全局变量还可以用window.变量
  <script type="text/javascript">
        //全局变量
        var a = 1;
        window.str = "hello"; //var str = "hello";
        function show() {
            alert(a);
        }
​
        function show2() {
            b = 2; //没有var声明，默认就是全局变量
            alert(b);
        }
​
        function show3() {
            alert(b + 1);
            alert(str);
        }
​
        function show4() {
            //局部变量
            var d = 10;
            alert(d);
        }
​
        function show5() {
            alert(d + 1); //错误
        }
        show();
        show2();
        show3();
        show4();
        show5();
    </script>

16、定时器

  • setTimeout(函数, 时间毫秒)：延迟多少毫秒，执行一次，只调用1次
  • setInterval(函数, 时间毫秒)：每隔多少毫秒，执行一次，调用无数次

清除定时器：

  • clearTimeout：清除setTimeout，也可以清除setInterval
  • clearInterval：清除setInterval，也可以清除setTimeout

setTimeout代码

  <script type="text/javascript">
        //setTimeout 定时器  第一个参数是函数，第二个参数是延迟多少毫秒
        setTimeout(function() {
            alert("1");
        }, 2000);
        
//      function aa(){
//          alert("aa");
//      }
//      setTimeout("aa()",3000);
    </script>
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <div id="result" onmouseover="clearNum()" onmouseleave="startNum()">0</div>
    </body>
    <script type="text/javascript">
        var result = document.getElementById("result");
        result.style.width = "100px";
        result.style.height = "100px";
        result.style.backgroundColor = "pink";
        result.style.textAlign = "center";
        result.style.lineHeight = "100px";
        result.style.fontSize = "32px";
        
        var n = 0;
//      var myTimeout;
        function num(){
            result.innerText = n;
            n++;
            myTimeout = setTimeout("num()",1000);
        }
        num();
        
        function clearNum(){
            /*
             * 清除定时器：clearTimeout
             */
            clearTimeout(myTimeout);
        }
        
        function startNum(){
            myTimeout = setTimeout("num()",0);
        }
    </script>
</html>

setInterval代码

<!DOCTYPE html>
<html>
​
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            #result {
                width: 100px;
                height: 100px;
                background-color: pink;
                font-size: 32px;
                text-align: center;
                line-height: 100px;
            }
        </style>
    </head>
​
    <body>
        <div id="result" onmouseover="stopNum()" onmouseleave="startNum()">0</div>
    </body>
    <script type="text/javascript">
        var count = 0;
        var result = document.getElementById("result");
        
        function stopNum(){
            /*
             * 清除定时器：clearInterval
             */
            clearInterval(myInterval);
        }
        
        function startNum(){
             myInterval = setInterval("num()", 1000);
        }
        
        function num() {
            console.log(count);
            result.innerHTML = count;
            count++;
        }
        //每隔多少毫秒执行一次函数
        var myInterval = setInterval("num()", 1000);
    </script>
​
</html>

17、隐藏显示图片

  <body>
        <img id="result" src="img/1.jpeg" width="300" height="200" /><br />
        <input type="button" value="显示" onclick="show(true)" />
        <input type="button" value="隐藏" onclick="show(false)" />
    </body>
    <script type="text/javascript">
        function show(flag) {
            var myImg = document.getElementById("result");
            var val = flag == true ? "block" : "none";
            myImg.style.display = val;
            
            //var val = flag == true ? "visible" : "hidden";
            //myImg.style.visibility = val;
        }
    </script>

18、类

类：是属性与函数的集合

定义一个类

function 类名(参数列表){

this.属性名 = 值;

...;

this.方法名 = function(参数){

};

...

}

创建对象：var 对象名 = new 类名(参数);

访问属性：对象名.属性名；

访问方法：对象名.方法名(参数);

 <script type="text/javascript">
        function Boy(h, w, s) {
            //属性身高
            this.h = h;
            //体重
            this.w = w;
            //性别
            this.s = s;
            //方法
            this.show = function() {
                alert("身高：" + this.h + "m,体重：" + this.w + "kg,性别：" + this.s);
            }
        }
​
        var b1 = new Boy(1.8, 70, "男");
        //alert("身高：" + b1.h + "m,体重：" + b1.w + "kg,性别：" + b1.s);
        b1.show();
        
        var b2 = new Boy(1.6, 50, "女");
        //alert("身高：" + b2.h + "m,体重：" + b2.w + "kg,性别：" + b2.s);
        b2.show();
    </script>

可以对任何对象增加属性和方法：例如：a.type = "猫" a.show = function(){}

可以对属性和方法进行删除：例如：delete a.type delete a.show

  <script type="text/javascript">
        function Animal(color) {
            this.color = color;
        }
        
        var a = new Animal("黄色");
        console.log(a);
        //增加对象中的属性
        a.type = "猫";
        console.log(a);
        
        var b = new Animal("绿色");
        console.log(b);
        
        //删除对象中的属性
        delete b.color;
        console.log(b);
        
        //增加对象中的方法
        a.show = function(){
            alert("增加的方法");
        }
        console.log(a);
        a.show();
        
        //删除方法
        delete a.show;
        console.log(a);
    </script>

所有的类的父类是Object，可以直接定义对象

var e1 = {}; 这个时候定义的对象是Object对象，等价于 var e1 = new Object();

var e1 = {

属性名: 值,

...

方法名: 方法

};

 <script type="text/javascript">
        var e1 = {
            ename: "tom",
            esex: "男",
            ejob: "程序员",
            esalary: 10000,
            eat: function(){
                alert("吃饭。。。");
            }
        };
        
        console.log(e1);//Object 没有类名
        e1.eat();
        alert(e1.ename);
        
        var e2 = {};
        e2.color = "黑色";
        e2.type = "小狗";
        e2.show = function(){
            alert("这是一只"+e2.color+"的"+e2.type);
        }
        console.log(e2);
        e2.show();
        
    </script>

19、类，数组

  • 类中可以有数组，类
  • 数组中可以数组，类
  <script type="text/javascript">
        // 类中可以有数组，类
        var stu = {
            stuName: "tom",
            setSex: "男",
            stuTel: [13896547895, 13578451265],
            stuAddress: "火星",
            cat: {
                color: "橘色",
                cname: "大黄"
            }
        }
​
        console.log(stu);
        alert(stu.stuTel[0]);
        alert(stu.cat.color);
​
        //数组中有类
        var arr = [{
            stuNo: 1,
            stuName: "tom",
            stuScore: 98
        }, {
            stuNo: 2,
            stuName: "amy",
            stuScore: 99
        }, {
            stuNo: 3,
            stuName: "jack",
            stuScore: 88
        }];
        console.log(arr);
        alert(arr[0].stuName);
    </script>

 

不会敲代码呀～
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
DOM简介+操作元素+修改样式+案例
phoebemeng的博客
07-13 526
DOM基础操作方法
js通过标签元素id，用document.getElementById().style设置标签元素的css属性
此人很懒，什么都没有写
07-07 1万+
参考：https://blog.csdn.net/kissing7/article/details/8924112 对定义了id的html标签元素，js可以通过以下方法修改标签元素的css样式： 方法一： 对标签定义一个css样式： document.getElementById(“idname”).style.display=“none”; 方法二： 对标签定义多个css样式： var a = document.getElementById(“idname”); with(a.style){ color
HTML页面的<script type="text/javascript">含义。
看不过的黑工坊
04-27 2万+
在老的HTML版本，如果需要在HTML页面中声明一段js脚本，需要做的声明，表明在 和 中添加的文本是js脚本； 在HTML5以后， HTML5的默认脚本语言是就是，所以无需显示声明 type="text/javascript" ，直接使用即可。
TypeScript转javaScript
Good Luck
09-29 9万+
全局安装typescript cnpm install -g typescript vs终端黑窗口：>tsc --init 此时会在项目跟目录下自动生成一个文件：tsconfig.json 打开并设置一下js的输出路径： 点击终端->运行任务 选择tsc:监视 此时配置的js路径中就有了ts相应的js文件了。 ...
JavaScript基础大总结
Augenstern_QXL的博客
07-31 13万+
✍初始JavaScirpt JavaScript 是世界上最流行的语言之一，是一种运行在客户端的脚本语言 （Script 是脚本的意思） 脚本语言：不需要编译，运行过程中由 js 解释器( js 引擎）逐行来进行解释并执行 现在也可以基于 Node.js 技术进行服务器端编程 ????浏览器执行JS简介 浏览器分成两部分：渲染引擎和 JS 引擎 渲染引擎：用来解析HTML与CSS，俗称内核，比如 chrome 浏览器的 blink ，老版本的 webkit JS 引擎：也称为 JS 解释器。 用来读
javascript百炼成仙 第一章 掌握JavaScript基础01 初入宗门
热门推荐
java小白翻身
10-06 16万+
乐阳村，处于脚本大陆东部的边缘地带，民风淳朴，村名日出而作，日落而息。这一日清晨，所有村民来到村庄的门口，正在为一个十五六岁的少年送别。只见那少年虽然身体瘦弱，可是目中绽放出异彩，身躯虽不壮实，倒也挺拔。 “叶小凡，你是我们全村人的骄傲，百年来唯一一个具备修行JavaScript甲等资质的孩子！马上会有千鹤派的大人来接你，今后你一定要认真修行，给我们全村的人争光！” 他叫叶小凡，几天前通过了修行资质的检验，符合修行JavaScript的资质。 “千鹤派！”叶小凡眼前一亮，语气中伴随着激动，两眼放光。千鹤派，
javascript3
03-15
javascript3
hyf-javascript3
05-18
hy-javascript3
JavaScript3D实例
01-12
JavaScript3D实例，JavaScript3D实例希望有帮助
module3javascript
03-31
module3javascript
Javascript3-内置对象
11-14
Javascript3- 内置对象
ant design DatePicker日期选择框指定分钟的间隔minuteStep属性
最新发布
u010234868的专栏
05-17 86
在上面的例子中，DatePicker 将只允许用户以 15 分钟为间隔选择分钟。是 Ant Design 的 TimePicker时间选择框组件的一个属性。设置为 30，则用户可以选择以 30 分钟为间隔的分钟值。如果你想让分钟选项只能以 15 分钟为间隔选择，你可以将。
(Vue3+TS+Volar) 全局组件配置类型声明的最佳实践
从今年开始写写博客~~
05-14 209
简评：Volar官方全局组件的推荐写法，基于Volar，必须安装该插件，GlobalComponents是Volar专门为了解决全局组件类型而新增的类型接口。定义全局组件：使用GlobalComponents类型接口声明类型。
前端Vue架构
weixin_45678402的博客
05-12 295
defineProperty：监听范围比较窄，只能通过属性描述符去监听已有属性的读取和赋值；兼容性较差，只能兼容支持ES6 的浏览器（要求监听数据是对象）这样写的话，依赖收集只能收集到属性c；如果访问的属性值还是一个对象，对属性值再次进行代理；创建视图的函数（render）和数据之间的关联；当数据发生变化的时候，希望render重新执行；下面的用法，只能收集到c，收集不到c1。依赖收集：a color: #f00。依赖收集：a color: #f00。如何知晓数据对应的函数；监听数据的读取和修改；
Vue.js的发展史（一）
2301_79683791的博客
05-15 731
Vue (发音为 /vjuː/，类似view) 是一款用于构建用户界面的 JavaScript 框架。它基于标准 HTML、CSS 和 JavaScript 构建，并提供了一套声明式的、组件化的编程模型，帮助你高效地开发用户界面。无论是简单还是复杂的界面，Vue 都可以胜任。来源官方解释-----简介 | Vue.js (vuejs.org)简单来说：Vue是一个属于JS的库，可直接引入一个JS文件就可以使用，与传统JS和JQuery框架不同，Vue的渐进式框架。
setImmediate不能在浏览器中执行
Keep trying, keep going
05-14 157
的延迟时间设置为 0，但实际的延迟可能会因浏览器的最小延迟时间限制而稍有不同。函数实现类似的效果。函数不是浏览器的标准 API，而。
vue3vue3vue3vue3vue3vue3vue3vue3vue3vue3vue3vue3
口袋的天空的博客
05-12 1031
vue3,elementui-plus,pinia
vue2流星雨（可调角度）
m0_46961166的博客
05-17 155
新建StarBackground.vue组件。在需要使用的页面引用。
javascript sm3
12-16
JavaScript sm3是一种基于JavaScript语言实现的SM3哈希算法。SM3是中国自主设计的密码杂凑算法。 SM3是将输入的数据，通过一系列的运算得到一个固定长度的输出，常用于密码学和信息安全领域。它具有很高的安全性和抗碰撞能力。 JavaScript sm3算法的实现可以在网页上直接运行，方便用户对输入数据进行哈希运算。它可以用于验证文件的完整性、密码的存储和校验，以及数字证书和电子签名等领域。 JavaScript sm3的运算过程包括逻辑运算、位运算和置换运算等，确保了数据的随机性和保密性。它还具有快速计算和高效性能的特点。 使用JavaScript sm3算法时，需要将待哈希的数据作为输入，得到一个固定长度的输出。输出的哈希值可以通过比较来验证数据是否被修改过。如果输入数据一致，那么得到的哈希值也应该是一致的。如果输入数据有任何改变，那么得到的哈希值也会发生变化。 总而言之，JavaScript sm3是一种基于JavaScript语言实现的密码杂凑算法，可以在网页上直接运行，用于确保数据的安全性和完整性。它具有高安全性、抗碰撞能力以及快速计算和高效性能的特点。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值