标签 Javascript 下的文章

2024-08-21

在Android中，使用WebView加载HTML代码并附加CSS和JS可以通过以下步骤实现：

创建一个WebView对象。
使用WebView的loadDataWithBaseURL()方法加载HTML代码，并指定基础URL。
通过WebView的addJavascriptInterface()方法添加JavaScript接口，以便在JavaScript中调用Java代码。
使用WebView的setWebViewClient()方法设置一个WebViewClient，以便处理页面加载。
如果需要，可以通过WebView的setWebChromeClient()方法设置一个WebChromeClient，以便处理JavaScript对话框等。

以下是一个简单的示例代码：




import android.os.Bundle;
import android.webkit.WebChromeClient;
import android.webkit.WebView;
import android.webkit.WebViewClient;
import androidx.appcompat.app.AppCompatActivity;
 
public class MyActivity extends AppCompatActivity {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_my);
 
        WebView webView = findViewById(R.id.webview);
 
        String htmlString = "<html><body><h1>Hello, WebView</h1></body></html>";
        String baseUrl = "http://mywebsite.com/"; // 基础URL，用于加载CSS和JS文件
 
        webView.loadDataWithBaseURL(baseUrl, htmlString, "text/html", "UTF-8", null);
 
        // 添加JavaScript接口
        webView.addJavascriptInterface(new WebAppInterface(this), "Android");
 
        // 处理JavaScript对话框
        webView.setWebChromeClient(new WebChromeClient() {
            // 实现需要的方法
        });
 
        // 处理页面加载
        webView.setWebViewClient(new WebViewClient() {
            @Override
            public void onPageFinished(WebView view, String url) {
                // 页面加载完成后，注入CSS和JS
                injectCSSandJS(view);
            }
        });
    }
 
    private void injectCSSandJS(WebView webView) {
        String css = "body { font-size: 16px; }"; // 示例CSS
        String js = "javascript:(function() { document.body.style.backgroundColor = 'red'; })();"; // 示例JS
 
        // 注入CSS
        webView.evaluateJavascript("(function() { " +
                "  var style = document.createElement('style'); " +
                "  style.innerHTML = '" + css + "'; " +
                "  document.head.appendChild(style); " +
                "})();", null);
 
        // 注入JS
        webView.evaluateJavascript(js, null);
    }
}
 
// 定义与JavaScript交互的类
class WebAppInterface {
    Context mContext;
 
    WebAppInterface(Context c) {
        mContext = c;
    }
 
    // 由JavaScript调用的方法
    @JavascriptInterfa

- 阅读更多 -

分析 JS 与 CSS 是否阻塞 DOM 的渲染和解析

System

2024-08-21

所有,javascript

在浏览器中，JavaScript 和 CSS 的加载可能会阻塞 DOM 的渲染和解析。这是因为浏览器为了避免出现无样式内容的闪烁（FOUC - Flash of Unstyled Content）或无结构内容的空白屏，会在解析完 HTML 之后，立即渲染出 DOM，然后才执行 CSS 和 JavaScript 的下载及执行。

解决这个问题的关键是减少 JavaScript 和 CSS 文件的体积，使用异步加载（例如通过动态创建 <script> 或 <link> 标签），并且将它们放在文档的底部，接近 </body> 标签处。

以下是一个简单的示例，展示了如何将 CSS 和 JavaScript 文件置于底部加载：




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 样式表置于头部但设置为异步加载 -->
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <!-- 页面内容 -->
    <div>
        <h1>Hello World</h1>
    </div>
 
