标签 Javascript 下的文章

【华为OD机试|01】最远足迹（Java/C/Py/JS）

2024-08-11

题目描述：

给定一个字符串t，表示一个足迹的时间序列（字符串只包含小写字母'a' - 'z'），请找到最远的两个不重叠的重复子串的长度。

解题思路：

这是一个字符串匹配问题，可以通过后缀自动机（Suffix Automaton）或者Hash来解决。这里提供一个简单的后缀自动机解法。

后缀自动机构建后，我们可以考虑每个状态代表的子串，并寻找其最长的可以通过添加一个字符扩展到另一个状态的后缀。这两个状态的最长长度就是不重叠的重复子串的长度。

以下是Java的示例代码：




public class Solution {
    public int getMaxRepeatSubstr(String t) {
        int n = t.length();
        int[][] suffix = new int[n][26];
        int[] parent = new int[n];
        int[] len = new int[n];
        int j = 0, p = 0;
        for (int i = 0; i < n; ++i) {
            j = (j + 1) % n;
            parent[j] = p;
            len[j] = len[p] + 1;
            p = j;
            char c = t.charAt(i);
            while (p != 0 && suffix[p][c - 'a'] == 0) {
                suffix[p][c - 'a'] = j;
                p = parent[p];
            }
            if (p != 0) {
                int k = suffix[p][c - 'a'];
                if (len[j] - len[k] > 1) {
                    return len[j] - len[k] - 1;
                }
                p = k;
            }
        }
        return 0;
    }
}

在这个代码中，suffix[i][j]表示以字符'a' + j为结尾的长度为i的字符串的后缀开始位置，parent[i]表示状态i的父状态，len[i]表示状态i代表的后缀的长度。通过维护这个后缀自动机，我们可以在线性时间复杂度内找到答案。

Vue3 Nodejs后台搭建

2024-08-11

在搭建Vue3和Node.js后端时，你可以使用以下步骤：

安装Node.js环境。
创建Vue3项目：
```
npm create vue@latest
```
选择Vue3，并且按照提示填写项目信息。
进入项目目录，并启动Vue3项目：
```
cd <project-name>
npm run dev
```
安装Express.js：
```
npm install express --save
```

在项目根目录下创建一个名为 server.js 的文件，并写入以下代码：




const express = require('express');
const app = express();
const port = 3000;
 
app.get('/', (req, res) => {
  res.send('Hello World!');
});
 
app.listen(port, () => {
  console.log(`Server running on port ${port}`);
});

启动Node.js后端服务器：
```
node server.js
```

配置Vue3项目以支持前后端分离开发，例如使用代理来将API请求转发到Node.js服务器。修改 vue.config.js 文件：




module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://localhost:3000',
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''
        }
      }
    }
  }
};

在Vue3项目中发送API请求，例如使用Axios：




// 安装Axios
npm install axios
 
// 在Vue组件中使用Axios
import axios from 'axios';
 
export default {
  async mounted() {
    try {
      const response = await axios.get('/api/data');
      console.log(response.data);
    } catch (error) {
      console.error(error);
    }
  }
};

以上步骤为你提供了搭建Vue3和Node.js后端的基本框架。你可以根据实际需求，在此基础上添加更多功能，例如数据库连接（如使用MongoDB或MySQL），API路由，认证等。

Recorder.js：一款简单的Web音频录制库

2024-08-11

Recorder.js 是一个简单的 JavaScript 库，用于处理浏览器中的音频录制。以下是使用 Recorder.js 进行音频录制的基本示例：




<!DOCTYPE html>
<html>
<head>
  <title>Recorder.js Example</title>
</head>
<body>
 
<script src="path/to/recorder.js"></script>
<script>
  // 初始化一个新的 Recorder 实例
  var recorder = new Recorder({
    sampleRate: 44100, // 采样率
    bitRate: 16 // 比特率
  });
 
  // 开始录制
  function startRecording() {
    recorder.open(function() {
      recorder.start();
    });
  }
 
  // 停止录制并导出音频
  function stopRecording() {
    recorder.stop(function(blob) {
      // 使用 blob 对象处理录制的音频，例如使用 AJAX 上传或创建一个用于播放的 URL
      var url = URL.createObjectURL(blob);
      var audio = new Audio(url);
      audio.play();
    });
  }
</script>
 
<button onclick="startRecording()">开始录制</button>
<button onclick="stopRecording()">停止录制</button>
 
</body>
</html>

在这个例子中，我们首先引入了 Recorder.js 库。然后，我们创建了一个新的 Recorder 实例，并定义了采样率和比特率。startRecording 函数用于开始录制音频，而 stopRecording 函数则停止录制，并通过创建一个 Blob URL 使得用户可以播放录制的音频。

请注意，由于浏览器安全性和隐私限制，这个例子可能需要在一个 HTTPS 服务器上运行才能正常工作。此外，用户可能需要在页面上明确授予权限来使用麦克风。

APP开发_Android 与 js 互相调用

2024-08-11

