H5 WebSQL每日成语

于 2022-12-20 13:12:06 发布
阅读量625 收藏
点赞数 1
分类专栏： H5 文章标签： css css3 前端 html5 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/linyisonger/article/details/128383388
版权

有一天看到同事发的类似
这种成语填空一样的内容。

================

惟利( )视

为德( )终

质非文( )

( )追耗子

================

烂漫天( )

( )则改之，无则嘉勉

得( )之作

哀( )如潮

================

于是就去网上找成语数据库表的 SQL… 哈哈哈 很容易就找到了.

本来打算写个前后端，想了想可以但没必要。

于是就… 有了这篇 WebSQL 示例

效果

img

WebSQL

打开数据库

openDatabase(数据库名称,版本号,描述文本,数据库大小,创建回调)

例:

var db = openDatabase("idiom-data", "1.0", "这是一个存放成语的数据库", 20 * 1024 * 1024);
新建事务

db.transaction(创建回调)

执行 SQL

tx.executeSql(SQL 语句,SQL 语句需要的参数,回调函数,出错回调函数)

源码


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>每日成语</title>
    <style>
        body {
            margin: 0;
        }

        .idiom-detail,
        .idiom-card {
            /* display: inline-block; */
            position: absolute;
            left: 10px;
            top: 10px;
            display: none;
            padding: 5px 10px;
            background-color: #fff;
            box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.3);
            max-width: 200px;
            z-index: 10;
        }

        .idiom-detail {
            top: 0;
        }

        .idiom-detail>div {
            pointer-events: none;
        }


        .title {
            display: inline-block;
            margin-top: 10px;
            margin-left: -10px;
            padding: 0 20px;
            color: #fff;
            background-color: skyblue;
        }

        .name {
            font-weight: bold;
            font-size: 20px;
            margin-top: 4px;
        }


        .spell,
        .content,
        .derivation,
        .samples {
            margin-top: 2px;
            font-size: 14px;
            color: #888;
        }

        .search-card {
            margin: 10px;
            width: 30vw;
            margin: 20vh auto;
            position: relative;
        }

        .search-input {
            box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.3);
            background-color: #fff;
            padding: 10px 10px;
            outline: none;
            font-size: 20px;
            border: none;
            width: 100%;
            box-sizing: border-box;
        }

        .search-deduct,
        .search-list {
            margin-top: 20px;
            display: inline-block;
            width: 100%;
            box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.3);
        }

        .search-deduct {
            position: absolute;
            left: calc(100% + 20px);
            display: inline-block;
            max-width: 200px;
        }

        .search-deduct .title {
            margin-left: 0;
        }

        .search-deduct .search-item {
            width: 100%;
        }

        .search-item {
            font-size: 14px;
            display: block;
            padding: 5px 10px;
        }

        .search-list .search-item:hover {
            background-color: skyblue;
            font-weight: bold;
        }
    </style>
</head>

