JavaScript实现网页交互

这篇具有很好参考价值的文章主要介绍了JavaScript实现网页交互。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

1.JavaScript简介

JavaScript 是⼀种 基于对象的、事件驱动型的、解释型的脚本语⾔,JS设计的⽬的是实现⽹⻚的交互能⼒

•基于对象:(区别于⾯向对象),JavaScript和Java语⾔⼀样可以通过对象调⽤⽅法 obj.fn()

•事件驱动:⽹⻚⽂档中的HTML标签事件触发JavaScript代码执⾏

•解释型:边解释边执⾏(不会先对⽹⻚进⾏编译⽣成中间⽂件)

•脚本语⾔:JavaScript不会独⽴运⾏,依赖于⽹⻚⽂件(HTML⽂档)存在 (通俗的理解为js要写在⽹⻚中)

2.案例

先建立一个HTML5文件,新增三个按钮

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script src="js/test.js"></script>
</head>
<body>
<input type="button" value="clickMe1" onclick="test01();"></input>
<input type="button" value="clickMe2" onclick="test02();"></input>
<input type="button" value="clickMe3" onclick="test03();"></input>
</body>
</html>

2.1 定义两个变量分别计算他们和差积商

function test01(a,b){
  console.log(a+"和"+b+"的差为"+(a-b));
  console.log(a+"和"+b+"的积为"+(a*b));
  console.log(a+"和"+b+"的商为"+(a/b));
}

2.2 定义3个变量分别记录年⽉⽇,使⽤switch结构,计算出是指定的年⽉⽇的该年的第⼏天

function test02(y,m,d){
  var sum = 0;//记录总天数
  switch (m-1){//由月份计算,利用case穿透的特点
    case 11:sum += 30;
    case 10:sum += 31;
    case 9:sum += 30;
    case 8:sum += 31;
    case 7:sum += 31;
    case 6:sum += 30;
    case 5:sum += 31;
    case 4:sum += 30;
    case 3:sum += 31;
    case 2:sum += 28;
    case 1:sum += 31;
    case 0:sum += d;
  }
  if(m > 2) {
    if (y % 400 == 0 || y % 4 == 0 && y % 100 != 0) {
      sum++;
    }
    console.log("这是"+y+"年的第"+sum+"天")
  }
  }

2.3 使⽤循环在⻚⾯上打印出99乘法表

function test03(){
  document.write("<table>");
  for (var i = 1; i < 10; i++) {
    document.write("<tr>");
    for (var j = 1; j <= i; j++) {
      document.write("<td style='border: 3px solid brown;'>");//设置元素边框border,颜色是brown
      document.write(j + " * " + i + " = " + i * j + " ");
      document.write("</td>");
    }
    document.write("<br>");
    document.write("</tr>");
  }
  document.write("</table>");
}

2.4 面试题 两个布尔类型的变量是否可以求和,为什么

可以,在JavaScript中将true看做1计算,将false看做0,如果出现字符就会当做字符串拼接,如:文章来源地址https://www.toymoban.com/news/detail-484974.html

var a = true;
var b = false;
var c = xx;
var d = a+b;
var e = c+a;
console.log(d);//结果为1
console.log(e);//结果为xxtrue