    <!-- JavaScript 文件置于底部 -->
    <script src="script.js" async></script>
</body>
</html>

在这个例子中，CSS 文件会阻塞 DOM 的渲染，但不会阻塞 JavaScript 的加载，因为我们使用了 async 属性。JavaScript 文件置于页面底部，不会阻塞 DOM 的解析，而且它会在文档加载完成后执行。这样可以提升页面的渲染性能。

- 阅读更多 -

Js——时间戳和普通日期（年月日）的相互转换

System

2024-08-21

所有,javascript

在JavaScript中，可以使用内置的Date对象来进行时间戳和普通日期（年月日）的互相转换。

时间戳转普通日期：




// 假设 timestamp 是一个时间戳（单位：毫秒）
var timestamp = 1609459200000; // 例如：2021-01-01 00:00:00
var date = new Date(timestamp);
var year = date.getFullYear();
var month = date.getMonth() + 1; // 月份是从0开始的
var day = date.getDate();
 
console.log(year, month, day); // 输出：2021 1 1

普通日期转时间戳：




// 假设 year, month, day 分别是年、月、日
var year = 2021;
var month = 1; // 实际月份应该是0-11的数字，1代表1月
var day = 1;
 
// 创建Date对象
var date = new Date(year, month - 1, day); // 注意月份是从0开始的
 
// 获取时间戳
var timestamp = date.getTime(); // 或者使用 date.valueOf() 或者 date.getTime()
 
console.log(timestamp); // 输出：1609459200000

请注意，在JavaScript中，月份是从0开始的，即0代表1月，11代表12月。因此在将年月日转换为Date对象时，月份应该减去1。而从Date对象获取月份时，应该加上1来获取正确的月份值。

- 阅读更多 -

HTML CSS JS学习笔记之实现网页计算器1，阿里巴巴二面被血虐

System

2024-08-21

所有,html

以下是一个简单的网页计算器实现的代码示例，仅包含HTML和JavaScript，没有使用CSS。




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Calculator</title>
    <script>
        function calculate() {
            var firstNumber = parseFloat(document.getElementById('firstNumber').value);
            var secondNumber = parseFloat(document.getElementById('secondNumber').value);
            var operator = document.getElementById('operators').value;
            var result;
 
            switch (operator) {
                case '+':
                    result = firstNumber + secondNumber;
                    break;
                case '-':
                    result = firstNumber - secondNumber;
                    break;
                case '*':
                    result = firstNumber * secondNumber;
                    break;
                case '/':
                    if (secondNumber === 0) {
                        result = 'Cannot divide by zero';
                    } else {
                        result = firstNumber / secondNumber;
                    }
                    break;
                default:
                    result = 'Invalid operator';
                    break;
            }
 
            document.getElementById('result').value = result;
        }
    </script>
</head>
<body>
    <input type="text" id="firstNumber" placeholder="First Number">
    <select id="operators">
        <option value="+">+</option>
        <option value="-">-</option>
        <option value="*">*</option>
        <option value="/">/</option>
    </select>
    <input type="text" id="secondNumber" placeholder="Second Number">
    <button onclick="calculate()">Calculate</button>
    <input type="text" id="result" placeholder="Result" readonly>
</body>
</html>

这段代码实现了一个简单的计算器功能，用户可以输入两个数字和一个运算符，点击“Calculate”按钮后，会显示计算结果。需要注意的是，这个实现没有包括错误处理，比如输入非数字或除数为零的情况。

- 阅读更多 -

Nodejs 第二十三章（Markdown 转 html）

System

2024-08-21

所有,html

在Node.js中，你可以使用marked库将Markdown转换为HTML。首先，你需要安装marked：




npm install marked

然后，你可以使用以下代码将Markdown转换为HTML：




const marked = require('marked');
 
// 示例Markdown文本
const markdownText = `
# 标题
 
这是一个段落。
 
- 列表项一
- 列表项二
 
**粗体文本**
 
[链接](https://example.com)
`;
 
// 将Markdown转换为HTML
const html = marked.parse(markdownText);
 
console.log(html);

这段代码会输出转换后的HTML，你可以将其插入到网页中去。marked库提供了多种选项来自定义转换的行为，例如改变标题的级别或者添加CSS类。

- 阅读更多 -

网页端HTML使用MQTTJs订阅RabbitＭＱ数据

System

2024-08-21

所有,html

要在HTML页面中使用MQTT.js订阅RabbitMQ的数据，你需要首先引入MQTT.js库，并确保RabbitMQ服务器允许你的客户端连接。以下是一个简单的例子：




<!DOCTYPE html>
<html>
<head>
    <title>MQTT Subscribe Example</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/paho-mqtt/1.0.1/mqtt.min.js"></script>
    <script>
        var client;
 
