webapi练习

最新推荐文章于 2024-01-30 15:40:02 发布
最新推荐文章于 2024-01-30 15:40:02 发布
阅读量383 收藏 1
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_22182989/article/details/90416616
版权

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>demo</title>
    <style>
        .cls {
            background-color: black;
        }
    </style>
</head>
<body id="bd">
    <input type="button" value="开/关灯" id="btn"/>

    <script>
        function my$(id) {
            return document.getElementById(id);
        }

        my$("btn").onclick = function () {
            document.body.className = document.body.className != "cls" ? "cls" : "";
        }

    </script>
</body>
</html>

效果：

**************

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>demo</title>
</head>
<body>

    <input type="button" value="显示大图" id="btn"/>
    <img src="../image/kiwi-small.jpg" alt="" id="im">
    <script>
        function my$(id) {
            return document.getElementById(id);
        }

        my$("btn").onclick = function () {
            my$("im").src = "../image/kiwi.jpg";
        }
    </script>
</body>
</html>

效果：

********

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>demo</title>
</head>
<body>
    <input type="button" value="修改性别" id="btn1"/>
    <input type="radio" value="1" name="sex"/>男
    <input type="radio" value="2" name="sex" id="rad1"/>女
    <input type="radio" value="3" name="sex"/>保密
    <script>
        function my$(id) {
            return document.getElementById(id);
        }

        my$("btn1").onclick = function () {
            my$("rad1").checked = true;
        }
    </script>
</body>
</html>

效果：

******

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>demo</title>
</head>
<body>
    <input type="button" value="选择兴趣" id="btn2"/>
    <input type="checkbox" value="1" name="xingqu"/>吃饭
    <input type="checkbox" value="2" name="xingqu"/>睡觉
    <input type="checkbox" value="3" name="xingqu" id="ck1"/>打豆豆
    <input type="checkbox" value="4" name="xingqu"/>打篮球
    <input type="checkbox" value="5" name="xingqu"/>打足球
    <input type="checkbox" value="6" name="xingqu" id="ck2"/>打铅球

    <script>
        function my$(id) {
            return document.getElementById(id);
        }

        my$("btn2").onclick = function () {
            my$("ck1").checked = true;
            my$("ck2").checked = true;
        }
    </script>
</body>
</html>

效果：

*********

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>demo</title>
</head>
<body>
    <input type="button" value="点菜" id="btn"/>
    <select name="" id="ss">
        <option value="1">油炸榴莲</option>
        <option value="2">爆炒臭豆腐</option>
        <option value="3">清蒸助教</option>
        <option value="4" id="op1">凉拌班主任</option>
        <option value="5">红烧小苏</option>
    </select>
    <script>
        function my$(id) {
            return document.getElementById(id);
        }
    
        my$("btn").onclick = function () {
            my$("op1").selected = true;
        }
    </script>
    <textarea name="" id="tt" cols="30" rows="10" readonly="readonly">
      注册用户的协议:
    
      某人问智者,
      大师:您觉得怎么做才是最快乐的?
      回答说:不要和愚者辩论
      这个人说:我不这么认为!
      大师说:您说的对,
      我就是这么帅
    
    </textarea>
    <input type="button" value="注册" id="btn2"/>
    
    <script>
        my$("btn2").onclick = function () {
            my$("tt").value = "哦耶";
        }
    </script>
</body>
</html>

效果：

*********

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>demo</title>
</head>

<body>

    <input type="button" value="设置样式" id="btn"/>
    <div id="dv"></div>
    <script>
        function my$(id) {
            return document.getElementById(id);
        }
    
        my$("btn").onclick = function () {
            my$("dv").style.width = "300px";
            my$("dv").style.height = "200px";
            my$("dv").style.backgroundColor = "pink";
        }
    </script>
</body>
</html>

效果：

*******

案例协议按钮禁用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>demo</title>
</head>
<body>
    <textarea name="texta" id="" cols="30" rows="10">
        而分开【阿斯兰分配【乐旅股份【跑路费
    </textarea>
    <input type="button" value="请仔细阅读协议（5）" id="btn" disabled="disabled"/>
    <script>
        function my$(id) {
            return document.getElementById(id);
        }

        var time = 5;
        var timeId = setInterval(function () {
            time--;
            my$("btn").value = "请仔细阅读协议（" + time + "）";
            if (time <= 0) {
                clearInterval(timeId);
                my$("btn").disabled = false;
                my$("btn").value = "同意";
            }
        }, 1000);
    </script>
</body>
</html>

效果：

**************

