通过JavaScript代码实现 标题的控制+添加信息

最新推荐文章于 2024-02-17 12:57:17 发布
最新推荐文章于 2024-02-17 12:57:17 发布
阅读量669 收藏
点赞数
分类专栏： html5+css3 javascript 文章标签： javascript c语言
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Luck_whr/article/details/78188599
版权
  • 实现效果
    • showTitle：当点击显示标题按钮时，将所有的标题显示出来
    • hideTitle：当点击隐藏标题按钮时，将所有的标题隐藏起来
    • addCity：当点击添加城市按钮时，会在原有的城市列表下新建一个城市名字

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <title></title>
    <script>
        //        function showTitle() {
        //            var titleElement = document.getElementById("title");
        //            titleElement.style.display = "block";
        //        }
        //
        //        function hideTitle() {
        //            var titleElement = document.getElementById("title");
        //            titleElement.style.display = "none";
        //        }

        function addCity() {
            var newElement = document.createElement("li"); // <li></li>
            var textNode = document.createTextNode("重庆"); // 重庆
            newElement.appendChild(textNode); // <li>重庆</li>

            document.getElementById("city").appendChild(newElement);
        }
    </script>
</head>
<body>

<h3 id="title" style="display: block">八维学院</h3>

<h3 id="title222" style="display: block">八维学院222</h3>

<div>选择城市</div>

<ul id="city">
    <li>北京</li>
    <li id="city_2">上海</li>
    <li>天津</li>
</ul>

<input type="button" onclick="showTitle()" value="显示标题"/>
<input type="button" onclick="hideTitle()" value="隐藏标题"/>

<input type="button" onclick="addCity()" value="添加城市"/>
<script>
    /*window.document.getElementById("title");*/
    var arr = document.getElementsByTagName("h3");
    console.log(arr[0]);
    console.log(arr[1]);