        function connect() {
            var host = 'wss://your-rabbitmq-server:port/ws'; // 使用WebSocket连接
            client = new Paho.MQTT.Client(host, "your-client-id");
 
            var options = {
                timeout: 3,
                keepAliveInterval: 30,
                cleanSession: true,
                useSSL: true,
                userName: 'your-username', // 如果RabbitMQ配置了用户名和密码，则需要
                password: 'your-password',
                onSuccess: onConnect,
                onFailure: function (message) {
                    console.log("Connection failed: " + message.errorMessage);
                }
            };
 
            client.connect(options);
        }
 
        function onConnect() {
            console.log("Connected");
            client.subscribe('your-topic'); // 你要订阅的主题
        }
 
        function onFailure(message) {
            console.log("Failed to subscribe: " + message.errorMessage);
        }
 
        function receiveMessage() {
            client.onMessageArrived = function (message) {
                console.log("Message arrived: " + message.payloadString);
                // 处理接收到的消息
            };
        }
 
        // 页面加载完成后连接MQTT
        window.onload = function() {
            connect();
            receiveMessage();
        };
    </script>
</head>
<body>
    <h1>MQTT Subscribe Example</h1>
</body>
</html>

确保替换以下内容：

your-rabbitmq-server:port/ws：为你的RabbitMQ服务器的WebSocket端点。
your-client-id：为你的客户端ID，需要是唯一的。
your-username 和 your-password：如果RabbitMQ设置了用户名和密码，则需要这些信息。
your-topic：你要订阅的具体主题。

在实际部署时，请确保你的RabbitMQ服务器允许来自你客户端IP的WebSocket连接，并且正确配置了用户名和密码（如果有的话）。

- 阅读更多 -

第二章-在HTML中使用JavaScript

System

2024-08-21

所有,html

在HTML中使用JavaScript的基本方法是在HTML文档中添加<script>标签，并在其中写入JavaScript代码。你可以将JavaScript代码直接放在<script>标签中，或者使用src属性来引用外部的JavaScript文件。

以下是一个简单的例子，展示了如何在HTML文档中嵌入JavaScript代码：




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>示例页面</title>
    <script>
        // 直接写入JavaScript代码
        function showMessage() {
            alert('你好，世界!');
        }
    </script>
</head>
<body>
 
    <!-- 使用按钮触发JavaScript中的函数 -->
    <button onclick="showMessage()">点击我</button>
 
</body>
</html>

如果你有一个外部的JavaScript文件（例如script.js），你可以通过以下方式引入它：




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>示例页面</title>
    <script src="script.js"></script> <!-- 引用外部JavaScript文件 -->
</head>
<body>
 