在Android应用中与JavaScript互相调用，通常使用WebView组件。以下是一个简单的例子：

在Android中调用JavaScript:




WebView webView = (WebView) findViewById(R.id.webview);
webView.getSettings().setJavaScriptEnabled(true);
 
// 加载页面
webView.loadUrl("file:///android_asset/your_page.html");
 
// 在Java中调用JavaScript函数
webView.evaluateJavascript("javascriptFunction()", new ValueCallback<String>() {
    @Override
    public void onReceiveValue(String value) {
        // 处理JavaScript返回的结果
    }
});

在JavaScript中调用Android:

首先在HTML中添加一个按钮，当被点击时调用JavaScript函数：




<!-- your_page.html -->
<button onclick="callAndroidFunction()">Call Android Function</button>
 
<script type="text/javascript">
function callAndroidFunction() {
    // 调用Android中的方法
    // 假设你的Android类名为YourActivity，方法名为updateFromJS
    YourActivity.updateFromJS(param1, param2);
}
</script>

然后在Android的Activity中添加对应的方法供JavaScript调用：




// 添加@JavascriptInterface注解以确保API的可访问性
public class YourActivity extends AppCompatActivity {
 
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_your);
 
        WebView webView = (WebView) findViewById(R.id.webview);
        webView.getSettings().setJavaScriptEnabled(true);
        webView.addJavascriptInterface(new WebAppInterface(this), "YourActivity");
        webView.loadUrl("file:///android_asset/your_page.html");
    }
 
    // 被JavaScript调用的方法
    @JavascriptInterface
    public void updateFromJS(String param1, String param2) {
        // 处理JavaScript传来的参数
    }
 
    // 内部类，用于Web视图与Android之间的交互
    public class WebAppInterface {
        Context mContext;
 
        WebAppInterface(Context c) {
            mContext = c;
        }
 
        // 可供JavaScript调用的方法
        @JavascriptInterface
        public void updateFromJS(String param1, String param2) {
            // 调用Android中的方法
        }
    }
}

确保在AndroidManifest.xml中添加网络权限（如果需要）：




<uses-permission android:name="android.permission.INTERNET" />

以上代码提供了一个简单的示例，展示了如何在Android应用中嵌入WebView组件，并实现Java与JavaScript之间的交互。

2024-08-11

题目描述：

给定一个整数数组arr，小明想找出包含arr中所有奇数的子数组的长度最大是多少。

解法1：Python




def find_max_length_of_subarray_with_all_odd_numbers(arr):
    odd_count = 0
    max_length = 0
    for num in arr:
        if num % 2 != 0:
            odd_count += 1
        else:
            max_length = max(max_length, odd_count)
            odd_count = 0
    return max(max_length, odd_count)
 
# 示例
arr = [3, 1, 3, 5, 2, 1, 7, 5]
print(find_max_length_of_subarray_with_all_odd_numbers(arr))  # 输出应为4

解法2：Java




public class Main {
    public static void main(String[] args) {
        int[] arr = {3, 1, 3, 5, 2, 1, 7, 5};
        System.out.println(findMaxLengthOfSubarrayWithAllOddNumbers(arr));  // 输出应为4
    }
 
    public static int findMaxLengthOfSubarrayWithAllOddNumbers(int[] arr) {
        int oddCount = 0;
        int maxLength = 0;
        for (int num : arr) {
            if (num % 2 != 0) {
                oddCount++;
            } else {
                maxLength = Math.max(maxLength, oddCount);
                oddCount = 0;
            }
        }
        return Math.max(maxLength, oddCount);
    }
}

解法3：JavaScript




function findMaxLengthOfSubarrayWithAllOddNumbers(arr) {
    let oddCount = 0;
    let maxLength = 0;
    for (let num of arr) {
        if (num % 2 !== 0) {
            oddCount++;
        } else {
            maxLength = Math.max(maxLength, oddCount);
            oddCount = 0;
        }
    }
    return Math.max(maxLength, oddCount);
}
 
// 示例
const arr = [3, 1, 3, 5, 2, 1, 7, 5];
console.log(findMaxLengthOfSubarrayWithAllOddNumbers(arr));  // 输出应为4

解法4：C




#include <stdio.h>
 
int findMaxLengthOfSubarrayWithAllOddNumbers(int* arr, int arrSize) {
    int oddCount = 0;
    int maxLength = 0;
    for (int i = 0; i < arrSize; i++) {
        if (arr[i] % 2 != 0) {
            oddCount++;
        } else {
            maxLength = oddCount > maxLength ? oddCount : maxLength;
            oddCount = 0;
        }
    }
    return oddCount > maxLength ? oddCount : maxLength;
}
 
int main() {
    int arr[] = {3, 1, 3, 5, 2, 1, 7, 5};
    int arrSize = sizeof(arr) / sizeof(arr[0]);
    printf("%d\n", findMaxLengthOfSubarrayWithAllOddNumbers(arr, arrSize));  // 输出应为4
    return 0;
}

