H5 WebSQL每日成语

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

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

惟利( )视

为德( )终

质非文( )

( )追耗子

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

烂漫天( )

( )则改之，无则嘉勉

得( )之作

哀( )如潮

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

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

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

于是就… 有了这篇 WebSQL 示例

效果

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, counttransaction().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].countif (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) + 1return 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 = nulllet 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 offsetif (offset) {offset.offsetLeft += ele.offsetLeftoffset.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('')) returnlastText = 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 } = itemnameDom.textContent = name;contentDom.textContent = content;derivationDom.textContent = derivation;spellDom.textContent = spell;samplesDom.textContent = samples;let { offsetLeft, offsetTop } = getOffset(ev.target)// 不知道哪里样式出问题了let tmpOffsetTop = 35idiomDetailDom.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.namesearchDeductDom.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

H5 WebSQL每日成语相关推荐

每日分享(微信社区小程序/h5/圈子论坛贴吧交友/博客/社交)
1.Java单元测试实战高清PDF中文版 Java单元测试实战来自于作者多年来的单元测试实践,最初发表在阿里内网的ATA上,成为了很多阿里同学单元测试学习的必读文章.很多程序员认为单元测试会花费大量 ...
python成语填空_Python每日一练(4)-成语填填乐
目录1. 单一位置2. 位置随机3. 添加积分评价4. 文件获取5. 设置难度等级6. 限时完成7. 选择填空 1. 单一位置编写一个小游戏,按列表中成语的顺序输出第一个字为空白的成语,要求用户填写 ...
前端面试每日3+1（周汇总2019.06.16）
<论语>,曾子曰:"吾日三省吾身"(我每天多次反省自己). 前端面试每日3+1题,以面试题来驱动学习,每天进步一点! 让努力成为一种习惯,让奋斗成为一种享受! 相信坚 ...
解决微信H5获取SDK授权报错提示errMsg: “config:fail,Error: 系统错误，错误码：63002,invalid signature [20200908 22:17:17][]“
如果常规检查都做过可以仔细看下微信开放文档这个里面的报错原因如果都不是那么极有可能是(恭喜你!看样子你的H5页面日活人数还蛮多[呲牙]) 获取腾讯微信平台access_token超过每日默认上限2 ...
和与余数的和同余理解_每日一题 | 第38期：数量关系之余数特性
从今天起"每日一题"栏目就正式更新啦~ 由福瑞和教育的主讲老师每天给大家带来公考不同考试版块的干货资料! 旨在潜移默化中给大家培养公考解题思维,提高做题速度! 大家遇到不明白的题 ...
成语json_cocos creator实战(2)成语小秀才ts版
1 分析公司要求做h5小游戏之前,想要做的一款类似成语小秀才的小游戏.学了一段时间ccc后回头填坑,尝试仿制一波,刚好发现论坛有套开源的ui素材.花了两天做的demo.做完后发现最难的是生成随机关卡 ...
【腾讯Bugly干货分享】H5 视频直播那些事
为什么80%的码农都做不了架构师?>>> 本文来自于腾讯bugly开发者社区,非经作者同意,请勿转载,原文地址:http://dev.qq.com/topic/57a42ee6 ...
H5 页面列表缓存方案
大家好,我是若川(点这里加我微信 ruochuan12,长期交流学习).今天给大家介绍一下关于h5页面的列表缓存方案.感谢屏幕前的你一直关注着我. 点击下方卡片关注我.加个星标,或者查看源码等系列文章 ...
关于H5工程师那些日常必需工具
1,HBuilder一个不错的web前端IDE(代码编辑器) Web前端开发,2000之后基本就是三剑客的天下.到现在DW也是不错的HTMLcoder,如今的前端开发早已是JS的天下.但是DW对于JS ...

H5 WebSQL每日成语

效果

WebSQL

打开数据库

新建事务

执行 SQL

源码

地址

H5 WebSQL每日成语相关推荐

最新文章

热门文章