精华内容
下载资源
问答
  • js 隐藏文本显示内容

    2021-03-31 20:08:29
    js隐藏文本value提示内容 <style> input{ width:300px; height:20px; color: #888; } </style> <body> <input type="text" value="手机"> <script> // 获取元素 var text...

    用js隐藏文本value提示内容

    <style>
        input{
            width:300px;
            height:20px;
            color: #888;
        }
    </style>
    <body>
        <input type="text" value="手机">
    
        <script>
            // 获取元素
            var text = document.querySelector('input');
            //注册事件 获得焦点事件
            text.onfocus = function(){
                //将默认文字删除
                if(this.value==='手机'){
                    this.value='';
                }
                console.log('获得焦点事件');
                //输入的文字颜色加深
                this.style.color = '#333';
            }
    
            text.onblur = function(){
                if(this.value === ''){
                    this.value = '手机';
                }
                this.style.color = '#888';
                console.log('失去焦点');
            }
        </script>
    </body>
    

    可大致分为三个步骤。
    1、首先获取到input标签。命名为text。
    2、设置两个函数分别是获取焦点事件情况、失去焦点事件情况。
    3、再在两个函数中添加内容,利用if判断value属性值是否为我们设置的提示语‘手机’ 。
    在获取焦点,即点击输入框时,属性值为设置的默认文本则删除默认值。
    在失去焦点,即点击输入框外,属性值若为空 则回复默认值。

    
    
    展开全文
  • 下面我将效果图展示出来:1,通过按钮实现隐藏与显示:这个是通过按钮点击实现的隐藏与显示,具体代码如下:通过按钮实现隐藏显示.body{margin: 0 auto;}#show{width: 600px;height: auto;font-size: 14px;...

    下面我将效果图展示出来:

    1,通过按钮实现隐藏与显示:

    这个是通过按钮点击实现的隐藏与显示,具体代码如下:

    通过按钮实现隐藏和显示

    .body{

    margin: 0 auto;

    }

    #show{

    width: 600px;

    height: auto;

    font-size: 14px;

    background-color: #E4C392;

    display: block;

    padding: 10px;

    margin: 0 auto;

    border-radius: 10px;

    }

    #show h2{

    color: #11C2EE;

    margin: 0 auto;

    }

    .slide{

    margin: 0 auto;

    padding: 0;

    width: 600px;

    border-top: solid 4px #D6A55C;

    }

    .btn-slide{

    background-color: bisque;

    width: 80px;

    height:30px;

    text-align: center;

    margin: 0 auto;

    border-radius: 8px;

    margin: 0 auto;

    display: block;

    }

    function divShow(){

    document.getElementById("btnshow").style.display="block";

    document.getElementById("btnhref").innerHTML ="关闭";

    document.getElementById("btnhref").href ="javascript:divhidden()";

    }

    function divhidden(){

    document.getElementById("btnshow").style.display="none";

    document.getElementById("btnhref").innerHTML ="了解";

    document.getElementById("btnhref").href ="javascript:divShow()";

    }

    通过点击按钮实现隐藏和显示


    欢迎来到我的博客Jaxzm!

    目前我在学习GoF的设计模式,你想了解么?想要了解的话,请点击按钮。

    GoF所描述的23种设计模式,总共可以分为三种类型:创建型模式,行为型模式,结构型模式。

    我觉得比较难的是创建型模式,因为它说的比较抽象,所以我不容易理解它,然后我编码也比较少,所以就不太容易理解这个。

    了解

    其中,主要能够实现这个功能的是js代码,

    通过getElementById()这个方法找到对应元素,进而控制它的style,以此来做对应的功能。这是一个比较简单的方法。

    接下来演示的是另外一种方式:

    这个是通过具体的时间限制来控制其隐藏与显示,

    代码如下:

    通过定时实现隐藏和显示

    .body{

    margin: 0 auto;

    padding: 0;

    background-color: #D6A55C;

    }

    #show{

    background-color: #E4C392;

    width: 700px;

    height: 100px;

    display: block;

    margin: 0 auto;

    padding: 10px;

    font-size: 14px;

    height: auto;

    text-align: center;

    }

    #show h2{

    color: #3CC4A9;

    }

    .hid{

    background: #E8E8E8;

    text-align: center;

    width: 700px;

    height: 100px;

    padding: 10px 10px 0 0;

    margin: 0 auto;

    display: block;

    text-decoration: none;

    }

    var h = 0;

    function addH(){

    if(h < 400){

    h=h+5;

    document.getElementById("show").style.height = h+"px";

    }

    else{

    return;

    }

    setTimeout("addH()",30);

    }

    window.onload = function showAds(){

    addH();

    setTimeout("subH()",5000);

    }

    function subH(){

    if(h >0){

    h -= 5;

    document.getElementById("show").style.height = h+"px";

    }

    else{

    document.getElementById("show").style.display = "none";

    return;

    }

    setTimeout("subH()",30);

    }

    Jaxzm欢迎您的访问

    此茶虽未饮,未闻,我心自生香.

    Jaxzm欢迎您的访问

    展开全文
  • 文本过多时隐藏部分文本js实现龙行web前端2019-2-1519370评论情景描述:有时候我们需要显示部分文字,就像 QQ 空间这样,先显示部分文字,加一个【查看全文】,让用户选择是否查看全部解决方法:第一步:在一个 id ...

    文本过多时隐藏部分文本js实现

    龙行    web前端    2019-2-15    1937    0评论

    情景描述:有时候我们需要显示部分文字,就像 QQ 空间这样,先显示部分文字,加一个【查看全文】,让用户选择是否查看全部

    解决方法:

    第一步:在一个 id 为 fullText 的 div 标签中存放所有文本,在另一个名为 subText 的div标签中存放部分文本(20个字为例)的文本,在一个 a 标签中实现点击效果。页面初识加载时,将要显示的文本放入一个 text 变量中,将fullText 的 div 的文本置为空,判断 text 长度是否大于20,若大于20,在名为subText 的 div 标签中显示前20个字的文本+“…查看全文”。若不大于20,在subText 显示全部文本。

    第二步:点击a标签时,判断 a 标签的文本内容,若为“…查看全文”,将 text 变量中的值赋给 subText,并将 a 标签改为”收起”。若a标签中的内容为”收起”,将 text 变量的前9个值赋给 subText 并将 a 标签改为“…查看全文”。

    隐藏功能

    物联网是新一代信息技术的重要组成部分,也是“信息化”时代的重要发展阶段。其英文名称是:“Internet of things(IoT)”。顾名思义,物联网就是物物相连的互联网。这有两层意思:其一,物联网的核心和基础仍然是互联网,是在互联网基础上的延伸和扩展的网络;其二,其用户端延伸和扩展到了任何物品与物品之间,进行信息交换和通信,也就是物物相息。物联网通过智能感知、识别技术与普适计算等通信感知技术,广泛应用于网络的融合中,也因此被称为继计算机、互联网之后世界信息产业发展的第三次浪潮。物联网是互联网的应用拓展,与其说物联网是网络,不如说物联网是业务和应用。因此,应用创新是物联网发展的核心,以用户体验为核心的创新2.0是物联网发展的灵魂。

    var text;

    function show() {

    text = document.getElementById("fullText").innerHTML;

    document.getElementById("fullText").innerHTML = "";

    document.getElementById("subText").style.float = "left";

    document.getElementById("btn").style.float = "left";

    if(text.length > 20) {

    document.getElementById("subText").innerHTML = text.substring(0, 20);

    document.getElementById("btn").innerHTML = "...查看全文";

    } else {

    document.getElementById("subText").innerHTML = text;

    document.getElementById("btn").innerHTML = "";

    }

    }

    function change() {

    var t = document.getElementById("btn");

    var tt = document.getElementById("subText");

    if(t.innerHTML == "...查看全文") {

    tt.innerHTML = text;

    t.innerHTML = "收起"

    } else {

    tt.innerHTML = text.substring(0, 20);

    t.innerHTML = "...查看全文"

    }

    }

    show();

    评论一下

    赞助站长

    赞助站长X

    版权申明:此文如未标注转载均为本站原创,自由转载请表明出处《龙行博客》。

    本文网址:https://www.liaotaoo.cn/165.html

    展开全文
  • Unsplash当我们在浏览网页的时候,描述性的文本通常不会跟在图片之后,而是当我们将鼠标移至图片上时,才会将文本显示出来,这样的好处是,以突显图片为主,并节省布局空间HTML 结构如下 世界上最好的Nian糕 世界上...

    141ba9b62d89

    Unsplash

    当我们在浏览网页的时候,描述性的文本通常不会跟在图片之后,而是当我们将鼠标移至图片上时,才会将文本显示出来,这样的好处是,以突显图片为主,并节省布局空间

    HTML 结构如下

    • n1.jpg

      世界上最好的

      Nian糕

    • n2.jpg

      世界上最好的

      Nian糕

    • n3.jpg

      世界上最好的

      Nian糕

    CSS 样式如下

    *{margin:0px;padding:0px;}

    #content{width:800px;height:180px;margin:200px auto 0px;border-bottom:1px solid #990033;}

    #content ul{list-style:none;width:750px;height:180px;margin:auto;}

    #content ul li{width:250px;height:180px;float:left;position:relative;overflow:hidden;}

    #content ul li div.tit{width:250px;height:50px;position:absolute;left:0px;bottom:-50px;background:rgba(0,0,0,0.5);}

    #content ul li div.tit p{color:#fff;text-align:center;margin:3px;font-family:"微软雅黑";}

    #footer{width:800px;height:160px;}

    #footer div.tel{width:100%;height:30px;color:#993300;font-size:12px;margin-left:40px;margin-top:10px;margin-bottom:20px;}

    #footer div.tel p a{width:50px;height:32px;display:inline-block;vertical-align:middle;}

    #footer div.detail{width:100%;height:50px;margin-left:40px;color:#993300;font-size:12px;}

    #footer div.detail p{margin-top:5px;}

    #footer div.detail p.curr{font-weight:bold;}

    #footer div.footer-nav{width:280px;float:right;color:#993300;font-size:12px;}

    #footer div.footer-nav ul li{list-style:none;float:left;margin-top:10px;}

    引入 jQuery 库,通过 $(this) 获取到鼠标所悬停的 li 元素, 第一个 function 实现了鼠标悬停在上面的效果,第二个 function 实现了鼠标离开之后的效果,并调用 .animate() 方法过渡平滑

    $("#content ul li").hover(function(){//鼠标悬停在上面实现什么效果

    $(this).find("div").stop().animate({

    "bottom":"0px"

    },1000);

    },function(){//鼠标离开实现什么功能

    $(this).find("div").stop().animate({

    "bottom":"-50px"

    },1000);

    });

    141ba9b62d89

    运行结果

    本篇的内容到这里就全部结束了,源码我已经发到了 GitHub Source_code 上了,有需要的同学可自行下载,预览效果可点击 effect

    End of File

    行文过程中出现错误或不妥之处在所难免,希望大家能够给予指正,以免误导更多人,最后,如果你觉得我的文章写的还不错,希望能够点一下喜欢和关注,为了我能早日成为简书优秀作者献上一发助攻吧,谢谢!^ ^

    展开全文
  • 我试图单击显示/隐藏D3中节点的文本.我尝试使用以下代码:var node = svg.selectAll(".node").data(json.nodes)(...)node.on("click", function() {if (textShowing) {node.select("text").style("visibility", ...
  • //默认是0 eye.onclick = function() { //点击事件 类型改为文本 if (flag == 0) { pwd.type = 'text'; //类型改为文本框 eye.src = 'images/open.png'; flag = 1; // flag赋值为1 ,再次点击不会执行if语句 执行...
  • 下面是一个使“重用”文本与“span-group”同步的示例。 Please Select USUK$5.0025 PoundsIt looks like you would like to spend $(function() {showSelectedCurrency();$('#country').change(function() {...
  • 这个案例核心是:通过点击事件click,每点击一次,让文本框和密码框交换,相应的也改变图片路径,用一个全局变量,...代码如下: <body> <div class="box"> ...img src="img/yin.png" alt="" id="eye">...
  • 一种方法如下,但这当然 – 依赖于JavaScript:function centralEllipsis(opts) {// the default settings,which can be overridden// by the user:var settings = {// the number of the original characters to ...
  • 这篇文章主要为大家详细介绍了js 文字超出部分隐藏、点击显示更多示例,具有一定的参考价值,可以用来参考一下。感兴趣js 文字超出部分隐藏、点击显示更多示例的小伙伴,下面一起跟随512笔记的小编罗X来看看吧。css...
  • 有一个需求,移动端用户需要根据从后端获取的标题太长的时候显示隐藏 一开始我的想法是获取字符串长度,截取字符串后拼接… 但是转念一想手机屏幕尺寸不一,展示的效果可能千差万别,例如若截取10个字为长度,后续用...
  • css文本超出隐藏 显示三个点 文本超出显示三个点一般分两种情况 一、单行文本超出隐藏 overflow:hidden; text-overflow:ellipsis; white-space:nowrap; 二、多行文本超出隐藏 text-overflow: -o-ellipsis-last...
  • //超出的文本隐藏 text-overflow:ellipsis; //溢出用省略号显示 white-space:nowrap; //溢出不换行 但是第三条属性,只能显示一行,不能用在这里,那么如果显示多行呢? 超出两行隐藏: css3解决了这个问题,解决...
  • 密码显示与隐藏效果 html+css+js

    千次阅读 多人点赞 2021-01-21 00:49:44
    一般在我们要输入密码的时候都可以让自己输入的密码显示或者隐藏,所以我做了一个简约的密码框~ 实现: 定义html的输入框的标签,kuang为底层盒子,password为输入框,conceal是那个小眼睛按钮: <div class=...
  • 描述 当鼠标点击文本框时,里面的默认文字隐藏,当鼠标离开文本框时,里面的文字显示。 分析 ①首先表单需要2个新事件,获得焦点 onfocus 失去焦点 onblur ② 如果获得焦点, 判断表单里面内容是否为默认文字,如果...
  • js怎么控制a标签的显示隐藏将标签放在层里面,控制层的显示隐藏就可以: show是层的ID名, 隐藏层:document.getElementById("show").style.display = "none"; 显示层:document.getElementById("show").style....
  • 对于不同月份我要显示不同的天数,但select的option不能够使用display等方法进行隐藏,于是在网上查了查,整理了一下资料,写出了以下可以正常使用的代码。/p>Transitional//EN">对select中option的操作(隐藏...
  • readmore.js使用非常简单,无需复杂的格式或编码的类名,只需调用.readmore()包含文本块的元素和readmore.js即可完成剩下的工作。注意:Readmore.js与jquery版本大于1.7.0,浏览器版本尽量使用更高的,低版本的也...
  • 本文实例讲述了jQuery实现文本显示一段时间后隐藏的方法。分享给大家供大家参考,具体如下:点击button时,提示信息显示,8秒后,信息隐藏。请耐心等待,这段文本显示8秒后会消失,安拓网络。jQuery(document).ready...
  • css以下都需要设置元素宽度单行文本overflow: hidden;text-overflow: ellipsis;white-space: nowrap;多行文本webkit、ff或移动端(不兼容IE)overflow : hidden;text-overflow: ellipsis;/* 将对象作为弹性伸缩盒子...
  • 实现: .text{ display: -webkit-box; /*弹性伸缩盒子模型显示*/ -webkit-box-orient: vertical; /*排列方式*/ -webkit-line-clamp: 1... /*显示文本行数(这里控制多少行隐藏)*/ overflow: hidden; /*溢出隐藏*/ }
  • } } JavaScript 做为一个Web开发师来说,如果你想提供漂亮的网页、令用户满意的上网体验,JavaScript是必不可少的工具。 做为一个Web用必不可少的工具。 想要实现一键隐藏,出现,最简单的办法是使用 jquery,两行代码...
  • 该方法可以实现当一行文本内容超过固定长度后,收缩起来,显示一个“展开”按钮,用户一点击后就显示全部内容。当然多行文本也同样适用,(若是全部是中文也可以使用判断判断字符串长度的方法,中文占用两个字符,...
  • 我想使用javascript自定义这个show hide ...
  • 1. 原生js版本 源码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> &...
  • //简单页面结构 //js实现
  • Unsplash我在 JavaScript 鼠标悬停图片,显示隐藏文本 这篇博文当中实现了同样的效果,只不过是通过 JS 来实现的,但其实,通过 CSS 动画也能实现同样的效果,直接看代码吧HTML 结构如下![](image/n1.jpg)世界上最好...
  • vue echarts y轴文本过长,设置超出隐藏,然后显示省略号,并且鼠标悬浮上之后显示全部 效果图 <template> <div> <!-- 生态流量报警:echarts图2:柱状图 --> <div id="main-barChart">...
  • 此部分转载自链接: js 文字超出长度用省略号代替,鼠标悬停并以悬浮框显示. 以下展示最简单的办法,转载的原文还另举了一种onload方法挂载事件。 <div style='width:120px;white-space:nowrap;text-overflow:...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 93,828
精华内容 37,531
关键字:

js文本的隐藏与显示