html实现语文作业本(可编辑)

r囧r小猫 2022-10-24 13:16 244阅读 0赞

无聊练练js，写个方格作业本。因为网上也没找到有。就自己写了一个js，动态生成网格输入页。只需要定义个div，然后将div的id传入函数即可。

效果图：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0VzY19UYWJfRW5k_size_16_color_FFFFFF_t_70_pic_center]

代码：

<!DOCTYPE html>
    <html>
    <head>
    	<title>语文作业本</title>
    </head>
    <body style="background-color:gray">
    <div id="warp" style="background-color:#fff">
    </div>
    </body>
    <script type="text/javascript" src="gridNotebook.js"></script>
    <script type="text/javascript">
    		window.onload = function(){ 
    			 gridNotebook("warp");
    		};
    </script>
    </html>

引入gridNoteBooke.js，然后调用函数就行了。如果没有给容器div指定宽高，js默认是宽600px,高900px。也会根据屏幕大小来调整宽高。

js下载链接：[gridNoteBook下载][gridNoteBook]

希望有同学喜欢

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0VzY19UYWJfRW5k_size_16_color_FFFFFF_t_70_pic_center]: /images/20221024/916d9c601f86420c8c925e6c4c3e4d23.png
[gridNoteBook]: https://download.csdn.net/download/Esc_Tab_End/14954583

发表评论取消回复

表情：

评论列表（有 0 条评论，244人围观）

还没有评论，来说两句吧...

相关阅读

相关 iview实现表格可编辑

iview要实现table可编辑，使用render函数进行渲染，非常简单,希望对大家有所帮助。一、效果图如下： ![在这里插入图片描述][watermark_type_

太过爱你忘了你带给我的痛/ 2022年12月06日 01:27/ 0 赞/ 799 阅读

相关 html实现语文作业本(可编辑)

无聊练练js，写个方格作业本。因为网上也没找到有。就自己写了一个js，动态生成网格输入页。只需要定义个div，然后将div的id传入函数即可。效果图： ![在这里插入图

r囧r小猫/ 2022年10月24日 13:16/ 0 赞/ 245 阅读

相关 html div 可编辑,使div可编辑 contentEditable

属性 contentEditable 这是一个可编辑div 比如富文本的输入框就可以用可编辑的div(自定义一个富文本时可用) 或者另一个场景，有时候需要一个可输入框双击

╰+哭是因爲堅強的太久メ/ 2022年10月11日 00:43/ 0 赞/ 227 阅读

相关 html表格无法编辑,html 可编辑表格

场景：HTML+JS兑现可编辑表格 HTML+JS实现可编辑表格实现可视化编辑表格操作... HTML文件: 编辑表格数据可编辑的表格 <table>

ゝ一世哀愁。/ 2022年10月09日 13:28/ 0 赞/ 331 阅读

相关编辑html提示错误,JavaScript html编辑错误

我对JS很新，只是写了一些脚本来学习。有人能告诉我我要去哪里吗？我认为这可能只是某处的语法错误，或者我没有使用正确的功能来完成此任务。JavaScript html编辑错误

梦里梦外;/ 2022年10月09日 05:57/ 0 赞/ 223 阅读

相关 html双击变成可编辑状态,JS实现双击编辑可修改状态的方法

本文实例讲述了JS实现双击编辑可修改状态的方法。分享给大家供大家参考。具体如下：这是现在流行的一个表单特效，在网页上单击某文字，文字变为编辑状态，或者是让输入新文字，这就是

桃扇骨/ 2022年10月05日 12:49/ 0 赞/ 376 阅读

相关双击文本实现可编辑

双击文本实现可编辑 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[http://www.w

r囧r小猫/ 2022年08月10日 13:48/ 0 赞/ 216 阅读

相关 Html+js实现表格可编辑，并能动态添加删除行（赞）

原文出处：[https://blog.csdn.net/qqliang1314/article/details/41850919 （建义阅读原文）][https_blog.cs

今天药忘吃喽~/ 2022年05月19日 00:25/ 0 赞/ 469 阅读

相关语文·序言

1. 概述 1. 语文是生活中最常用的学科，有必要学好，也是我比较欠缺的方面 2. 本章将会包括：

淩亂°似流年/ 2021年11月22日 08:10/ 0 赞/ 313 阅读

相关 HTML实现可编辑下拉框

前言在HTML中下拉框是不能进行编辑的，我们可通过Select下拉框和input实现commbox功能思想：通过绝对定位实现input覆盖Select

墨蓝/ 2021年09月14日 14:30/ 0 赞/ 1047 阅读