<!-- 为页面添加爱心特效 -->
<script type="text/javascript"> (function (window, document, undefined) {
var hearts = []; window.requestAnimationFrame = (function () {
return window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.oRequestAnimationFrame ||
window.msRequestAnimationFrame ||
function (callback) {
setTimeout(callback, 1000 / 60);
}
})(); init(); function init() {
css(".heart{width: 10px;height: 10px;position: fixed;background: #f00;transform: rotate(45deg);-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);}.heart:after,.heart:before{content: '';width: inherit;height: inherit;background: inherit;border-radius: 50%;-webkit-border-radius: 50%;-moz-border-radius: 50%;position: absolute;}.heart:after{top: -5px;}.heart:before{left: -5px;}");
attachEvent();
gameloop();
} function gameloop() {
for (var i = 0; i < hearts.length; i++) {
if (hearts[i].alpha <= 0) {
document.body.removeChild(hearts[i].el);
hearts.splice(i, 1);
continue;
} hearts[i].y--;
hearts[i].scale += 0.004;
hearts[i].alpha -= 0.013;
hearts[i].el.style.cssText = "left:" + hearts[i].x + "px;top:" + hearts[i].y + "px;opacity:" + hearts[i].alpha + ";transform:scale(" + hearts[i].scale + "," + hearts[i].scale + ") rotate(45deg);background:" + hearts[i].color;
} requestAnimationFrame(gameloop);
} function attachEvent() {
var old = typeof window.onclick === "function" && window.onclick;
window.onclick = function (event) {
old && old();
createHeart(event);
}
} function createHeart(event) {
var d = document.createElement("div");
d.className = "heart";
hearts.push({
el: d,
x: event.clientX - 5,
y: event.clientY - 5,
scale: 1,
alpha: 1,
color: randomColor()
}); document.body.appendChild(d);
} function css(css) {
var style = document.createElement("style");
style.type = "text/css";
try {
style.appendChild(document.createTextNode(css));
}
catch (ex) {
style.styleSheet.cssText = css;
} document.getElementsByTagName('head')[0].appendChild(style);
} function randomColor() {
return "rgb(" + (~~(Math.random() * 255)) + "," + (~~(Math.random() * 255)) + "," + (~~(Math.random() * 255)) + ")";
} })(window, document);
</script>
<!--侧边结束-->

爱心特效

<!-- <script>
window.onload = function () {
var ooo = document.getElementById("leftmenu");
var isOnPc = (/Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent));
if (!isOnPc) { ooo.innerHTML = "这是电脑"; } else {
ooo.innerHTML = "暂不支持手机端"
}
}
</script>-->

判断手机端

原生js为页面添加爱心特效和判断手机端还是电脑端登录的更多相关文章

  1. js给页面添加滚动事件并判断滚动方向

    <script> var scrollFunc = function (e) { var direct = 0; e = e || window.event; if (e.wheelDel ...

  2. JS判断手机端和PC端自动跳转

    <script type="text/javascript">     function browserRedirect() {     var sUserAgent ...

  3. js判断手机端和pc端

    var browser = { versions: function() { var u = navigator.userAgent, app = navigator.appVersion; retu ...

  4. js判断浏览设备是 手机端,电脑端还是平板端

    console.log(navigator.userAgent); var os = function() { var ua = navigator.userAgent, isWindowsPhone ...

  5. js 判断用户是手机端还是电脑端访问

    通过userAgent 判断,网页可以直接使用 navigation对象 node端 可以通过请求头的 ctx.request.header['user-agent'] const browser = ...

  6. PHP项目实现手机端和PC端的页面切换

    目前访问页面的要切换成手机端和PC端,原理是通过对设备作出判断,显示不同的功能和页面. 如果手机端和PC端的功能结构不相同,一般会写两套系统,一套适用于PC端,一套适用于手机端. 如果功能相同,则只需 ...

  7. js判断手机端操作系统(Andorid/IOS)

    非常实用的js判断手机端操作系统(Andorid/IOS),并自动跳转相应下载界面 androidURL = "http://xxx/xxx.apk"; var browser = ...

  8. CSS3及JS简单实现选项卡效果(适配手机端和pc端)

    想要适配手机端和pc端,有几种简单的方法,本人使用的是百分比分配的方法. *{ padding: 0; margin: 0; } body,html{ width: 100%; height: 100 ...

  9. 原生JS实现各种经典网页特效——Banner图滚动、选项卡切换、广告弹窗等

    在制作网页过程中,我们可能会遇到各种常用的经典网页特效,比如Banner图片滚动.选项卡循环播放.右下角广告弹窗.评论提交展示.选项动态增删.剪刀石头布小游戏等等等...是不是感觉都见到过这些场景.那 ...

随机推荐

  1. [leetcode_easy]558. Quad Tree Intersection

    problem 558. Quad Tree Intersection re 1. Leetcode_easy_558. Quad Tree Intersection; 2. Grandyang; e ...

  2. 360再报丑闻,派遣黑客盗取ESET安全软件病毒库,法院已经介入调查

    360再报丑闻,派遣黑客盗取ESET安全软件病毒库,联合法院已经介入调查.360于2019/3/10日通过非法途径试图盗取ESET安全软件100MB的病毒库,ESET立即反抗,360黑客电脑立即崩溃, ...

  3. (3)Linux命令分类汇总(7~12)

    Linux命令分类汇总(7~12) (七)用户管理命令(12个) 1    useradd cdgs   添加用户. 2     usermod 修改系统已经存在的用户属性. 3    userdel ...

  4. MYSQL SHOW 用法

    1.SHOW CHARACTER SET 显示所有可用的字符集 mysql> SHOW CHARACTER SET LIKE 'utf8'; +---------+--------------- ...

  5. 利用js对象将iframe数据缓存, 实现子页面跳转后, 返回时不丢失之前填写的数据

    利用js对象将iframe数据缓存, 实现子页面跳转后, 返回时不丢失之前填写的数据 实现描述:将数据存放在js对象中, 然后放在父页面的document对象中, 在页面刷新的时候将父页面的值取出来, ...

  6. MVCC原理 4步 什么是MVCC、事务ACID、事物隔离级别、Innodb存储引擎是如何实现MVCC的

    MVCC是来处理并发的问题,提高并发的访问效率,读不阻塞写.事物A 原子性C 一致性I 隔离性D 持久性高并发的场景下的问题脏读不可重复读幻读事物隔离级别RU读未提交 脏读/不可重复读/幻读 .不适用 ...

  7. (六)mybatis 全局配置文件讲解

    目录 properties (属性) settings 全局参数配置 typeAliases 别名设置 typeHandlers 类型处理器 mapper (映射器) 细节 properties (属 ...

  8. (六)Spring 中的 JdbcTemplate

    目录 概念 配置数据库 创建 JdbcTemplate 对象 增删改查代码 概念 JdbcTemplate : 是 Spring 中对持久层(JDBC 技术)一个封装 : 使用起来和 Dbutuis ...

  9. Laravel 最佳实践

    单一职责原则 一个类和一个方法应该只有一个责任. 例如: public function getFullNameAttribute() { if (auth()->user() &&am ...

  10. python学习-8 用户有三次机会登陆

    用户登陆(三次机会) count = 0 while count < 3: user = input('请输入账号:') pwd = input('请输入密码:') ': print(" ...