一个比较使用的javascript tip

最新推荐文章于 2022-05-30 09:38:34 发布
最新推荐文章于 2022-05-30 09:38:34 发布
阅读量208 收藏
点赞数
分类专栏： AJAX 文章标签： JavaScript Microsoft ViewUI
一个比较使用的javascript tip。记录一下，方便以后查找。 :) 
<html>
<head>

<title>tip</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">

</head>

<body>
<script>


if(!document.attachEvent)
{
    document.attachEvent = function(){document.addEventListener(arguments[0].substr(2),arguments[1],arguments[2])}
}

document.attachEvent("onmouseover",function(e)
{
    var tip = "";

    if(typeof(event)=="undefined"){
        tip = e.target.getAttribute("tips")
    }else{
        e    = event;
        tip = e.srcElement.tips;
    }


    if(typeof(tip)!="undefined"&&tip.length>0)
    {
        var _tips = document.getElementById("myTip");

        if(typeof(_tips)=="undefined"||_tips == null)
        {
            _tips        = document.createElement("div");
            _tips.id    = "myTip";
            _tips.style.position        = "absolute";
            _tips.style.width            = "150px";
            _tips.style.borderWidth        = "1px";
            _tips.style.borderStyle        = "solid";
            _tips.style.borderColor        = "gray";
            _tips.style.fontSize        = "9pt";
            _tips.style.backgroundColor    = "#ffffff";
            _tips.style.color            = "#349045";


            _tips.style.filter            = "progid:DXImageTransform.Microsoft.Shadow(color=#999999,direction=135,strength=3)";
            _tips.style.padding            = "5px 8px 3px 8px";


            document.body.appendChild(_tips);            
            _tips.style.display            = "none";
        }

            _tips.style.display    = "";

            _tips.innerHTML        = tip;
            _tips.style.left = document.body.scrollLeft+e.clientX+10; 
            _tips.style.top = document.body.scrollTop+e.clientY+10; 
    }
}
);

document.attachEvent('onmouseout',function(e)
{   
    var _tips = document.getElementById("myTip");
    if(_tips!=null)
    {
        _tips.style.display="none";
    }
}
)
</script>

<a href="#" tips="自定义提示" >测试链接</a>
<a href="#" >测试链接</a>   
<a href="#" tips="中华人民共和国中华人民共和国自中华人民共和国中华人民共和国自定义提示中华人民共和国中华人民共和国自定义提示中华人民共和国中华人民共和国自定义提示定义提示中华人民共和国中华人民共和国自中华人民共和国中华人民共和国自定义提示中华人民共和">测试链接</a>   