渐变

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>demo</title>
    <style>
        div {
            width: 300px;
            height: 200px;
            background-color: hotpink;

        }
    </style>

</head>
<body>
    <div id="dv"></div>
    <input type="button" value="渐变" id="btn"/>
    <script>
        function my$(id) {
            return document.getElementById(id);
        }

        my$("btn").onclick = function () {
            var opacity = 10;
            var timeId = setInterval(function () {
                opacity--;
                if (opacity <= 0) {
                    clearInterval(timeId);
                }
                my$("dv").style.opacity = opacity / 10;
            }, 200);
        };
    </script>
</body>
</html>

效果：

***************

为元素绑定事件和解绑事件的兼容代码


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>title</title>

</head>
<body>
<input type="button" value="按钮" id="btn1"/>
<input type="button" value="干掉第一个按钮的事件" id="btn2"/>
<script src="common.js"></script>
<script>

  //绑定事件的兼容
  function addEventListener(element,type,fn) {
    if(element.addEventListener){
      element.addEventListener(type,fn,false);
    }else if(element.attachEvent){
      element.attachEvent("on"+type,fn);
    }else{
      element["on"+type]=fn;
    }
  }
  //解绑事件的兼容
  //为任意的一个元素,解绑对应的事件
  function removeEventListener(element,type,fnName) {
    if(element.removeEventListener){
      element.removeEventListener(type,fnName,false);
    }else if(element.detachEvent){
      element.detachEvent("on"+type,fnName);
    }else{
      element["on"+type]=null;
    }
  }
  function f1() {
    console.log("第一个");
  }
  function f2() {
    console.log("第二个");
  }
  addEventListener(my$("btn1"),"click",f1);
  addEventListener(my$("btn1"),"click",f2);
  my$("btn2").onclick=function () {
    removeEventListener(my$("btn1"),"click",f1);
  };


</script>
</body>
</html>

效果：


*******************

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