到了这里,关于JavaScript实现网页交互的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • JavaScript实现液体流动效果和鼠标交互

    在现代Web应用中,动态效果和交互性已经成为了不可或缺的元素。在这篇博客中,我们将使用JavaScript创建一个液体流动效果,并添加鼠标交互功能,让用户能够与页面进行互动。 创建画布和粒子 首先,我们需要创建一个画布元素,用于绘制我们的液体流动效果。在HTML中添加

    2024年02月13日
    浏览(40)
  • 前端 JavaScript 与 HTML 怎么实现交互?

    前端的交互性是通过JavaScript与HTML结合实现的。JavaScript作为一种脚本语言,可以嵌入HTML中,通过对DOM(文档对象模型)的操作,实现与用户的交互。以下将详细介绍前端JavaScript与HTML如何实现交互,包括事件处理、DOM操作、表单交互等方面的内容。 事件是指用户在页面上的动

    2024年01月22日
    浏览(38)
  • javascript实现网页背景音乐自动播放

    在HTML文档中添加一个标签,指定音乐文件路径和自动播放属性。 在JavaScript中获取该元素,设置其音量为0(静音)或一个合适的值。 在网页加载完毕后,调用元素的play()方法,开始播放音乐。 完整代码如下: 注意:自动播放可能会受到浏览器限制,需要用户允许浏览器自动

    2024年02月04日
    浏览(38)
  • HTML + JavaScript 实现网页录制音频与下载

    在这个数字化的时代,网页端的音频处理能力已经成为一个非常热门的需求。本文将详细介绍如何利用 getUserMedia 和 MediaRecorder 这两个强大的 API,实现网页端音频的录制、处理和播放等功能。 getUserMedia getUserMedia 和 MediaRecorder 是 HTML5 中两个非常重要的 API,用于访问设备媒体

    2024年02月03日
    浏览(25)
  • web-view实现app应用与网页的数据交互

    一、网页向app传递数据 1、在网页项目的index.html页面引入uniapp的js文件,引入成功之后就可以在事件里面使用uni.postMessage(网页项目是用vue框架写的) 2、向app传递数据,可以直接写在点击事件里面  二、app处理接收的数据并向网页传递数据 1、app项目中引入网页 2、handleMess

    2023年04月16日
    浏览(27)
  • Qt QWebEngine 加载网页及交互,实现C++与JS 相互调用

    本篇主要介绍QT开发过程中如何利用QWebengine加载网页,通过C++与JS 相互调用,实现QT程序与HTML网页的交互。QtWebEngine 是Qt的一个子模块,它提供了一个 Web 浏览器引擎,可以轻松地将互联网上的内容嵌入到 Qt 应用程序中。 Qt WebEngine 分为以下三大部分: Qt WebEngine Widgets Module 用

    2024年02月04日
    浏览(35)
  • 网页使用JavaScript实现用户点击播放后再加载视频

    由于视频通常体积较大,消耗流量开销较多,所以要实现点击播放后再加载视频资源以减少流量消耗,以下是代码示例

    2024年02月01日
    浏览(28)
  • 智能导航:教你轻松用JavaScript实现网页电梯导航功能

    提示:本文为原创内容 文章目录 前言 二、功能实现 1.页面效果图 2.HTML部分 3.CSS部分 4.JavaScrip部分 5.整体代码 总结  在当前的网络时代,用户体验已经成为了前端开发的重点关注领域。由于移动设备的广泛使用,用户在阅读长篇内容时可能会感到操作不便。然而,电梯导航

    2024年01月16日
    浏览(33)
  • 将网页数据读入数据库+将数据库数据读出到网页——基于python flask实现网页与数据库的交互连接【全网最全】

    【全网最全!保姆级教学!!】 本篇博客基于flask技术,实现数据库和网页端的交互。 实现效果:在网页端输入数据,能够将数据存入数据库。反向操作时,能将数据库的数据取出,显示在网页端。不仅如此,还支持数据的查询和修改。  读取网页数据存入数据库,效果如下

    2024年02月13日
    浏览(33)
  • flutter开发实战-inappwebview实现flutter与Javascript的交互JSBridge

    flutter开发实战-inappwebview实现flutter与Javascript的交互JSBridge 在使用webview中,需要实现flutter与Javascript交互,在使用webview_flutter插件的时候,整理了一下webview与Javascript的交互JSBridge,具体可以查看 https://blog.csdn.net/gloryFlow/article/details/131683122 这里使用inappwebview插件来实现flutter与

    2024年02月08日
    浏览(34)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包