</script>
</body>
</html>
人走丿茶凉
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
用JavaScript为句子加标题的三种方法
知柯信安
12-20 1000
本文基于Free Code Camp基本算法脚本“标题案例一句”。 在此算法中，我们要更改文本字符串，以便每个单词的开头始终都有一个大写字母。 在本文中，我将解释三种方法。首先使用FOR循环，其次使用map（）方法，第三次使用replace（）方法。 算法挑战 返回提供的字符串，每个单词的首字母大写。确保单词的其余部分为小写。 出于此练习的目的，你还应该大写连接词，例如“ the”和“ of”。 提供的测试用例 titleCase(“I’m a little tea pot”)返回一个字符串。 tit
用javascript在网页中向表格中添加信息
qq_41898663的博客
04-28 610
&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt;&lt;meta charset="UTF-8"&gt;&lt;title&gt;Document&lt;/title&gt;&lt;script type="text/javascript"&gt;function delsel
js添加表单信息
最新发布
m0_57287985的博客
02-17 313
这里的e.preventDefault()要注意，在点击submit时，默认会post信息跳转到另一个网页中，所以要取消默认设置。基本框架如下图所示，通过在新增学员中录入数据，当点击录入时，新增学员的文本的信息清空并且在就业榜中增加该信息。基本思路：信息填好后，点击录入，将表单的信息组成对象，将对象添加到数组对象中。第二个模块：新增一个tr,将数组对象的数据添加到tr中。两个模块：1.点击录入数据 2.添加到就业榜。
js实现网页标题不断改变效果
baikeliang的专栏
03-13 1889
以前就发现过有的网页标题是不断改变的，但是一直都不知是怎么实现的，今天无意间找到了跟大家分享一下。 var msg="欢迎页面，测试，Hello，World！世界,你好!" var delay=200 function scrollTitle() { window.document.title=msg msg=msg.substring(1,msg.length)+m
js书写信息添加列表
全栈若城,专注知识分享
10-08 879
js书写信息添加列表 ；  先上效果图 首先看一下css样式表 写法  .odiv{ width: 100%; height: 100px; } .odiv p{ width: 200px; float: left; height: 30px; line-height: 30px; } .odiv input{ ...
用javascript实现“闪动”标题栏
10-31
`animatetitle`函数的主体部分，通过修改`window.document.title`属性来实现标题栏的变化。`substr(0, i)`用于截取当前文本的前`i`个字符，并在末尾添加一个下划线`_`，形成闪烁的效果。`ud`变量的切换决定了字符的...
javascript动态向网页中添加表格实现代码
10-26
在上述代码中，使用了onload事件来确保在页面加载完成后执行JavaScript代码。这保证了当表格被添加到DOM中时，页面已经完全加载，从而避免了执行相关操作时出现的“找不到元素”的错误。 知识点四：CSS样式的应用 ...
javascript 写的10屏带标题Flash+xml焦点图代码
05-21
JavaScript代码通常会监听DOM元素（如按钮或定时器）的事件，当这些事件触发时，代码会更新显示的图片，并可能伴有过渡动画，提供平滑的用户体验。 其次，Flash作为辅助技术，用于创建视觉效果，如图片的淡入淡出、...
京东首页Html+css+javascript代码
04-15
在本项目中，“京东首页Html+css+javascript代码”展示了如何使用前端开发的三大核心技术——HTML、CSS和JavaScript，来构建一个类似京东首页的网页。这个项目旨在帮助开发者理解购物网站的基本架构，并通过实践增强...
两个简单javascript代码实现 变换的标题栏
12-15
//设置变量，用于控制循环显示标题 var step = 0; //将要显示的标题内容放在一个数组中，通过显示数组中的元素来显示标题 var titleText = ["您好！","欢迎光临","祝您身体健康"]; //设置用于循环显示标题的函数 function showTitle() { //如果数组下标等于数组长度，则让下标恢复到0 if (step==titleText.length) { step = 0; } //显示标题 document.title = titleText[step]; //如果使用以下代码，则可以在状态栏上显示滚动的信息 //window.status = titleText[step]; //数组下标记数加1 step++;
原生js编写学生信息管理系统——添加学生信息
weixin_68915174的博客
11-01 1815
submit属于提交按钮，不需要绑定监听事件，button需要手动添加事件，作用范围广（出现的问题：运用submit导致点击事件里面的方法都没办法实现）二：有关获取下拉列表select选择的option的内容1.获取select对象2.获取选择的option的索引（selectedIndex属性可设置或返回下拉列表被选选项的索引号）3.获取被选中的option的text或者value三、多个数据输入需要用表单域将所有input表单包裹起来使彼此之间建立关联。
用js简单实现信息录入功能
qq_64180670的博客
11-12 1759
用js简单实现信息录入功能
网站标题动态改变，js代码实现
南岛鹋
03-24 305
效果图 JS代码 var OriginTitile=document.title; var st; document.addEventListener('visibilitychange',function(){ if(document.hidden){ document.title="(つェ⊂)浏览器崩溃了"; clearTimeout(st); console.log('hid...
js模拟title效果，代码实现
Wileste的博客
12-21 390
网上看了几个帖子，自己就写了一个，比较简单的，只有大概功能，详细部分还要根据自己的需求添加和修改。 <!doctype html> <html> <head> <meta charset="UTF-8"/> <title>模拟title</title> <style> .div1{ height:100px; width:200px; background-color: aqua; } .div2{ .
使用js编写标题跑马灯
weixin_48039439的博客
10-17 143
使用js代码编写位于标题的跑马灯效果 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <script> var str= '* * * 欢 迎 光 临 * * *'; //字符串的截取 function run(){ str = str
js 设置网页标题（兼容微信内置浏览器）
pig_ning的博客
11-21 601
js 设置网页标题（兼容微信内置浏览器）
【js实例】js实现点击标题标签切换显示对应内容
热门推荐
我的米饭
02-13 1万+
标题标签层点击后切换显示对应的内容层<script> //获取所有标题标签层和内容层 var oul = document.getElementById("NewsUl"), oli = oul.getElementsByTagName("li"), art = document.getElementsByTagName("article");
JavaScript实现jsp页面显示文本框内容到页面
m0_47747430的博客
10-16 3213
JavaScript实现jsp页面显示文本框内容到页面 实验目的：单击按钮获取文本框输入内容，再显示框显示。 1.通过myeclipse新建jsp项目 2.敲上以下代码： 显示 ![在这里插入图片描述](https://img-blog.csdnimg.cn/20201016124108178.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4u
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值