</body>
</html>
melin1204
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
js中的tip提示信息
03-16
js中的tip提示信息js中的tip提示信息js中的tip提示信息js中的tip提示信息
JavaScript做的tip提示
12-22
jquery的一个插件,可以实现丰富样式的tip提示.使用起来很方便,体积超级小.但是必须结合jquery 1.3以上版本的js库才可以运行.
Javascript Tip(!!)
weixin_30832405的博客
07-20 102
var a；var b=!!a; a默认是undefined。!a是true，!!a则是false，所以b的值是false，而不再是undefined，也非其它值，主要是为后续判断提供便利。 !!一般用来将后面的表达式强制转换为布尔类型的数据（boolean），也就是只能是true或者false; 转载于:https://www.cnblogs.com/LiuXianBlog/p/387129...
JS实现DIV交互效果
mijingai的专栏
06-17 1307
js tip
星星的专栏
07-18 1435
opentip documentation To programmatically instantiate an Opentip you use this syntax: new Opentip("#my-trigger-element", "Optional content", "Optional title", { ...options... }) The c
两个Javascript小tip资料
10-28
两个Javascript小tip资料，学习js的朋友可以参考下。
JavaScript实现简单Tip提示框效果
10-22
主要介绍了JavaScript实现简单Tip提示框效果,涉及JavaScript响应鼠标事件针对页面元素动态操作的相关技巧,需要的朋友可以参考下
一个动态的Tip的实现
03-14
标题中的“一个动态的Tip的实现”指的是在软件开发中创建一种动态提示信息的技术。Tip通常是指在用户界面上短暂显示的小型信息框，用于提供额外的帮助或指示。动态Tip意味着它可以根据用户的交互或者特定条件实时...
tiptop1:第一个网站-Tiptop沙龙
03-16
第一个网站-Tiptop沙龙 其中大部分是在2021年3月1-5日进行的Web设计训练营中完成的 该网站展示了一家顶尖的美容院作为网站的功能。 要运行该网站，请单击以.html结尾的任何页面，然后从该网站内浏览。 因为这是一...
关于js的一些小tip
goodgirl1991的专栏
12-14 427
1、js中的this this指向的永远为当前代码所处的对象。如以下代码：var obj={ yes:function(){ this.val=true } }；
jquery.tipTips.js 官方原版 付使用教程
12-13
引入包内js及css文件，给元素设置titile，界面加载时调用元素.tipTip()方法，即可在鼠标悬停到指定元素时显示元素title内的内容。 <div id="div1" title="我是悬停提示内容">我是div的文本内容</div> $(function(){ $("#div1").tipTip(); })
javascript类型jsTip的提示信息
03-24
基于javascript的类型于jsTip的提示信息，鼠标滑过触发。
javascript tips提示框组件实现代码
12-11
tip.js 代码如下: function tips(obj,tag){ var tip = document.createElement(‘div’),arg= arguments[2],left,top; //创建tipbox var bodywid= document.documentElement.clientWidth; //这里也可以替换为容器的宽度$(id).outerWidth(); var abs = obj.getElementsByTagName(tag); tip.className=”tip_bd”; obj.appendChild(tip); for(var i=
js tooltip
11-19
javascript tooltip jquery tooltip demo js tooltip javascript tooltip demo
JS 代码优化Tip
weixin_48723799的博客
05-30 140
连环 if 优化 在许多业务中，往往会涉及很多的分支，当分支太多的时候，我们很容易像 code_1 那样将 if-else-if 写成非常 ugly 的代码段，那么有什么优化手段呢,接下来我们来看看代码 code-1 未优化的代码 逻辑很简单，根据 code 返回对应的颜色 // code-1 // 未优化前代码 function getColor(code){ if(code === '200'){ return 'blue-blue' }else if(code === '20
[js开源组件开发]tip提示组件
weixin_30908649的博客
08-11 140
tip提示组件 常见的应用场景中，总是难免会遇到提示信息，比如显示不完全时需要鼠标移上去显示title，比如验证时的错误提示，比如操作按钮的辅助说明等，所以我独立出来了一个小的js组件，tip提示组件。效果如下图所示： 大概就是这样了，不复杂的东西，也很实用。 它的DEMO实例请点击这里http://lovewebgames.com/jsmodule/tip.html 它的源码托管在g...
JS 常用TIP 测试输入合法性【HTML/JS】
jiayuanCo的博客
07-21 513
测试数字 function myFunction() { try { var x=document.getElementById("demo").value; if(x=="") throw "值为空"; if(isNaN(x)) throw "不是数字"; if(x>10) throw "太大"; if(x<5) throw "太小"; } catch(e
JAVASCRIPT 动态TIP 提示
faith789510的专栏
04-12 582
function tipShow(obj,e){ if(obj){ var  tipsId = obj.getAttribute(" tipsId"); var _tips = document.getElementById(tipsId);  var px; var py; if(typeof(event)=="undefined"){   px = e.clientX; py
用javascript实现的tip效果
上善若水
12-16 590
document.body.onmousemove=quickalt;document.body.onmouseover=getalt;document.body.onmouseout=restorealt;var tempalt='';function getalt(){    if(event.srcElement.title &amp;&amp; (event.srcElement.tit...
使用vue实现一个图片上传的页面
最新发布
05-30
好的，以下是用 Vue 实现一个图片上传页面的基本步骤： 1. 在 Vue 项目中安装 axios 和 element-ui： ```bash npm install axios element-ui --save ``` 2. 在组件中引入 element-ui 的上传组件和 axios： ```javascript <template> <div> <el-upload class="upload-demo" :action="uploadUrl" :on-preview="handlePreview" :on-remove="handleRemove" :on-success="handleSuccess" :file-list="fileList" :auto-upload="false" :show-file-list="false" multiple> <el-button slot="trigger" size="small" type="primary">选取文件</el-button> <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器</el-button> <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div> </el-upload> </div> </template> <script> import axios from 'axios' export default { name: 'ImageUpload', data() { return { fileList: [], uploadUrl: '/api/upload' // 上传图片的接口地址 } }, methods: { handlePreview(file) { console.log(file) }, handleRemove(file, fileList) { console.log(file, fileList) }, handleSuccess(response, file, fileList) { console.log(response, file, fileList) }, submitUpload() { this.$refs.upload.submit() } } } </script> ``` 3. 在组件中实现上传图片的方法： ```javascript handleSuccess(response, file, fileList) { console.log(response, file, fileList) // 将上传成功的图片添加到 fileList 中 this.fileList.push({ name: response.data.fileName, url: response.data.fileUrl }) }, submitUpload() { const formData = new FormData() // 添加要上传的图片到 formData 中 this.fileList.forEach(file => { formData.append('file', file.raw) }) // 使用 axios 发送 POST 请求上传图片 axios.post(this.uploadUrl, formData).then(response => { console.log(response) }).catch(error => { console.log(error) }) } ``` 4. 在服务端实现上传图片的接口： ```javascript const express = require('express') const multer = require('multer') const path = require('path') const app = express() // 设置上传文件的存储路径和文件名 const storage = multer.diskStorage({ destination: function (req, file, cb) { cb(null, './uploads/') }, filename: function (req, file, cb) { cb(null, Date.now() + path.extname(file.originalname)) } }) // 上传文件的限制 const limits = { fileSize: 1024 * 500, // 500kb files: 1 } // 创建 multer 实例 const upload = multer({ storage, limits }) // 处理上传文件的 POST 请求 app.post('/api/upload', upload.single('file'), (req, res) => { console.log(req.file) res.json({ status: 'success', data: { fileName: req.file.filename, fileUrl: `/uploads/${req.file.filename}` } }) }) // 启动服务 app.listen(3000, () => { console.log('Server is running at http://localhost:3000') }) ``` 以上就是用 Vue 实现图片上传页面的基本步骤，你可以根据自己的实际需求进行修改和完善。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值