南北极之间
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
JS-WebAPIs-DOM练习题(tab栏/输入框)
Fky_mie的博客
03-07 434
JS-WebAPIs第1天-DOM练习题 参考: pink老师JS基础 JavaScript基础语法-dom/bom-es6-jQuery-数据可视化echarts-包含笔记源码作业黑马程序员pink老师前端入门视频教程（持续更新） MDN-Web API接口参考 文档对象模型 文章目录JS-WebAPIs第1天-DOM练习题一, 常用元素属性操作练习练习1: 点击按钮显示现在的时间练习2: 根据不同时间显示不同提示语二, 表单的属性操作练习练习3: 点击显示密码练习4: 京东关闭顶部/底部广告练习5:
Web_API_Exercises：存放我的Web api练习的存储库
03-04
在这个"Web_API_Exercises"存储库中，我们很显然会探索与Web API相关的各种实践和示例。本文将深入讲解Web API的核心概念、C#在Web API中的应用以及如何通过实际项目来学习和提升这方面的技能。 1. **Web API的核心...
十一、常用API——练习
qq_72332648的博客
01-30 2014
键盘录入键盘录入算法水题算法水题算法水题算法水题。
【常用API】常用API练习
qq_49047454的博客
08-09 753
System.out.println("相隔天数为："+(Integer.parseInt(b.replace("-",""))-Integer.parseInt(a.replace("-",""))));System.out.println("结果为："+(Integer.parseInt(a)/Integer.parseInt(b)));System.out.println("结果为："+(Integer.parseInt(a)-Integer.parseInt(b)));......
免费api查询接口
前端_李嘉豪
12-09 1886
为了方便广大的开发者，特此统计了网上诸多的免费API，为您收集免费的接口服务，做一个api的搬运工，以后会每月定时更新新的接口。有些接口来自第三方，在第三方注册就可以成为他们的会员，免费使用他们的部分接口。 地址:https://github.com/fangzesheng/free-api 喜欢上方小程序,需要源码的,添加博主微信私信小编. ...
API综合练习
Janna_woo的博客
03-14 226
API练习
WebApi_OAuth_Demo
05-04
【WebApi_OAuth_Demo】项目是一个综合性的示例，展示了如何在WebAPI应用程序中集成OAuth身份验证服务，以及客户端测试的实现。这个项目利用了OWIN（Open Web Interface for .NET）中间件来构建安全的API接口，并提供...
webapi-tutorial:Web API 教程
05-01
"webapi-tutorial-master"可能包含了一系列示例代码、文档和练习，帮助你深入理解Web API的开发和浏览器API的使用。从基础开始，逐步学习HTTP协议、RESTful设计、路由、模型绑定、错误处理、身份验证等关键概念。...
【Web API DOM11】节点操作
最新发布
06-06
在本教程“Web API DOM11”中，我们将深入探讨如何利用DOM1进行节点操作，从而动态地修改、添加或删除网页内容。 首先，了解DOM的基础概念至关重要。DOM将网页视为一个可操作的树形结构，其中每个元素、属性和文本...
API练习
02-25
浏览器API是由Web浏览器提供的，例如DOM（文档对象模型）、Fetch API用于异步请求、XMLHttpRequest（XHR）用于 AJAX 操作等。自定义API则是由开发人员根据特定需求创建的，以便在自己的项目或库中重用代码。 1. **...
HttpWebRequest C# WEBAPI 测试案例
12-06
HttpWebRequest C# WEBAPI 测试案例；HttpWebRequest C# WEBAPI 测试案例
javaAPI简单练习
09-21
对于常用的一些适合初学者的API练习，初学者在学到一些简单的API文档的时候，这个文档来帮助我们熟悉熟练的掌握常用API的操作练习。
21-JavaSE基础巩固练习：常用API的五道练习题
yelitoudu的博客
12-31 444
JavaSE基础巩固练习：常用API的五道练习题
WebApi难点练习与解析
XiaLuoCXY的博客
12-14 852
<!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-Compatible" content="ie=edge" /> <titl.
Web API-练习
Qiuxuntao的博客
11-02 614
每日作业-Web APIs第01天 1 - 输入框内容显示和隐藏（加强训练） 题目描述 仿世纪佳缘网，显示和隐藏输入框中的提示内容，具体表现如下图： 1）输入框获得焦点，提示内容消失，边框变色 2）输入框失去焦点，如果内容为空，提示内容恢复，边框变色；如果内容不为空，只有边框变色 训练目标 能够操作元素的属性和样式属性 训练提示 1.给文本框注册获得焦点事件，清空value值，改变border的颜色 2.给文本框注册失去焦点事件 3.获取并判断文本框的内容 4.内容为空，恢复提示内容，边框恢复
前端常考面试题三：JS-Web-API基础篇
Y_soybean_milk的博客
06-29 842
前言 1.从JS基础知识到JS Web API JS基础知识，规定语法（ECMA 262标准) JS Web API，网页操作的API (W3C标准) 前者是后者的基础，两者结合才能真正实际应用 2.vue和 React框架应用广泛，封装了DOM操作，但DOM操作一直都会前端工程师的基础、必备知识 一、DOM 知识点 1.DOM本质 从HTML文件解析出来的一棵树 2.DOM节点操作 获取DOM节点 attribute p1.setAttribute('data-name', 'imooc') p1
学习某些API的方法
稀有猿诉
01-23 4635
<br /><br />学习某些API的方法<br />    这里的API可能是某个系统平台，开发包，开发平台，开发工具等等，因为任何系统和技术方法提供给开发者的打包方式都是一系列API。<br />无论你有在哪一层级开发，从硬件驱动到系统软件，从应用程序到网页服务器总是要依赖和使用某些API(Application Programming Interface应用程序接口)，当然，通常要依赖和作用更底层或同层的API。因此，我们总是要学习和使用各种API。当学习的时候要注意总结一些方法，以提高学习的效率：
VC编程练习之API笔记（一）
南城故梦的专栏
12-11 1105
1、 取得、设置控件文本：     CString str;     GetDlgItem(IDC_STATIC)->GetWindowText(str);     GetDlgItem(IDC_STATIC)->SetWindowText("my love!"); 2、创建按钮：     Cbutton m_btn;     M_btn.create(“要显示的文本”， 样式（参见M
webAPI 第一天 的相关习题
WjiaoJ的学习
03-21 398
习题是提升的根本,可以将自己的知识更好地巩固 第一天的课程总共有11道练习题,我们一一填写 1.点击按钮，切换图片 2. 点击按钮，修改图片的宽高 -- width、height属性 3. 点击按钮，修改div的样式 -- 预定义类名 4. 点击按钮，div进行显示和隐藏（两个按钮） -- 预定义类名 5. 点击按钮，div进行显示和隐藏（一个按钮） -- 预定义类名 + innerText属...
精通ASP.NET Web API 2：面向MVC开发者
"Expert ASP.NET Web API 2 for MVC Developers 是一本由 Adam Freeman 撰写的书籍，主要关注如何为有经验的MVC框架开发者介绍Web API 2。这本书旨在将Web API与MVC框架集成，深入讲解构建Web API应用程序所需的工具...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

南北极之间

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值