Js实现一个点击按钮然后网页换肤

JavaScript实现网页换肤

<html> <head> <meta charset="utf-8"> <title>无标题文档</title> <link id="link1" rel="stylesheet" type="text/css" href="" /> <script> function skin1() { var ol=document.

网页换肤的基本原理使用 JS 切换对应的 CSS 样式表.例如hao123首页的右上方就有网页换肤功能.除了切换 CSS 样式表文件之外,通常的网页换肤还需要通过 Cookie 来记录用户之前更换过的皮肤,这样下次用户访问的时候,就可以自动使用上次用户配置的选项. 基本流程如下: 上面是使用流程图来描述下,自从工作以来很小画这样的流程图如果流程图画错了或者画的不够好请大家原谅! 先来看看效果图吧! 我只是做个demo 来实现这样一个效果!假如页面上一进来的时候有这么四个按钮分别代表不同

js网页换肤

使网页背景颜色可选黄/粉 <html> <head> <meta charset="utf-8"> <meta name="generator" content="HTML Tidy for HTML5 (experimental) for Windows https://github.com/w3c/tidy-html5/tree/c63cc39" /> <title>网页换肤<

JavaScript网页换肤

使网页背景颜色可选黄/粉 <!doctype html> <html> <head><title>网页换肤</title></head> <link id="css1" href="5-1.css" type="text/css" rel="stylesheet"> <script> function ys1(){ var a=do

使用JS代码实现点击按钮下载文件

有时候我们在网页上需要增加一个下载按钮,让用户能够点击后下载页面上的资料,那么怎样才能实现功能呢?这里有两种方法: 现在需要在页面上添加一个下载按钮,点击按钮下载文件. 题外话,这个下载图标是引用的 font-awesome 上面的.使用时,首先将 font-awesome 整个文件夹下载下来,利用bower或者是自己去官网上面下载都行. 将整个文件夹放在项目文件中之后,在页面上面引入css文件 1 <link href="libs/font-awesome-4.7.0/css/font-

CSS3和js炫酷点击按钮3D翻转动画特效

简要教程 flipside是一款使用CSS3和js制作的炫酷点击按钮无缝过渡到确认面板的过渡动画特效.该点击按钮特效在按钮不同方向的边部点击时,产生的过渡动画特效是不一样的. 在线预览源码下载使用方法使用该按钮过渡动画特效需要引入它提供的按钮样式表style.css和用于触发按钮点击事件的js文件script.js. HTML结构该点击按钮过渡动画特效使用一个嵌套div的HTML结构: <div class="btn"> <div class="

js 实现页面点击按钮复制内容

前言: 我们平时在页面中是按照长按来实现复制相关的内容,那么怎么用js实现点击按钮实现复制相关的内容呢?请看如下方法: 实现步骤: 1.引入相关的js(ClipboardJS插件) <script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.0/clipboard.min.js"></script> <script type="text/javascript"

JS学习笔记 - fgm练习 - 网页换肤

总结: 1. 点击按钮,div内部变色,边框保持颜色不变. 实现原理:其实本来就把background 和 border 分别设置了同一个颜色,看似是一个整体,其实本来就是分开的. 那么点击的时候,只需要更改background 的颜色. border 部分不需要设置. 2. for in 循环,遍历数组的用法: for(var p in oSkin) oSkin[p].className = ""; 等价于下面的代码: for(var i=0; i<aDiv.length;

基于js的网页换肤（不需要刷新整个页面，只需替换css文件）

1. [代码][JS]代码 <HTML><HEAD><link ID="skin" rel="stylesheet" type="text/css"><TITLE>换肤技术</TITLE><SCRIPT LANGUAGE=javascript><!--function SetCookie(name,value){ var argv=SetCookie.ar

网页换肤,模块换肤,jQuery的Cookie插件使用（转）

具体效果如下: 第一次加载如下图: 然后点击天蓝色按钮换成天蓝色皮肤如下图: 然后关闭网页重新打开或者在打开另一个网页如下图: 因为皮肤用Cookie保存了下来,所以不会重置具体的实现代码如下: <!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml"><head> <meta charset="utf-8" />

【转】Javascript+css 实现网页换肤功能

来源:http://www.php100.com/html/webkaifa/DIV_CSS/2008/1014/2326.html Html代码部分: 1.要有一个带id的样式表链接,我们要通过操作这个链接来调用不同的href. <link href="css/main0.css" rel="stylesheet" type="text/css" id="cssfile" /> 2.皮肤选择按钮(后台为每个li添

vue.js如何实现点击按钮动态添加li

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript" src="js/vue.js" ></script> </head> <body> <div id="todo-l

js 实用封装点击按钮复制到剪贴板

封装剪贴板: function Copy(str) { var save = function (e) { //设置需要复制模板的内容 e.clipboardData.setData('text/plain',str); //阻止默认行为 e.preventDefault(); } // h5监听copy事件,调用save函数保存到模板中 document.addEventListener('copy',save); // 调用右键复制功能 document.execCommand('copy'

js jquery 实现点击按钮后,倒计时60秒才能再次点击发送验证邮件

<input type="button" id="btn" value="免费获取验证码" /><script type="text/javascript">var wait=60;function time(o) {if (wait == 0) {o.removeAttribute("disabled"); o.value="免费获取验证码";wait = 60

js第一天点击按钮显示与隐藏

<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> <script type="text/javascript" > window.onload=function(){ var weibo=document.getElementById('weibo'); var content=document

学习写了一个点击按钮倒计时的jquery小插件

(function($) { $.fn.extend({ getSms: function(value) { value = $.extend({ wait: 60, //参数, 默认60秒 }, value); var id = $(this).attr('id'); var wait = value.wait; //内部函数 function time(id) { console.log(wait); if (wait == 0) { $("#" + id).removeAttr(

js控制“鼠标点击按钮后，按钮消失“（可以自己添加video标签控制播放）

css, js 项目练习之网页换肤

首先,该练习参考自:https://www.jianshu.com/p/2961d9c317a3 我就直接上代码了(颜色可以自己调). HTML: <nav> <li><a href="#">独秀不爱秀</a></li> <li><a href="#">独秀不爱秀</a></li> <li><a href="#">独

网页换肤：原生js与jq

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="jquery-3.3.1.min.js"></script> <script src="../JQuery/carhartl-jquery

网上找到的一个jquery版网页换肤特效

这个跟我之前在锋利的JQuery那本书里看到的那个一模一样. <!DOCTYPE html> <html> <head> <meta name="" content="" charset="utf-8"/> <title>jquery实现页面皮肤切换并保存-柯乐义</title><base target="_blank" /> <link

jquery网页换肤+jquery的cookie+动态调用css样式文件,可以的

比较具有参考性,代码全贴(当然,还需要一张图片需要的留个邮箱,看到就发) 贴在这儿吧,修改一下css的引用位置应该可以用 <%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN&q