解法5：C++




#include <iostream>
 
int findMaxLengthOfSubarrayWithAllOddNumbers(int* arr, int arrSize) {
    int oddCou

JS常用插件 Swiper插件实现轮播图

2024-08-11

Swiper 是一款免费的、开源的移动端触摸滑块控件，它能够制作精美的移动端网页触摸滑动图片轮播等，非常适合用于移动网站、网页应用、移动web应用等。

以下是使用 Swiper 插件实现轮播图的示例代码：

HTML部分：




<div class="swiper-container">
    <div class="swiper-wrapper">
        <div class="swiper-slide"><img src="image1.jpg"></div>
        <div class="swiper-slide"><img src="image2.jpg"></div>
        <div class="swiper-slide"><img src="image3.jpg"></div>
        <!-- 更多的幻灯片 -->
    </div>
    <!-- 如果需要分页器 -->
    <div class="swiper-pagination"></div>
    
    <!-- 如果需要导航按钮 -->
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
    
    <!-- 如果需要滚动条 -->
    <div class="swiper-scrollbar"></div>
</div>

CSS部分：




<style>
.swiper-container {
    width: 600px;
    height: 300px;
}
</style>

JavaScript部分：




<script src="path/to/swiper.min.js"></script>
<script>
var mySwiper = new Swiper ('.swiper-container', {
    // 选项
    loop: true, // 开启循环模式
    // 如果需要分页器
    pagination: {
      el: '.swiper-pagination',
    },
    // 如果需要前进后退按钮
    navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev',
    },
    // 如果需要滚动条
    scrollbar: {
      el: '.swiper-scrollbar',
    },
})
</script>

在这个示例中，我们首先在HTML中定义了一个包含图片的轮播容器。然后在JavaScript中初始化Swiper实例，并通过选项配置来定制功能，例如是否开启循环（loop），是否显示分页（pagination），以及是否显示导航按钮（navigation）和滚动条（scrollbar）。

确保在使用Swiper之前，已经正确引入了Swiper的CSS和JavaScript文件。

使用 HTML、CSS 和 JS 的简单倒数计时器

2024-08-11

以下是一个使用HTML、CSS和JavaScript创建的简单倒数计时器的示例代码：




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>倒数计时器</title>
<style>
  body { font-family: Arial, sans-serif; }
  .timer { font-size: 3em; font-weight: bold; }
  .end-time { font-size: 2em; }
</style>
</head>
<body>
 
<div class="timer">
  倒计时: <span id="countdown">00:00:10</span>
</div>
 
<script>
// 设置倒计时时间（单位：毫秒）
const endTime = new Date().getTime() + 10000;
 
function updateCountdown() {
  const now = new Date().getTime();
  const distance = endTime - now;
 
  if (distance < 0) {
    clearInterval(intervalId);
    document.getElementById("countdown").innerHTML = "倒计时结束";
    return;
  }
 
  const hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
  const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
  const seconds = Math.floor((distance % (1000 * 60)) / 1000);
 
  document.getElementById("countdown").innerHTML = hours + ":" + minutes.toString().padStart(2, '0') + ":" + seconds.toString().padStart(2, '0');
}
 
const intervalId = setInterval(updateCountdown, 1000);
</script>
 
</body>
</html>

这段代码会创建一个简单的倒计时计时器，显示剩余的时、分、秒。倒计时时间设置为10秒，你可以通过修改endTime的值来设置不同的倒计时时长。计时器会在时间结束时自动停止，并显示"倒计时结束"。

使用JS-Beautify让JavaScript代码优雅可读

2024-08-11

JS-Beautify是一个流行的JavaScript代码美化工具，可以通过其提供的命令行工具使用，也可以在浏览器中使用，或者作为Node.js模块使用。以下是一个使用Node.js模块的示例：

首先，安装js-beautify：




npm install -g js-beautify

然后，在Node.js代码中使用它：




const beautify = require('js-beautify').js;
 
const options = {
  indent_size: 2,
  space_in_empty_paren: true
};
 
const code = 'function test(){console.log("Hello, world!");}';
 
const beautifiedCode = beautify(code, options);
 
console.log(beautifiedCode);

这段代码将会输出一个格式化好的JavaScript函数，使用两个空格作为缩进，并且在空括号内部添加空格。

Vue项目引入translate.js 国际化自动翻译组件

2024-08-11




<template>
  <div id="app">
    <translate :content="'hello'"></translate>
  </div>
</template>
 
<script>
// 引入translate组件
import Translate from './components/Translate.vue'
 
export default {
  name: 'app',
  components: {
    Translate
  }
}
</script>
 
<style>
#app {
  text-align: center;
}
</style>

在这个简化的例子中，我们创建了一个Vue应用，并在其中引入了一个名为Translate.vue的国际化自动翻译组件。在模板中，我们使用translate组件来显示一个已经被翻译成用户浏览器语言的消息。这个例子展示了如何在Vue项目中使用自定义组件，并简单地说明了组件的用法。