<body>
    <div class="idiom-card">
        <div class="title">每日成语</div>
        <div class="name"></div>
        <div class="spell"></div>
        <div class="content"></div>
        <div class="derivation"></div>
        <div class="samples"></div>
    </div>

    <div class="idiom-detail">
        <div class="title">成语详情</div>
        <div class="name"></div>
        <div class="spell"></div>
        <div class="content"></div>
        <div class="derivation"></div>
        <div class="samples"></div>
    </div>
    <div class="search-card">
        <input class="search-input" type="text" placeholder="有意思的搜索框~" maxlength="10">

        <div class="search-deduct"></div>
        <div class="search-list"></div>
    </div>
    <script>

        var db = openDatabase('idiom-data', '1.0', '这是一个存放成语的数据库', 20 * 1024 * 1024);

        /**
         * 执行SQL语句 random() 函数
         */
        function executeSql(tx, sql, data = []) {
            return new Promise((resolve, reject) => {
                tx.executeSql(sql, data, function (tx, results) {
                    resolve(results)
                }, function (tx, err) {
                    console.log('错误信息: ', err, sql);
                });
            })
        }

        /**
         * 新建一个数据库事务
         */
        function transaction() {
            return new Promise((resolve, reject) => {
                db.transaction(function (tx) {
                    resolve(tx)
                });
            })
        }

        /**
         * 读取SQL
         */
        function readSQL(sqlTxt) {
            return new Promise((resolve, reject) => {
                let tx, sqls, count
                transaction().then((res) => {
                    tx = res;
                    sqls = sqlTxt.includes('\r\n') ? sqlTxt.split('\r\n') : sqlTxt.split('\n')
                    console.log(sqls);
                    sqls = sqls.filter(a => a);
                    let createTable = sqls.shift()
                    console.log(createTable);
                    return executeSql(tx, createTable)
                }).then((_) => {
                    console.log(_);
                    return executeSql(tx, "SELECT COUNT(*) As count FROM idiom;")
                }).then((_) => {
                    count = _.rows[0].count
                    if (count === 0) {
                        return Promise.all(sqls.map(sql => executeSql(tx, sql)))
                    }
                }).then((_) => {
                    // 返回总数量
                    return executeSql(tx, "SELECT COUNT(*) As count FROM idiom;")
                }).then((res) => {
                    count = res.rows[0].count
                    // 加载错误
                    if (count < sqls.length) throw { errMsg: 'LOAD_ERROR' }
                    // 随机一条 每日成语
                    const randomID = Math.round(Math.random() * count) + 1
                    return executeSql(tx, `SELECT * FROM idiom Where ID=${randomID};`)
                }).then((res) => {
                    if (res.rows[0]) {
                        let idiomCardDom = document.querySelector('.idiom-card')
                        let nameDom = document.querySelector('.idiom-card > .name')
                        let spellDom = document.querySelector('.idiom-card > .spell')
                        let contentDom = document.querySelector('.idiom-card > .content')
                        let derivationDom = document.querySelector('.idiom-card > .derivation')
                        let samplesDom = document.querySelector('.idiom-card > .samples')
                        let { content, derivation, name, samples, spell } = res.rows[0]
                        nameDom.textContent = name;
                        contentDom.textContent = content;
                        derivationDom.textContent = derivation;
                        spellDom.textContent = spell;
                        samplesDom.textContent = samples;
                        idiomCardDom.setAttribute('style', 'display: inline-block;')
                    }
                }).catch(reject)
            })
        }


        // 加载SQL文件
        function loadSQL() {
            fetch("./assets/idiom.sql", {
                "referrerPolicy": "strict-origin-when-cross-origin",
                "method": "GET",
                "mode": "cors",
                "credentials": "omit"
            }).then((res) => {
                return res.text()
            }).then((res) => {
                return readSQL(res)
            }).catch((err) => {
                console.log(err);
                if (err.errMsg === 'LOAD_ERROR') {
                    // 移除表
                    transaction().then((tx) => executeSql(tx, 'DROP TABLE idiom;')).then(console.log)
                    console.log('加载错误10s后重新加载...');
                    setTimeout(loadSQL, 10000);
                }
            })
        };

        loadSQL()

        let searchInput = document.querySelector('.search-input')
        let timeoutId = null
        let lastText = ''
        searchInput.addEventListener('input', (ev) => {
            // 节流
            if (timeoutId) clearTimeout(timeoutId)
            timeoutId = setTimeout(() => {
                find(ev)
                clearTimeout(timeoutId)
                timeoutId = null
            }, 100);
        })


        /**
         * 获取元素偏移位置
         * @param {HTMLDivElement} ele
         */
        function getOffset(ele, offset) {
            if (ele.tagName === 'HTML') return offset
            if (offset) {
                offset.offsetLeft += ele.offsetLeft
                offset.offsetTop += ele.offsetTop
            }
            else {
                offset = {
                    offsetLeft: ele.offsetLeft,
                    offsetTop: ele.offsetTop,
                }
            }
            return getOffset(ele.parentElement, offset)
        }

        function find(ev) {
            let searchText = ev.target.value;
            let searchZH = searchText.match(/[\u4e00-\u9fa5]/g)
            searchZH = searchZH && searchZH.join(',').split(',')
            // 避免重复搜索
            if (!searchZH || lastText === searchZH.join('')) return
            lastText = searchZH.join('')
            let searchListDom = document.querySelector('.search-list')
            let searchDeductDom = document.querySelector('.search-deduct')

            if (searchZH && searchZH.length) {
                db.transaction(function (tx) {
                    Promise.all([...searchZH.map(char => executeSql(tx, `SELECT * FROM idiom WHERE name LIKE '%${char}%';`)), executeSql(tx, `SELECT * FROM idiom WHERE name LIKE '%${searchZH.join('')}%';`)]).then((res) => {

                        let dist = {}
                        res.map(({ rows }) => {
                            Object.values(rows).map((row) => {
                                if (!dist[row.ID]) dist[row.ID] = row
                            })
                        })
                        console.log(dist);
                        // 匹配搜索文字的正则
                        let matchReg = new RegExp(`[${searchZH.join('')}]`, 'g')
                        let searchList = Object.values(dist).sort((a, b) => b.name.match(matchReg).length - a.name.match(matchReg).length)


                        // 清除之前残余 
                        searchListDom.innerHTML = ''
                        searchDeductDom.innerHTML = ''


                        // 一刀下去只留前十个
                        searchList.slice(0, 10).forEach((item) => {
                            let searchItemDom = document.createElement('div')
                            searchItemDom.className = 'search-item'
                            searchItemDom.textContent = item.name

                            // 详情浮框
                            searchItemDom.addEventListener('mouseenter', function (ev) {
                                let idiomDetailDom = document.querySelector('.idiom-detail')
                                let nameDom = document.querySelector('.idiom-detail > .name')
                                let spellDom = document.querySelector('.idiom-detail > .spell')
                                let contentDom = document.querySelector('.idiom-detail > .content')
                                let derivationDom = document.querySelector('.idiom-detail > .derivation')
                                let samplesDom = document.querySelector('.idiom-detail > .samples')
                                let { content, derivation, name, samples, spell } = item
                                nameDom.textContent = name;
                                contentDom.textContent = content;
                                derivationDom.textContent = derivation;
                                spellDom.textContent = spell;
                                samplesDom.textContent = samples;
                                let { offsetLeft, offsetTop } = getOffset(ev.target)
                                // 不知道哪里样式出问题了
                                let tmpOffsetTop = 35
                                idiomDetailDom.setAttribute('style', `display: inline-block;left:${offsetLeft + ev.target.offsetWidth - 220}px;top:${offsetTop - ev.target.offsetHeight - tmpOffsetTop}px`)

                            })

                            searchListDom.appendChild(searchItemDom)
                        })




                        // 随机产生一组挖空词组
                        let searchDeduct = searchZH.reduce((targ, curr, index) => {
                            let tmpArr = searchList.filter(s => s.name.includes(curr) && !targ[s.name])
                            let tmp = null;
                            // 增加随机
                            if (tmpArr.length) {
                                tmp = tmpArr[Math.round(Math.random() * tmpArr.length)]
                            }
                            // 唯一判断
                            if (tmp && !targ[tmp.name]) {
                                targ[tmp.name] = JSON.parse(JSON.stringify(tmp));
                                targ[tmp.name].name = targ[tmp.name].name.replace(curr, '( )')
                                targ[tmp.name].index = index
                            }
                            return targ;
                        }, {})

                        let searchDeductTitleDom = document.createElement('div')
                        searchDeductTitleDom.className = 'title'
                        searchDeductTitleDom.textContent = '缺省补全'
                        searchDeductDom.appendChild(searchDeductTitleDom)

                        Object.values(searchDeduct).sort((a, b) => a.index - b.index).forEach((item) => {
                            let searchItemDom = document.createElement('div')
                            searchItemDom.className = 'search-item'
                            searchItemDom.textContent = item.name
                            searchDeductDom.appendChild(searchItemDom)
                        })

                    })
                })
            }
        }


        document.addEventListener("mousemove", (ev) => {
            if (!['idiom-detail', 'search-item'].includes(ev.target.className)) {
                let idiomDetailDom = document.querySelector('.idiom-detail')
                idiomDetailDom.setAttribute('style', `display: none;`)
            }
        })
    </script>