    <!-- 按钮事件可以调用外部JavaScript文件中定义的函数 -->
    <button onclick="externalFunction()">点击我</button>
 
</body>
</html>

在script.js文件中，你可以定义externalFunction等函数：




// script.js
function externalFunction() {
    alert('这是一个外部JavaScript函数!');
}

请确保你的HTML文件和JavaScript文件位于同一目录中，或者提供正确的路径来引用外部JavaScript文件。

- 阅读更多 -

纯JS将HTML生成pdf

System

2024-08-21

所有,html

要在纯JavaScript中将HTML生成PDF，可以使用jsPDF库。以下是一个简单的例子，演示如何使用jsPDF库将HTML元素转换成PDF。

首先，确保在项目中包含了jsPDF库：




<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.4.0/jspdf.umd.min.js"></script>

然后，可以使用以下JavaScript代码将特定HTML元素转换为PDF：




// 假设你要打印的HTML元素有一个id为"content"
const content = document.getElementById('content');
 
// 创建一个新的jsPDF实例
const pdf = new jspdf.jsPDF();
 
// 将HTML元素转换为Canvas
html2canvas(content).then(canvas => {
    // 将Canvas转换为图片
    const imgData = canvas.toDataURL('image/png');
    
    // 将图片添加到PDF中
    const imgProps= pdf.getImageProperties(imgData);
    const pdfWidth = pdf.internal.pageSize.getWidth();
    const pdfHeight = (imgProps.height * pdfWidth) / imgProps.width;
    pdf.addImage(imgData, 'PNG', 0, 0, pdfWidth, pdfHeight);
    
    // 保存生成的PDF
    pdf.save('download.pdf');
});

确保在调用上述代码之前，页面上已经加载了html2canvas库，因为jsPDF无法直接将HTML转换为PDF，它需要通过html2canvas先将HTML转换为Canvas，然后再转换为PDF支持的格式。




<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.3.2/html2canvas.min.js"></script>

请注意，这个例子是一个简化的示例，实际使用时可能需要处理例如样式、跨域图片、大文件等问题。

- 阅读更多 -

在HTML中使用JavaScript实时显示当前日期和时间（结尾完整例程）

System

2024-08-21

所有,html




<!DOCTYPE html>
<html>
<head>
    <title>实时显示当前日期和时间</title>
    <script>
        function startTime() {
            const today = new Date();
            let h = today.getHours();
            let m = today.getMinutes();
            let s = today.getSeconds();
            // 为了美观，数字小于10将前面加0
            h = checkTime(h);
            m = checkTime(m);
            s = checkTime(s);
            document.getElementById('txt').innerHTML = 
            today.toDateString() + "<br>" + h + ":" + m + ":" + s;
            // 使用setTimeout函数调用startTime函数，每秒钟更新一次时间
            setTimeout(startTime, 1000);
        }
        
        function checkTime(i) {
            if (i < 10) {i = "0" + i};
            return i;
        }
    </script>
</head>
<body onload="startTime()">
    <div id="txt"></div>
</body>
</html>

这段代码使用了setTimeout函数来周期性地调用startTime函数，从而实现了时钟的更新。这个例程是一个简单的JavaScript实时时钟示例，展示了如何在网页上显示当前日期和时间，并且保持时间的实时更新。

System

2024-08-21

所有,html




import org.jsoup.Jsoup;
import com.gargoylesoftware.htmlunit.WebClient;
import us.codecraft.webmagic.Page;
import us.codecraft.webmagic.Site;
import us.codecraft.webmagic.Spider;
import us.codecraft.webmagic.processor.PageProcessor;
 
public class CrawlerComparison implements PageProcessor {
 
    private Site site = Site.me().setRetryTimes(3).setSleepTime(1000);
 
    @Override
    public void process(Page page) {
        // 提取页面信息
    }
 
    @Override
    public Site getSite() {
        return site;
    }
 
    public static void main(String[] args) {
        // Jsoup 示例
        String url = "http://example.com";
        org.jsoup.nodes.Document jsoupDoc = Jsoup.connect(url).get();
 
        // HtmlUnit 示例
        WebClient webClient = new WebClient();
        com.gargoylesoftware.htmlunit.html.HtmlPage htmlUnitPage = webClient.getPage(url);
 
        // WebMagic 示例
        Spider.create(new CrawlerComparison()).addUrl(url).thread(5).run();
 
        // 分别打印文档的部分内容作为示例输出
        System.out.println("Jsoup 提取的标题: " + jsoupDoc.title());
        System.out.println("HtmlUnit 提取的标题: " + htmlUnitPage.getTitleText());
        // WebMagic 的输出通常在 process 方法中处理页面信息时打印
    }
}

这个示例代码展示了如何使用Jsoup、HtmlUnit和WebMagic这三个库来获取网页内容。每个库都有自己的特点，适合不同的使用场景。在实际爬虫项目中，你需要根据项目需求和库的功能特性来选择合适的库。

- 阅读更多 -