用js写的简洁笔记本（便于查看代码和运行结果）

最新推荐文章于 2022-10-21 11:05:10 发布

zhumengstyle

最新推荐文章于 2022-10-21 11:05:10 发布

阅读量901

点赞数 1

CC 4.0 BY-SA版权

分类专栏： jQuery 文章标签： javascript

本文链接：https://blog.csdn.net/zhumengstyle/article/details/75036029

jQuery 专栏收录该内容

20 篇文章

订阅专栏

博主基于一本推荐书籍的示例，创建了一个简洁的在线笔记本，用于记录和运行代码笔记，以加深理解。点击目录即可查看代码内容及运行结果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

只是看了一本朋友推荐的书，想跟这书中的demo实例，做一下读书笔记，以便加深印象，才有了写这个简单的记录本的想法。
页面简洁效果：
目录展示

单击目录，可以查看代码笔记内容及运行结果，如下图：
笔记代码内容

页面代码【如下】：

<!DOCTYPE html>
<html>
<head>
    <title>《Javascript设计模式》【学习笔记】</title>
    <script type="text/javascript" src="/public/js/jquery-1.9.0.min.js"></script>
    <style>
        .mymulu{
            display:inline-block; 
            float:left; 
            line-height:30px; 
            font-size:1em; 
            font-weight:bold; 
            color:#acacc3;
            width:300px;
            height:30px;
            overflow:hidden;
            border:1px solid red;
            margin-left:5px;
            margin-top:2px;
        }
    </style>
</head>
<body>
<ul>
    <li class="mymulu" xuhao="1">第一章 灵活的语言---JavaScript</li>
    <li class="mymulu" xuhao="2">第二章 面向对象编程</li>
    <li class="mymulu" xuhao="2">第二章 面向对象编程</li>
    <li class="mymulu" xuhao="2">第二章 面向对象编程</li>
    <li class="mymulu" xuhao="2">第二章 面向对象编程</li>
    <li class="mymulu" xuhao="2">第二章 面向对象编程</li>
    <li class="mymulu" xuhao="2">第二章 面向对象编程</li>
</ul>
</body>
<script>
$('.mymulu').click(function(){
    var xuhao=$(this).attr('xuhao');
      function getJs(sUrl) {
            var ie = navigator.userAgent.indexOf('MSIE') > 0;
            var o = ie ? new ActiveXObject('Microsoft.XMLHTTP') : new XMLHttpRequest();
            o.open('get', sUrl, false);
            o.send(null);
            return { body : o.responseText };
      }
      //说明一下：getJs()此函数是学习了一位网友的博文[博文地址](http://blog.163.com/hwg3000@126/blog/static/34788603201211733748413/)，特此感谢。
      var a = getJs('js/'+xuhao+'.js').body;
      $('pre').html(a);
      document.write('<pre style="width: 89%;min-height: 100px;display: inline-block;border: 1px dotted #785;background: #f5f5f5;margin-top: 5px;margin-left:45px;font-size:15px;font-family:Microsoft YaHei,Arial;padding-left:100px;padding-top:8px;">'+a+'</pre>');
      document.write('<script type="text/javascript" src="js/'+xuhao+'.js"><\/script>');
})


</script>

</html>