</body>

</html>

地址

https://github.com/linyisonger/H5.Examples

林一怂儿
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
成语大全数据库（总共31851个成语，含拼音，解释，出处）sql文件
02-28
总共含31851个成语，每个成语都包括拼音，解释。大多数还包括出处和例子的sql文件。 在数据库管理软件运行sql文件即可保存到本地数据库，有什么问题欢迎交流。
成语数据库（总共31851个成语，含拼音，解释，出处，例子）
04-21
总共含31851个成语，每个成语都包括拼音，解释。大多数还包括出处和例子。 为了大家使用方便我已经写好了创建数据库和表的操作，读了我的说明文档很容易就可安装。有什么问题欢迎交流。
成语数据SQL文件
11-09
成语数据MYSQL SQL文件，数据库总共包含31851个成语，包括成语的名字，拼音，内容，出处以及例子。不过出处与例子并不是都有。
Mysql成语数据库
08-23
.sql文件，可以直接导入mysql数据库，涵盖14266个成语，成语的出处，例子，解释，带声调的拼音，不带声调的首尾拼音（用于做成语接龙）都有，欢迎下载使用
超3万条 中国成语大全数据库（sql版）
07-10
一共收录31717条数据，并且是按照成语首个汉字的拼音，依据26英文字母排序。 注意，我的数据表的名字为chengyu,其中具有字段为：id，name（名称），sound（发音）， explanation（解释）， provenance（出处）， emotional_color（感情色彩）， structure（成语结构）， synonyms（近义词）， antonym（反义词），example（例句）。 为了方便，除了id与name之外，其余的字段类型均为text。 如果您需要excel版本的话，自己sql转excel有困难，可以私信我
H5存储（web Storage和web SQL）
Daniel
07-07 8502
一、Web Storage教程 1、概述： 对于Web Storage来说，实际上是Cookies存储的进化版。如果了解Cookie的人几乎一看Web Storage就会用，如果你从来没用过没了解过Cookie，没关系，看了这篇文章照样轻松玩转Web Storage。首先，学习Web Storage只需背熟这句口诀：“两个接口，四个函数”。 2、口诀： （1）两个接
移动端H5的数据库，IndexDB和WebSql
Yiu的博客
08-16 8427
本篇封装了移动端H5的数据库，兼容了IndexDB和WebSql,只需使用key-vale的方式进行存取； 为什么要封装WebSql呢？ios9还不支持IndexDB；闲话少说，直接上代码 var isIOS = !!navigator.userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);//判断是否是ios var isoVersion = ...
HTML5 Web SQL 数据库 讲解及使用
不想成为可以改变世界的程序员，不是一个好程序员
02-28 1504
为什么页面刷新后表就没了？openDatabase是什么？openDatabase是浏览器提供的吗？ Web SQL 是在浏览器上模拟数据库，可以使用 JS 来操作 SQL 完成对数据的读写。 Web SQL 数据库 API 并不是 HTML5 规范的一部分，但是它是一个独立的规范，引入了一组使用 SQL 操作客户端数据库的 APIs。 Web SQL 数据库可以在最新版的 Safari, Chrome 和 Opera 浏览器中工作。
Web SQL本地数据库（SQLLite）
忘川
12-12 3432
转载自https://blog.csdn.net/u013991521/article/details/51330260 在html5中，可以像访问本地文件那样轻松的对内置数据库进行直接访问。 html5中内置了两种数据库，一种为SQLLite,另一种为indexedDB。 在js中使用SQLLite数据库的步骤： 1.创建访问数据库的对象 var db = openDatabase(...
html 5 本地数据库（二）-- Web Sql Database核心方法openDatabase、transaction、executeSql 详解
Inuyasha1121的专栏
01-07 3785
Web SQL数据库API实际上不是HTML5规范的组成部分，而是单独的规范。它通过一套API来操纵客户端的数据库。Safari、Chrome、Firefox、Opera等主流浏览器都已经支持Web SQL Database。HTML5的Web SQL Databases的确很诱惑人，当你发现可以用与mysql查询一样的查询语句来操作本地数据库时，你会发现这东西挺有趣的。今天，我们一起来了解HTM
中国成语.sqlmysql
02-25
中国成语.sqlmysql
四字成语数据库cy.sql(非常全_数据很规范)
07-13
最全最规范的四字成语数据库，三万多条四字成语，每条成语有拼音、详细解释、出处和举例说明。该文档为可直接执行的sql语句，直接创建一个数据库，执行语句即可。
2018最全成语数据库sql
09-19
有2w多条成语, 包含了成语的描述, 例子, 拼音等各种信息
成语大全数据库
08-14
成语资料包括成语的解释、翻译、读音、典故、出处、近义词、反义词、用法、例子等。该数据通过成语大全网站 找成语www.zchengyu.com采集加工而来，非常实用！
成语首尾字（用于成语接龙）.sql
09-01
mysql的数据库，包含word,head,end三个字段。word为成语,head为成语第一个字,end为成语最后一个字。可用于成语接龙。
html5中webSql的应用
火火的专栏
03-24 2430
html5中webSql的应用（goole测试）自定义参数：fx， 创建数据库 openDatabase:这个方法使用现有数据库或新建数据库来创建数据库对象； transaction:这个方法允许我们根据情况控制事物提交或回滚； executeSql:这个方法用于执行SQL查询（这个函数里有四个参数）； 表示增、删、改、查的字符串，使用sql语言； 对应sql语句中的占位符的参数； 成功时执行的
H5 web Worker
08-13
总结起来，H5 Web Worker是提升Web应用性能的重要工具，通过合理的利用，可以有效地改善用户体验，特别是在处理大量数据和复杂逻辑时。开发者需要注意Worker的使用方式，以及它与其他Web API的结合，以便更好地优化...
h5 web录音并上传后端
03-01
【标题】：“H5 Web录音并上传后端” 在现代Web开发中，H5（HTML5）已经成为构建交互式和富媒体应用的标准。这个“H5 Web录音并上传后端”的示例着重展示了如何利用H5的新特性在浏览器内实现录音功能，并将录制的...
融云web+h5
09-05
【融云Web+H5】技术详解 融云是一款提供即时通讯能力的云服务，它为开发者提供了在Web和H5应用中集成聊天、群聊、音视频通话等功能的API和SDK。本篇文章将深入探讨如何在Web和H5环境中使用融云服务，以及相关的...
基于android h5 web服务端技术的
最新发布
05-10
Android H5技术是一种使用HTML5技术开发Android应用程序的方法，其实核心思想就是用HTML5技术让浏览器作为Android的容器。目前，移动设备的HTML5浏览器已经比较成熟，并且可以完美支持Web应用程序、网页游戏等应用。而基于Android H5的技术，开发者可以通过Android系统内置的WebView控件，快速地封装Web应用程序，将Web应用程序嵌入到Native容器中。 基于Android H5，我们可以构建出强大的Web服务端应用，如在线音乐播放器、视屏播放器、在线相册、新闻客户端等，它们的实现可以用HTML5技术实现，产生的效果和Native应用并没有区别，这种技术无疑可以节省开发成本，加快开发时间，同时还可以增强应用的易用性，这也就是它受到越来越多开发者的青睐的原因。 但是需要注意的是，基于Android H5的技术同样也会存在一些问题，如性能方面、安全方面、兼容性方面等。那么我们就需要针对这些问题进行技术优化，使用一些辅助工具，例如Lighthouse等工具来进行技术检测、诊断和优化。只有不断地提高技术水平，才能更好地运用这种技术。 总的来说，基于Android H5的技术不仅方便开发，而且应用范围广泛，未来的发展也会越来越好，它有着非常广阔的应用前景。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

林一怂儿

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

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

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

打赏作者

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

抵扣说明：

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

余额充值